How To Optimize Images In WordPress?

Although images play a great role in grabbing reader’s attention and boosting the sharing ability of the content, they might also result in increasing the size of a web page, thus making it slow. As a result of heavy images, browsers need more time to download the web page content. It is important to keep in mind that website loading time is a crucial factor in guaranteeing a good online user experience. Even though you might be having outstanding content and images on your website, if the web pages don’t load quickly, it’s of no use.

You might have implemented many things to take care of your website speed like hosting it on an efficient server, optimizing the content etc. but you also need to pay attention to optimizing the images on your website. You might have noticed that if a web page is loading slowly, the content loads first and then the images, if the images on your website are optimized, then they will load fast as well.

Why is it important to optimize the images on your website? What can be achieved with image optimization? Here’s what is possible with image optimization:

Your website pages will load faster
Your website’s Google Page Speed score will improve
Your website’s search engine rankings will improve
Your website’s bounce rate will be reduced
You will require less storage place on the server, you will need lesser resources and thereby you can save money

If your website is powered by WordPress, here is what you can do to optimize the images:

Image File Formats

You can save the image files in various file formats. The most frequently used file formats include JPEG and PNG. The JPEG file format is more suitable for photos as it contains many colors; this format uses in-built compression to reduce the file size of the image. The PNG file format is more suitable for screenshots and website design mages like icons and buttons, this file format utilizes the lossless compression technique in order to enhance the image quality but it also increases the image file size. Another file format that is frequently used is the GIF, this format is suitable for low quality images that use few colors. The GIF file format is widely used for animated files.

Using Progressive JPEGs

Here is an example of a progressive JPEG image:

** insert image – progressive jpeg method

The JPEG images can be of two types : Baseline and Progressive. Although both look the same visually, the difference lies in the way they are loaded.

Baseline JPEG – This format comprises of only one layer that contains the whole image. When requested, the complete image is loaded at one go.
Progressive JPEG – This format loads the image with multiple layers. The image is loaded layer by layer. This method increases the quality of the image gradually and provides you with a lossless view.

There are many online image resize applications that enable you to save images as progressive JPEG. Depending on the file size, a progressive JPEG image can be optimized in a much better way resulting in a smaller image output size that eventually leads to a faster page load time. If you use the progressive JPEG method, the modern browsers can load the JPEG images more quickly.

Optimize The Images Before Uploading Them

WordPress comprises of a ‘thumbnail’ feature that automatically creates 3 different sizes of the image that you want to upload. This feature is present in the WordPress admin area under the option – ‘settings/media’. With this feature, you can easily adjust the thumbnail sizes or you can also configure WordPress to create a thumbnail image of a particular size – 150×150 image, 300×200 pixel medium image or 600×600 pixel large image.

If you upload any image that has a width of 1000 pixels, you can display the large image in your article and link it to the full size image – this practice is followed by most of the bloggers, it is not the ideal way of handling images. Although the file size of the thumbnail images is small, as size of the uploaded image is reduced by WordPress, the images are not compressed by WordPress while creating thumbnails. Therefore, an effective method to compress the images is to optimize them before uploading.

Also Read, Optimize WordPress in Few Steps and Improve SEO

You can easily optimize the images with the help of the graphical editing applications like Photoshop that enable you to reduce the quality of an image for the internet. In Photoshop this option is known as ‘Save for Web and Devices’. Photoshop enables you to select the file type of the image and quality of the image as well. The bottom left hand side of the Photoshop interface provides details about what the image file size would be if you save the image with a particular setting. Similar optimizing and editing options are available in other graphical editing applications like GIMP, ImageOptim (MAC), RIOT (Windows), PNGGauntlet (Windows) and Trimage (Linux), you can download these applications for free and start using them.

Optimize The Images After Uploading Them To The Website

As we all know, WordPress provides a wide range of plugins and there are plugins available for optimizing the images after you have uploaded them on the website. Although it is preferable to optimize the images before uploading them, you can also choose to optimize them after they are live on your website if there is a huge number of images to work with. You cannot take every image down, optimize it and then put it back on the website, so if you have uploaded the images, you can easily optimize them with plugins.

Here is a list of WordPress image optimization plugins that you can use:

It is important to note that if you compress an image, the image file size will be reduced but the quality of the image will also be hampered if you compress it too much. Therefore, it is important to strike the right balance between the image quality and image file size.

Conclusion

The significance of optimizing and compressing your images cannot be underestimated. Having optimized images on your website will reduce the web page load times, reduce the required bandwidth and improvise the overall online browsing experience of your visitors. As your website pages load quickly, it will also have a positive effect on your search engine rankings.