Optimize your images in your WordPress sites

It is a proven fact that a website with a fast page load converts more because it gives users a better browsing experience. User are less likely to visit your website again if your website takes too long to load. Improving your WordPress site speed will also save your web hosting resources, and at the end of the day, save you money.

According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs. Images account in average for 1.7MB of the content loaded for the 3.0MB average site.

For Impatient Web Users, an Eye Blink Is Just Too Long to Wait. Source : NY Times

Some Facts to keep in mind :

One second late loading cost for Amazon is $1.6B(Source)
Back In 2009 Amazon already demonstrated that every 100 milliseconds of latency which occurred on their website will result in a 1% loss in sales.Which means, every second of latency will cost Amazon approximately 10% of revenue!
An interesting study by Walmart, showed that every second of improvement in their website loading time would increase conversion by 2%.
Tagman found that every second of delay in page loading time can result in a 7% decrease of online sales.
Website loading time influences your Search Engine traffic too; Slow sites rank lower(Source)
Website page load speed is one of the official Google criteria in Web Search Ranking.

How to monitor the page load performance ?

There are many online web service test your website loading speed. The following is a list of the best free ones.

Optimize your images

Use the right image format

JPEG/JPG : for photos of things, people, places
PNG : for screenshots
GIF : for animations

Compress your image files

Typically, large high quality images should be kept between 100K and 60K. source : Image sizes and quality on WordPress.org.

Use online image compression tool or computer softwares to reduce the file size but not the image quality :

tinyPNG. The best, I use it everyday, it works for png and jpeg format
Preview for Mac
ImageOptim (MAC)
RIOT(Windows)
PNGGauntlet (Windows)
Trimage (Linux)

Regenerate your images for your current theme's

Each WordPress theme defines specific image sizes that will be used in various contexts. Each time you upload an image to your media library, WordPress generates in the background all the theme required sizes.

When you switch from one theme to another, all your previous images are not automatically re-generated. So you may have many images with wrong dimensions. The simple solution to avoid this problem is to use the excellent and free plugin called : Regenerate Thumbnails.

Implement a solution to only load the images when user needs to see it

This is call the lazy loading. This can further compliment the byte-savings you see from having an image compression strategy. When you load a web page on any device, but in particular on a mobile device, the larger part of this page is not visible in the viewport. So why would the browser try to load all the images on page load, when only few of them must be displayed. A better approach would obviously to load the initially not visible images on scroll. This strategy is well known and dramatically increase the speed of any website.

When building a WordPress website, this is really recommend to use a theme or plugin that implement this technology. Decreasing your overall page load time on an image heavy website from several seconds to almost nothing is a tremendous boost to user experience. In fact, it could be the difference between a user staying around to enjoy your site and just another one leaving it too early.

At Press Customizr, we have been integrating the lazy loading technology in our themes Customizr and Hueman, with excellent results on the performances and user experience.

Advanced settings : using a WordPress cache plugin

After you have carried out the above recommendations on your website, and your PageSpeed Score is still not within the A (90% to 95%) range.
For further improvements, you may want to try out the following free cache plugins from WordPress Plugins Repository.

To go deeper in that topic, you can take look at How to setup W3 Total Cache with the Customizr theme.

Good Tools to reduce image file size

Desktop : ImageOptim ( Mac ), XNConvert ( Win / all )
Build : ImageOptim CLI, Imagemin
Server : ImageFlow, Thumbor
CDN : Cloudinary, Imgix