--- title: Ending Responsive Images | daily.dev description: Lazy-loading images has fundamentally changed the responsive images problem. The classic race condition — where browsers must choose an image source before... canonical: https://daily.dev/posts/ending-responsive-images-jvntuvxno twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Ending Responsive Images | daily.dev og:description: Lazy-loading images has fundamentally changed the responsive images problem. The classic race condition — where browsers must choose an image source before... og:url: https://daily.dev/posts/ending-responsive-images-jvntuvxno og:image: https://api.daily.dev/og/posts/jVNtUVxNo.png og:image:alt: Ending Responsive Images og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Ending Responsive Images **[Cloud Four](https://daily.dev/sources/cloudfour)** · 12 min read · 89 upvotes · 4 comments ## Summary Lazy-loading images has fundamentally changed the responsive images problem. The classic race condition — where browsers must choose an image source before knowing the page layout — only applies to images in the initial viewport. For below-the-fold images using `loading="lazy"`, the browser already knows the image size when it downloads, enabling `sizes="auto"` support now shipping in all major browsers. Going further, Responsive Image Client Hints (a draft spec) allow removing `srcset` entirely: the server receives the exact rendered image width via HTTP headers and can serve the right size dynamically. For browsers lacking Client Hints (Firefox, Safari), a small blocking JavaScript polyfill by Eric Portis achieves the same result for Cloudinary users. The conclusion: most images on the web can now use dramatically simpler markup, though above-the-fold images still require full `srcset`/`sizes` syntax. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@codagonist** · 1 upvotes > Genuinely thinking aloud here: what about tags that use webp (with jpg as fallback) that come from a cms or are generated by the backend? Think product images that use 1 'real' image and are generated on different sizes. Or hero banners that use different images for different screensizes? > > Or am I overthinking this and is what the article describes indeed a (big) improvement on all counts? > > Hmz, perhaps I need to test this out myself.. **@gresakg** · 0 upvotes > This is a catch 22. You can ommit srcset bellow the fold. But to know which images are bellow the fold, you'd have to know the viewport and the final layout. On the server side you don't know that before sending the page, That is the exact reason why you need srcset in the first place. **@beesou777** · 0 upvotes > what do you think about picture tag ?? ## Similar posts on daily.dev - [Ending Responsive Images – Master.dev Blog](https://daily.dev/posts/ending-responsive-images-master-dev-blog-uegsx3njo) · Frontend Masters · 47 upvotes · 3 comments - [Responsive Images in WordPress: What You Need to Know](https://daily.dev/posts/responsive-images-in-wordpress-what-you-need-to-know-6e2xqgdyf) · WP Mayor · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/ending-responsive-images-jvntuvxno) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Ending Responsive Images","url":"https://daily.dev/posts/ending-responsive-images-jvntuvxno","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/ending-responsive-images-jvntuvxno"},"datePublished":"2026-06-11T16:16:55.843Z","dateModified":"2026-06-12T08:19:56.242Z","description":"Lazy-loading images has fundamentally changed the responsive images problem. The classic race condition — where browsers must choose an image source before...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4671583b1b086ce7563d10f1d57ad99e?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4671583b1b086ce7563d10f1d57ad99e?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Cloud Four","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Cloud Four","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/f180c266bb8b421ba9a15dec64d9dad3","url":"https://daily.dev/sources/cloudfour"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/ending-responsive-images-jvntuvxno","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":89},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"webdev","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Cloud Four","item":"https://daily.dev/sources/cloudfour"},{"@type":"ListItem","position":3,"name":"Ending Responsive Images"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/ending-responsive-images-jvntuvxno","comment":[{"@type":"Comment","text":"Genuinely thinking aloud here: what about <img> tags that use webp (with jpg as fallback) that come from a cms or are generated by the backend? Think product images that use 1 ‘real’ image and are generated on different sizes. Or hero banners that use different images for different screensizes?\nOr am I overthinking this and is what the article describes indeed a (big) improvement on all counts?\nHmz, perhaps I need to test this out myself…","datePublished":"2026-06-12T08:17:57.670Z","url":"https://daily.dev/posts/jVNtUVxNo#c-Xy29b80x9","author":{"@type":"Person","name":"codagonist","url":"https://daily.dev/codagonist","image":"https://media.daily.dev/image/upload/s--ynHsGojZ--/f_auto/v1767932812/avatars/avatar_xDH2kQR3_7?_a=BAMAMiZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is a catch 22. You can ommit srcset bellow the fold. But to know which images are bellow the fold, you’d have to know the viewport and the final layout. On the server side you don’t know that before sending the page, That is the exact reason why you need srcset in the first place.","datePublished":"2026-06-18T10:21:49.205Z","url":"https://daily.dev/posts/jVNtUVxNo#c-B3XZBb1cz","author":{"@type":"Person","name":"Grergor","url":"https://daily.dev/gresakg","image":"https://media.daily.dev/image/upload/s--Mh3EhDVj--/f_auto/v1762860597/avatars/avatar_Z0Y5lKjimjGDZtplRmL1r?_a=BAMAK+ZW0"}},{"@type":"Comment","text":"what do you think about picture tag ??","datePublished":"2026-06-17T11:40:36.912Z","url":"https://daily.dev/posts/jVNtUVxNo#c-H3i6xqHJR","author":{"@type":"Person","name":"bishwa jung shah","url":"https://daily.dev/beesou777","image":"https://media.daily.dev/image/upload/s--3QAt5TxK--/f_auto/v1732519416/avatars/avatar_l8ZBl2fPJHAiouPYsur5S"}}]} ```