Responsive Images: srcset and sizes
How srcset and the sizes attribute work together to serve the right image per device, save bandwidth, and keep visuals sharp.
7 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Why one image size isn't enough
Serving a single large image to every device wastes bandwidth on phones and looks soft on high-density screens. Responsive images let the browser pick the best source for each device's width and pixel ratio - smaller files for phones, sharper files for retina, and the right size for the layout slot the image occupies.
One size either wastes mobile bandwidth or looks soft
srcset offers the browser multiple sources to choose from
The browser picks based on width and pixel ratio
Right-sized images improve LCP and data usage
srcset and sizes, working together
Use width descriptors in srcset (image-480.jpg 480w, image-960.jpg 960w) to list available sizes, and the sizes attribute to tell the browser how wide the image will render at each breakpoint. Without sizes, the browser assumes full viewport width and may over-fetch. For fixed-size images, density descriptors (1x, 2x) are simpler.
srcset with w descriptors lists source widths
sizes describes the rendered width per breakpoint
Missing sizes makes the browser assume 100vw
Use 1x/2x density descriptors for fixed-size images
Verify the right source loads
Responsive image bugs are silent - the wrong source loads but nothing visibly breaks until someone checks the network panel. Test across device profiles and confirm the expected variant is fetched and stays sharp. Sizzy lets you view several DPR and width profiles together so you can confirm phones get the small file and retina screens get the crisp one.
Check the network panel for the chosen source
Confirm phones fetch the smaller variant
Confirm high-DPR screens get a sharp variant
Pair with modern formats like WebP/AVIF
Release checklist
srcset lists appropriately sized sources.
sizes accurately describes the rendered width.
High-DPR screens receive sharp variants.
The correct source is verified in the network panel.
Frequently asked questions
What is the difference between srcset and sizes?
srcset lists the available image sources and their widths, while sizes tells the browser how wide the image will display at each breakpoint. The browser combines both with the device pixel ratio to pick the best source.
Do I always need the sizes attribute?
When using width (w) descriptors, yes - without sizes the browser assumes the image is full viewport width and may download a larger file than needed. For fixed-size images you can use density (1x/2x) descriptors and skip sizes.
How do I check the right responsive image loads?
Open the network panel and confirm which source was fetched at a given viewport, or test across device profiles in a multi-device browser to verify phones get the smaller file and high-DPR screens get the sharp one.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.