Image optimization for your site

image optimization for your site Tutorials

An important criterion for your site visitors to enter the site, and not prematurely refuse to load the page speed, both on the desktop and on the mobile phone.

In addition, search engines will index and place higher on search results pages that load quickly in four seconds.

A download speed of up to 2 seconds is ideal, which can be achieved if you take into account several criteria.

In this article I will refer especially to image optimization.

image optimization
image optimization

A website page loads faster if you don’t have a lot of resources: files, style files (CSS) and JavaScript files, fonts, audio, video, PDF, etc.

Often it is not possible to have a website without these resources, and then you need to rethink their distribution.

I digress a little, and tell you, very briefly, what can be done.

The video and audio resources that take up most of the disk space, so it’s good for the video to be uploaded to Youtube or Vimeo for free and served there, and Soundcloud audio or Yourlisten.

CSS and JavaScript files can be minificate, and if there are more files of a certain type, they can be combined into one file.

Images can be combined into one gallery or in articles. A photo gallery, if you have a lot of images, can be created from Flickr and uploaded there, and images on articles and pages can only be uploaded to the media library site.

WordPress has a download folder on the server where all image files are paged, PDF or extensions are allowed.

Many times I have seen photos uploaded very large, as you remove the camera. Below is a sample media library site.

Image Optimization too high

It is true that WordPress creates images load, 3 more files, if not changed the default settings.

One of 1024px in width is the largest one of 300px and a square of 150x150px.

A large picture is created only if the original image exceeds 1024px sides most.

See Also:How in WordPress to show photos before and after

In our case, the 4410x3301px image can be loaded with an average 300px image, which will have a smaller disk size, although not optimized.

Image result for optimize image

But the image server to download 6MB or even higher if you do not need? I think that in these 6MB we will add the size of 3 images created using WordPress. In addition, they will experience problems when performing backups using plug-ins, they will not be able to quickly create archive files and errors may occur. So what can you do? Images can be resized and compressed.

Universal Web Image Formats

The use of graphic formats used on the Internet are: jpg, png and gif.

JPEG image format, which can save all digital cameras have a compression algorithm with a loss of quality that every change in size and compression lose less quality.

They can have up to 16 million colors and are widely used because they have a smaller disc size and quality.

See Also:How to reduce the bounce rate for your WordPress site: 18 tips

Images PNG high quality, has 16 million colors 24-bit, do not lose quality, transparent support for several channels (for example, images round some squares with transparent edges) and has a size on the disk.

They are used if you want quality and transparency. PNG images with fewer colors and no transparency sometimes have a smaller disk size than JPG.

Type GIF images only 256 colors, use images with a small number of colors, with a lot of text, supports transparency and animation. Being the old format is supported by most browsers and applications.

In one place can be all three formats, depending on their use. For example, animated banners can be as GIF, PNG image portfolio and JPG elements.

Please note that there is a recipe for formatting images, you can experiment with different formats and see the quality and the same image size for each format.

Image resizing before loading site

Usually the owners of small sections of people atehnice, most only know to write articles, upload a photo and send an article and the resource implications are not aware of the site.

Therefore, it is important to know how to quickly and easily resize an image.

Image result for Image resizing before loading site

There is currently the ability to resize images on the Internet, not too much trouble and without using the application it is difficult to find out, such as Photoshop or Gimp.

However, Adobe Photoshop is an online tool that can edit free images, called Photoshop Express Editor.

The disadvantage is that you can edit only JPG, JPE, JPEG or up to 16Mb images.

But when you consider that most of the images used in JPG articles

What are the steps to resize an image with this tool:

Click this link to go to the publisher page.

Click the blue link that appears below: Start the editor.

Upload the image you want to edit or change by clicking the Upload Photo button.

A message will appear, warning you that only JPG images can be edited. Click “Download” and download the image from your computer.

Step 4: Since we are only interested in resizing, click the second link on the left – Resize.

Step 5: at the top of the image there will be more options: for the profile, for mobile devices, for email, for the site.

Click on one of the sizes that interest you, such as a website.

The default size is 800 pixels on the largest side. If you click “Custom”, you can resize the image to the desired size.

Step 6: After resizing, click the gray button in the lower right corner: Done.

Step 7: Opens a screen where you can save a new image.

The image will be renamed to the application, adding the edited word at the end of its name.

If you want, you can rename the image and save it on your computer. Also on this screen you will see the size of the image on the disk.

That’s all! You now have a JPG image size that you can use in articles or pages on the site.

Let’s see what else needs to be done for full optimization.

Image compression

Photoshop is very good in many ways, but it doesn’t compress images very much.

What does compression mean? Images may have a million color pixels (16 million for a 24-bit PNG), with more colors changing depending on how the picture will have more information, this will be very clear, but take up more disk space.

Thus, the compression algorithm consists of shuffling colors, similar to shade, which the human eye does not notice at all. Thus, the image will have a smaller disk size and fewer colors.

An excellent tool for compressing images, PNG and JPG is TinyPNG.

As soon as you open the page, you will be met by the mascot Panda and a box in which you can download the optimized image. You can upload 20 images with a maximum of 5 MB each.

After you wait a few seconds for compression, you can download the new version of the image.

Panda will tell you how many percent of the disk size has been saved. Image can be saved on your computer or Dropbox.

TinyPNG also created a WordPress plugin for compressing and resizing, with a limit of 500 images per month for free.

I do not recommend it to newbies, retailers or photographers who want to show beautiful images, but compression still reduces quality if it is a JPG.

If you like to use this plugin, first save the wp-content / uploads folder on the server so that you will not have any surprises and carefully read the instructions. I will write about this plugin in detail in another article.

Conclusion for image optimization

If you’re still trying to write an article, make an optimization for your photos, especially if you download them from the camera.

Image optimization will benefit you: a less loaded server, a quick page on the desktop and a mobile phone, visitors remaining on the page.

To resize, compress and reformat images from a fire.

You can use another online tool that you find on this page.

After creating all the settings that interest you, you can view the image, and if it’s ok, click Resize.

The images in the gallery above were PNGs ranging in size from 250-400 KB.

And I changed their size to 800 pixels, JPEG format, and 70% quality.

The size of six images is now 311 KB. I saved something, right?

And if you are still editing images, they will give you advice for SEO: put keywords in an article, for example: optimize-images.jpg.

Share with friends
ActualThemes
Add a comment