Case Study: Cutting Image Sizes by 60 % to Boost Page Speed
Updated: 2025-10-18
Images are often the largest contributor to page weight. For businesses that rely on product photos, this can have a huge impact on user experience and conversion rates. In this case study, we explore how a hypothetical e‑commerce site—“XYZ Store”—reduced its average image size by 60 % using modern formats and automation. The result was a dramatic improvement in load times and customer satisfaction.
Baseline: the problem
XYZ Store’s product pages were beautiful but heavy. Each page contained high‑resolution JPEGs totalling over 2 MB. On 3G connections, pages took more than 3 seconds to become interactive, leading to high bounce rates. Analytics showed that images accounted for two‑thirds of total page weight—a common pattern【293518404046555†L71-L84】.
The team wanted to cut file sizes without hurting visual quality. In particular, they aimed for at least a 50 % reduction while preserving crisp product details.
Technique: converting JPEGs to WebP
After researching modern formats, the developers decided to convert all JPEGs to WebP using an automated workflow. WebP, developed by Google, supports both lossy and lossless compression. According to a case study on Magento performance, converting images to WebP can decrease file sizes by roughly 60 % without any visible quality loss【293518404046555†L118-L123】. For browsers that didn’t support WebP, the site would fall back to the original JPEG.
The team used a Node.js script built on the sharp
library to automate the conversion. During the build process, it
generated WebP versions for every product photo at multiple
resolutions and updated the HTML to use the
<picture> element. Metadata was stripped
automatically, and quality values were tuned to 80 for lossy WebP.
Results: dramatic size savings
After the migration, the average image size dropped from 1.5 MB to 600 KB—a reduction of 60 %. In several instances, the savings were even higher: the Magento case study cited reductions of 79–80 % when converting to WebP【293518404046555†L145-L157】. Page weight on XYZ Store fell by over 50 %, and load times plummeted. A similar study reported that page load time improved from 1.78 s to 1.01 s after implementing WebP and caching【293518404046555†L161-L167】.
WebP’s smaller file sizes also meant that more assets fit into the browser cache, further improving repeat visits. And because the images were generated at build time, there was no runtime overhead.
Beyond WebP: exploring AVIF
With the success of WebP, the team experimented with AVIF. As noted
in industry analyses, AVIF files can be around 50 % smaller than
JPEGs【221654481411971†screenshot】 and sometimes even edge out
WebP【221654481411971†screenshot】. However, AVIF encoding took
longer and some older browsers lacked support. The team ultimately
decided to add AVIF as the first source in the
<picture> tag for browsers that could handle
it, with WebP as the next fallback.
Key takeaways
- Modern formats matter: Switching from JPEG to WebP or AVIF can reduce image size by 50–60 %【293518404046555†L118-L123】, dramatically improving page speed.
- Automation simplifies optimisation: Use build scripts or CI pipelines to convert and optimise images at multiple sizes.
- Always provide fallbacks: Not all browsers
support WebP or AVIF. Use
<picture>with fallback<img>elements to ensure coverage. - Monitor results: After deploying, track load times and conversion rates. Reduced page weight should correlate with improved metrics.
Conclusion
For XYZ Store, reducing image sizes by 60 % wasn’t just about numbers—it directly translated into faster pages, happier users and higher sales. With modern formats and automated workflows, it’s possible to deliver beautiful, high‑resolution images without sacrificing performance. If your site suffers from bloated pictures, follow the steps in this case study to see similar improvements.