Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.
What You Need to Know
Srcset can describe candidates using either pixel widths, such as 480w, or pixel-density hints, such as 2x. Use one style consistently for a source list; they solve different selection problems.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<img src="images/city-800.jpg"
srcset="images/city-400.jpg 400w, images/city-800.jpg 800w, images/city-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="City buildings at sunset" width="800" height="450">Let’s Read the Code
- <img>: The img displays a picture; its alt is the text alternative.
- src: Src identifies a resource path for images, frames, or media.
- srcset: Srcset offers image candidates for different displays or layout sizes.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Which picture loads? With width descriptors, sizes describes the expected display width and srcset offers candidates. The browser can also consider screen density and network conditions. Inspect the selected source instead of assuming every screen receives the same file.
Your Turn
Resize the viewport and inspect the chosen image source in Developer Tools. Do not assume the browser always downloads the smallest file.
Common Beginner Mistakes
- Expecting the page to run scripted behavior when the required JavaScript is missing.
- Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.
Key Takeaways
- Srcset can describe candidates using either pixel widths, such as 480w, or pixel-density hints, such as 2x.
- <img>: The img displays a picture; its alt is the text alternative.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.