A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.
What You Need to Know
Photos of products help people choose, so show the relevant details clearly. Responsive images can load an appropriate file for different screens, but the alt description should still explain the product's meaningful features.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<picture>
<source media="(max-width: 600px)" srcset="images/backpack-closeup.jpg">
<img src="images/backpack-wide.jpg" alt="Blue backpack with a front pocket and side bottle holder" width="900" height="600">
</picture>
<p>Blue backpack, available in several sizes.</p>Let’s Read the Code
- <picture>: The picture can offer alternate crops or formats to the browser.
- <source>: A source points to a media file or image choice with a type or other condition.
- srcset: Srcset offers image candidates for different displays or layout sizes.
- src: Src identifies a resource path for images, frames, or media.
What the example shows: The narrow crop can show product detail on a phone while the wide photo shows the whole backpack on larger screens.
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 browser and decide whether the phone crop still shows the product clearly.
Common Beginner Mistakes
- Expecting the page to run scripted behavior when the required JavaScript is missing.
- Alternative text still needs to describe the essential product across both crops.
Key Takeaways
- Photos of products help people choose, so show the relevant details clearly.
- <picture>: The picture can offer alternate crops or formats to the browser.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.