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. As of July 2017, images accounted 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)
- In 2009 Amazon 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)
- 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.
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
More in this article.
Recommended external resources
- Essential Image Optimization
- Google Image Optimization Guide
- Sitepoint: GIF, PNG, JPG. Which One To Use?
- Google Code - Page Speed: Minimize payload size
- WordPress Optimization/WordPress Performance
- Speed Up Your WordPress Site
- The Ultimate Guide To WordPress Speed Optimization
- Yahoo's Yslow tool
- Best Practices for Speeding Up Your Web Site
- General web page loading speed and performance best practices
- Speed Is A Killer – Why Decreasing Page Load Time Can Drastically Increase Conversions
- HTML5Rocks’ excellent image compression overview.