Ending Responsive Images  🔗 **Source:** [Ending Responsive Images](https://cloudfour.com/thinks/ending-responsive-images/) 📄 **Full text:** ![[Full Document Contents/Articles/Ending Responsive Images.md|Ending Responsive Images by cloudfour.com]] ## Highlights - Mat Marquis, former [Responsive Images Working Group](https://www.w3.org/community/respimg/) (RICG) chair and [amateur boxer](https://www.indiegogo.com/en/projects/matmarquis/wilto-s-first-fight-night), isn’t known for pulling his punches. And yet, Marquis stopped short when he declared [The End of Responsive Images](https://piccalil.li/blog/the-end-of-responsive-images/). Mat left responsive images on the ropes. I hope to finish them. ([View Highlight](https://read.readwise.io/read/01ktwhekfagkqae27aangv3ja5)) - Note: Framing: builds on Mat Marquis's "The End of Responsive Images" — RICG context - Tags: responsive-images, atom/literature/h2 - Simplifying `sizes` is a good start, but I believe we can go further and radically simplify the markup for lazy-loaded images using [Responsive Image Client Hints](https://wicg.github.io/responsive-image-client-hints/). Responsive Image Client Hints is a draft specification being stewarded by [Eric Portis](https://ericportis.com/) also of RICG fame. ([View Highlight](https://read.readwise.io/read/01ktwhee1gttvjx036pemyqvsh)) - Note: Grigsby's proposal: radically simplify lazy-loaded image markup via Responsive Image Client Hints (draft spec) - Tags: responsive-images, atom/literature/h1 - Responsive images syntax will always have a role to play. Not every web page will have a image resizing server and images visible in the initial viewport will still face the race condition that gave the RICG fits. Any images in the initial viewport [shouldn’t be lazy-loaded](https://cloudfour.com/thinks/stop-lazy-loading-product-and-hero-images/). ([View Highlight](https://read.readwise.io/read/01ktwhegdk31g396xrqg5760ct)) - Note: Lazy loading removes the race condition that forced complex srcset/sizes — but in-viewport images still need it - Tags: responsive-images, atom/literature/h2