Responsive Images 101, Part 6: Picture Element
Programming - Apr 19, 2024
In Parts 3, 4 and 5, we focused on solutions for resolution switching. Now it is time to look at how to solve for art direction.
The picture element—the media attribute in particular—is designed to make art direction easy.
The <picture> element contains a series of <source> child elements followed by the required <img> element. The source elements work similarly to the child sources of the video element.
<picture>
<source media="(min-width: 900px)" srcset="cat-vertical.jpg">
<source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
<img src="cat.jpg" alt="cat">
</picture>
Code language: HTML, XML (xml)
Each source has a required srcset attribute along with optional attributes including media, sizes and type. Both sizes and srcset on a <source>
element work exactly the same as they do on an <img>
element.
We’re going to focus on the media attribute for now.
Media attribute
The value of the media attribute is a media query. Unlike the media condition that the sizes attribute uses, this is the full media query that you’ve come to know and love.
As the browser looks through the list of source elements, the first source whose media query matches is the one that is used. If no media queries match, then the <img>
element is used.
Media attribute is a directive, not a suggestion
Unlike srcset and sizes, when you use the media attribute, you are dictating to the browser which source should be used.
The browser has no discretion to pick a different source. It must use the firstelement whose media attribute matches the current browser conditions.
This is why the
Let’s take a look at this in action.
Picture element in the wild
Shopify uses the
On narrow screens, the photo of Ms. Anestopoulos is cropped. Because the image is no longer simply being scaled down, this is considered art direction.
The markup that Shopify uses combines the
<picture>
<source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"
media="(min-width: 990px)">
<source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x"
media="(min-width: 750px)">
<img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x"
alt="Shopify Merchant, Corrine Anestopoulos">
</picture>
Code language: HTML, XML (xml)
Looking at the code in more detail, what we see is the Shopify has three different image breakpoints. The image is a fixed width at each breakpoint—it jumps from size to size instead of flexing between breakpoints.
Because the image is fixed width, srcset display density descriptors make sense. So for each breakpoint, Shopify has defined a 1x and 2x source file. It breaks down like this:
- <source … media=”(min-width: 990px)”> — The largest image size, which Shopify calls desktop, is the first source. The media attribute tells the browser that this source should only be used if the viewport is larger than or equal to 990 pixels wide.
- <source … media=”(min-width: 750px)”> — The second source, the “tablet” image, will be used for viewports larger than or equal to 750 pixels. Because the first source takes effect at 990 pixels and the browser selects the first source that matches, the effective range of the second source is from 750 to 989 pixels.
-
<img> — If there are no matches for the two sources, then the viewport must be smaller than 750 pixels wide. When that is the case, the srcset on the <img> element will be used. This “mobile” image is the cropped image used for small screens.
If the images were flexible instead of fixed width, Shopify could have used <picture> with srcset width descriptors instead of display density descriptors.
One final trick
If you have art direction, you need the picture element. But the writers of the picture specification had one final gift to give us web authors and it’s a big one.
Continue with Part 7: Type to learn about an exciting new world of image formats.
Responsive Images 101 Series
- Definitions
- Img Required
- Srcset Display Density
- Srcset Width Descriptors
- Sizes
- Currently Viewing:Picture Element
- Type
- CSS Responsive Images
- Image breakpoints
- Conclusion