Image optimization helps pages load more quickly. Across the web, developers refer to image optimization as the “low-hanging fruit” because it’s an obvious, relatively easy performance problem to solve.
For example, when searching for “image optimization” I quickly stumbled on this quote, highlighted in a KeyCDN post:
On occasion I see people focusing on web optimization techniques that offer only modest gains—back-end script execution time, for instance—while ignoring low-hanging fruit like image optimization or even choosing the best image format. – Jeff Atwood, Stock Exchange
Image optimization ultimately means reducing the page size. On average, lossless optimizations can reduce the size of an image by 15-20%. Smaller images take less time to load in the browser. If your page has many images then those small optimizations should add up to perceivably better load time. Let’s consider a few points:
- Walmart saw that for every 100 ms of improvement, incremental revenue grew by up to 1%
- Amazon found that each 100 ms delay in page load time led to a 1% loss in sales
- According to HTTP Archive, images account for more than 60% of page size
- In one developer’s example, optimizing a single large hero image reduced page load time by 26%
Yet, even something as obvious as making image files smaller can go overlooked in organizations where performance culture isn’t actively practiced. Even here at Rigor, we often make the mistake of uploading unoptimized images into the content on our WordPress website.
A Real Team Rigor Example
We recently published an eBook about Google’s PageSpeed Insights rules. The eBook’s body contains 15 unique images plus a hero image for the page. Of those 16 images, 12 were unoptimized when we published. Whoops!
Here’s the good news: with one-click of a button in Rigor Monitoring, I was able to kick off a Rigor Optimization scan that not only caught exactly which 12 images were unoptimized but also generated the optimized files for me. I downloaded the files and updated our eBook in WordPress. Then, I watched for the page load savings rolling in.
Not so fast. I inspected the HAR report for my online eBook page expecting to find my smaller images rendering. Turns out, our WordPress site uses WP Engine and has pretty aggressive caching. After busting the cache and confirming that optimized files were now rendering, I checked the HAR reports to see whether I found any impact on the load time.
Comparing one HAR report to another, I saw that 4MB in image savings resulted in .8 seconds of page load time reduction.
before optimizing images
after optimizing images
Rigor Optimization report shows that “Images Got Better” and “Less Defects Were Found.”
Ultimately, I will need to collect more data points over time to prove that reducing the image size resulted in the faster page load time. There are many other factors that could influence page load timings. However, you can imagine that if optimizing 12 images on a page yielded this small improvement, then similar optimizations on an image-heavy page (for example, a products page or media homepage) could certainly add up to a measurable impact on performance in seconds. Remember: just 100ms of improvement can help increase revenue, and it only takes a few minutes to fix unoptimized images.
Practicing performance culture means building processes that make performance easy for everyone. From marketing to engineering, train teams on accessible tools. Personally, I will be sharing the gospel of ImageOptim with my teammates. And, of course, we’ll also rely on Rigor Optimization to help catch the things that slip through the cracks. Cheers to having lots of room to improve!
Are you looking for a tool to help support performance culture at your company? Eager to see what images have gone unoptimized on your site? Contact us today to start a free trial and see how Rigor could fit into your workflow.