Response images with picture

1. Match order
   1. Fallback
2. Art direction
3. Lazy loading
4. Worked examples

The <picture> element adds a number of features to your responsive images:

• The ability to control the image that is shown depending on media conditions. This allows control of art direction.
• The ability to define fallbacks image file formats. This allows you supply efficient image formats for browsers that support them, and fallback to other image formats for other browsers. See here for an example of image fallback support.

The syntax inside <source> elements is the same as when using srcset and sizes in a regular <img>.

Art direction

Media conditions specified in <picture> <source>s must be obeyed, this means it's safe to use <picture> for art direction. This includes using images of different intended sizes and aspect ratios in different <source>s.

(Note this is in contrast to srcset values which are only suggestions and the browser may not always use as specified.)

Match order

The first matching <source> element in <picture> wins. This means order is important depending on how you write your media conditions.

Fallback

The final entry in <picture> is an <img>. If none of the <source> elements match, or if the browser doesn't support <picture>, then this fallback <img> is used.

Lazy loading

You can lazy load a <picture> by simply adding the normal loading="lazy" attribute to the fallback <img> element.

Worked examples

Worked example for mobile - iPhone 11

1. Work out the entry from the <picture> <source>s that matches:
   1. The width of an iPhone 11 in portrait orientation is 414 CSS pixels.
   2. Going down the <source>s list from the top, none of the conditions match.
   3. So use the fallback <img>.
2. Work out the entry from sizes that matches:
   1. The width of an iPhone 11 in CSS pixels is 414.
   2. Sizes specifies that on mobile the image with take up 80% of the viewport width. This is equal to 484 * 80% = 331 CSS pixels for the source size value.
3. Work out that entry from srcset that matches:
   1. First work out what the desired image size in device pixels. We do this by multiplying the source size value we just worked out by the device's pixel density, which for iPhone 11 is 2. In this case that's 331px (CSS pixels) * 2 (pixel density) = 662px (device pixels).
   2. The srcset attribute is then consulted to find the closest matching image. In this case there is a width descriptor of 1200w which is the smallest image which fits the size. This results in the corresponding 1200x1200.png image being chosen.

Worked example for desktop - Windows + Chrome

1. Work out the entry from the <picture> <source>s that matches:
   1. The width of the Chrome window on this desktop is 1000 CSS pixels.
   2. Going down the <source>s list from the top the first one matches, so we'll use that.
2. Work out the entry from sizes that matches:
   1. The width of the Chrome window on this desktop is 1000 CSS pixels.
   2. Sizes specifies that on mobile the image with take up 50% of the viewport width. This is equal to 1000 * 80% = 500 CSS pixels for the source size value.
3. Work out that entry from srcset that matches:
   1. First work out what the desired image size in device pixels. We do this by multiplying the source size value we just worked out by the device's pixel density, which for this machine is 1. In this case that means that CSS pixels equals the device pixels, so 500 device pixels.
   2. The srcset attribute is then consulted to find the closest matching image. In this case there is a width descriptor of 600w which is the smallest image which fits the size. This results in the corresponding 600x300.png image being chosen.