How we improved image download sizes on Medium with just four characters
The introduction of the "auto" value for the sizes attribute in lazy-loaded images allows browsers to optimize image loading based on layout and connectivity, significantly reducing download sizes with minimal code changes.
MAIN POINTS
- Image-heavy websites face challenges with optimization and download sizes.
- The `<picture>` element and `srcset` attribute offer control over image rendering.
- The "auto" value for sizes in lazy-loaded images optimizes loading.
- WordPress has already adopted this change for improved performance.
TAKEAWAYS
- Adding "auto" to sizes in lazy-loaded images reduces download sizes.
- Browsers can now decide the best image version to load based on context.
- This change requires minimal code adjustments and is backward compatible.
- The update is already supported by major browsers like WebKit and Gecko.