How we reduced image download sizes on Medium with just four characters
A simple yet effective optimization technique for HTML images.
1Introduction
The Medium team successfully reduced image download sizes on their platform significantly with just a four-character code change. This optimization improved user experience while decreasing bandwidth usage.
2History of web images
In the early 2010s when mobile-responsive design was rising, developers had to manually manage appropriate image sizes for different devices. WordPress-based solutions were common, and dynamic optimization options were limited.
3Picture element
Introduced in 2012, the picture element gave developers flexibility to serve different images based on dark/light mode preferences, screen sizes, and file formats. This is particularly useful when different layouts require different images.
4Srcset attribute
Srcset allows developers to provide different resolutions of the same image while letting the browser decide which to use. This approach enables smarter decisions by considering factors like cache status and connection speed.
5Browser decision mechanism
The srcset implementation is intentionally opaque because browsers have access to information like connection speed and cache status that developers don't. This allows for better optimized user experiences.
6Sizes attribute
The sizes property tells the browser how much space an image is expected to occupy in the page layout. This provides critical optimization for the web where images begin downloading before layout is rendered.
7Early download problem
When browsers receive HTML, they start downloading images before layout is created. Therefore, they have no way of knowing how much space an image will actually occupy. The sizes property provides this information for better decisions.
8Medium's solution
By strategically using the sizes attribute, the Medium team managed to reduce image download sizes by up to 7%. This small but effective change significantly improved the platform's performance.
9Conclusion
Web performance optimization doesn't always require big changes. Medium's experience shows that small, conscious changes in the right places can yield significant gains. This approach serves as a valuable lesson for all web developers.