How we improved image download sizes on Medium with just four characters

Summary

Image-heavy websites need browsers to choose efficient image variants, but srcset and sizes can require complex breakpoint rules for responsive layouts. The post distinguishes picture, which lets authors prescribe sources based on conditions, from srcset, which gives browsers candidate dimensions and lets them choose using context such as connectivity and cache state. It explains that browsers begin fetching images before layout is rendered, while lazy-loaded images can defer fetching until their dimensions are known. With WebKit's March 24, 2026 support for auto in sizes on lazy-loaded images, the recommendation is to prepend auto to those sizes attributes; unsupported browsers ignore the unparseable rule. On Medium, the change made the home feed's image-related download chunk about 7% smaller on a small, but not mobile-small, display, and the text says WordPress updated every instance broadly.

Takeaways

1. 1

   The picture element is intended for choosing different images based on conditions such as color scheme, screen dimensions, or file type, while srcset describes alternate dimensions of an otherwise identical image.

2. 2

   The reported Medium change reduced the image-related download chunk for a home-feed view by about 7% on a small, but not mobile-small, display.

3. 3

   The post says WordPress updated every instance of lazy-loaded images to support auto, relying on the existing sizes behavior to preserve compatibility in browsers that do not recognize it.