A webpage is not always broken because of a large mistake. Small details can produce exactly this problem: debugging: srcset uses the wrong asset. This guide shows you what to look for, a concrete fix, and how to check that it worked.
The Idea in Plain English
The browser chooses srcset candidates from descriptor sizes, sizes, pixel density and availability. src is a fallback, not necessarily the chosen image.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
The first part shows a problem. The second part shows a safer or more accurate version. Compare them before reading the explanation.
<!-- Problem -->
<img src="small.jpg" srcset="small.jpg 400w, large.jpg 1000w" alt="Lake">
<!-- Corrected example -->
<img src="small.jpg" srcset="small.jpg 400w, large.jpg 1000w" sizes="(max-width: 600px) 100vw, 600px" alt="Lake" width="600" height="400">What Each Part Does
- The img displays an image and uses alt for its text alternative.
- src points to the asset the browser should load.
- alt supplies replacement text for an informative image or empty text for a decorative one.
- sizes describes how wide a responsive image is expected to be displayed.
Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
Try It Yourself
Inspect the currentSrc property and compare the image display width with the sizes rule.
Common Beginner Mistakes
- Check the underlying cause before changing unrelated tags.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- The browser chooses srcset candidates from descriptor sizes, sizes, pixel density and availability. src is a fallback, not necessarily the chosen image.
- Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.