srcset is HTML's core resolution-switching mechanism — a way to offer the browser multiple candidate image files and trust it to pick the most appropriate one based on real device characteristics.
1Width Descriptors: Factual, Not Prescriptive
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" lists three candidate files, each annotated with its actual intrinsic pixel width using the w unit. This is a purely factual statement — 'this specific file is 800 pixels wide' — not an instruction about how large to display it.
Combined with the sizes attribute (covered in the next lesson, which tells the browser how large the image will actually be displayed at various viewport widths), the browser can calculate exactly which candidate file provides sufficient resolution without unnecessary waste, and download only that one.
2Pixel-Density Descriptors For Fixed-Size Images
For images that always display at exactly the same CSS size regardless of viewport width — a logo, an icon, an avatar — the simpler x density descriptor syntax is often more appropriate: srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" directly maps candidates to standard, retina, and super-retina display densities.
This syntax doesn't require a sizes attribute at all, since the display size is fixed and known through CSS rather than needing to be calculated relative to viewport width — making it genuinely simpler for this specific, common case.
3Why The Browser's Choice Is Unpredictable By Design
A common initial confusion: developers expect to know exactly which candidate file loads for a given scenario, but with srcset, that decision is intentionally left to the browser, which has access to real-time information the developer's code cannot — the device's actual current viewport width, its exact pixel density, and in some browsers, even current network conditions that might favor a smaller file on a slow connection.
This is the entire point of the mechanism: rather than the developer trying to guess or hardcode device-specific logic, the browser makes an informed, dynamic decision at the moment it actually needs to fetch the resource, adapting automatically as device capabilities and browser algorithms evolve over time.
4Step-by-Step Breakdown
Offering Choices, Letting The Browser Decide. srcset doesn't tell the browser which image to use — it offers a list of candidate files at different sizes, and lets the browser, which knows the device's actual screen size and pixel density, pick the most appropriate one automatically.
Width Descriptors (w) Describe Each Candidate's Size. Each URL in a srcset list is paired with a width descriptor like 400w, indicating that file's actual intrinsic pixel width — not a target display size, but a factual statement about the file itself, letting the browser calculate which is most appropriate.
Width Descriptors. What does the '800w' in 'medium.jpg 800w' actually describe?
- →The width the image should be displayed at on screen
- →The actual, intrinsic pixel width of that specific file
- →The file size in kilobytes
Pixel Density Descriptors (x) For Simpler Cases. A simpler alternative syntax uses pixel-density descriptors (1x, 2x, 3x) for cases where the image displays at one fixed CSS size regardless of viewport — directly mapping to standard versus retina/high-density displays.
Density Descriptors. When is the 'x' pixel-density descriptor syntax more appropriate than the 'w' width descriptor syntax?
- →Never; w descriptors are always strictly better
- →When the image displays at one fixed CSS size regardless of viewport
- →Specifically for art-direction, different-crop scenarios
The Browser Decides — You Can't Predict Which File Loads. A critical mental shift: with srcset, the developer never knows in advance which specific file a given user's browser will choose — that decision happens dynamically based on the device's actual characteristics at load time, which is precisely the point.
Browser-Controlled Selection. Should a developer expect to know in advance exactly which srcset candidate a specific user's browser will load?
- →Yes, it always follows a fixed, predictable rule regardless of device
- →No, the browser decides dynamically based on real device characteristics at load time
- →It always loads the largest available candidate for safety
srcset Mastered. You now know how to offer the browser a candidate list of image sizes using width descriptors for viewport-relative images and density descriptors for fixed-size ones, and why the browser's dynamic, unpredictable selection is the whole point of the mechanism.
Offer Multiple Image Resolutions. srcset lists candidate image files at different widths for the browser to choose from.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1srcset Candidates All Share The Same alt Text — Content Doesn't Change, Only Resolution
Since srcset is purely a resolution-switching mechanism (not art direction), every candidate represents the same visual content, so a single alt attribute correctly describes all of them regardless of which loads.
SEO Implications
- 1
Correct srcset Implementation Is One Of The Most Direct, Measurable LCP Improvements Available
Search engines evaluate the mobile rendering primarily (mobile-first indexing, covered in the Mobile-First HTML lesson), making mobile-appropriate image sizing via srcset especially impactful for ranking-relevant performance.
Best Practices
Always Include A Fallback src Attribute Alongside srcset
Browsers that don't support srcset (a vanishingly small but non-zero population) fall back to the plain src, so omitting it leaves those browsers with a broken image entirely.
Use Width Descriptors With sizes For Viewport-Relative Images, Density Descriptors For Fixed-Size Ones
Matching the descriptor type to the actual use case (rather than defaulting to one syntax universally) produces the most accurate, efficient browser selection.
Frequent Bugs
A developer expects a specific srcset candidate to always load in a given browser, but observes it varying.
This is expected, intentional behavior — the browser's selection is dynamic and based on real device characteristics, not a fixed, predictable rule to design around.
An <img> with srcset but no src attribute breaks entirely in an older or non-standard browser.
Always include a fallback src attribute alongside srcset for browsers that don't support the responsive image attributes.
Real-World Examples
A Complete srcset Implementation
A hero image offering three resolution candidates with a fallback, ready to pair with sizes in the next lesson.
<img
srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
src="hero-800.jpg"
alt="Team collaborating around a whiteboard"
>