`<picture>` - responsive images

The <picture> element is a powerful tool introduced in HTML5 specifically for responsive image handling. It allows developers to provide the optimal image resource based on different device conditions (such as screen resolution, viewport width, etc.), thereby improving performance and user experience.

Basic Structure of <picture>

<picture> is a container element that can include multiple <source> elements and one <img> element. The browser checks the conditions of the <source> elements in order and selects the first matching source. If no sources match, it falls back to the <img> element.

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <img src="small.jpg" alt="Example image">
</picture>

In this example, the browser will load large.jpg, medium.jpg, or small.jpg based on the viewport width.

Attributes and Usage of <source>

The <source> element has several key attributes:

1. srcset: Specifies the image URL or a set of candidate images (with width descriptors).
2. media: Defines media query conditions to match device characteristics.
3. type: Specifies the MIME type of the image, useful for supporting modern formats (e.g., WebP).

Example: Switching Images Based on Resolution

<picture>
  <source srcset="high-res.webp" type="image/webp">
  <source srcset="high-res.jpg" type="image/jpeg">
  <img src="fallback.jpg" alt="High-resolution image">
</picture>

Here, the browser will prioritize loading the WebP format (if supported) and fall back to JPEG otherwise.

Combining srcset and sizes for Finer Control

<picture> can be used with the srcset and sizes attributes for further optimization:

<picture>
  <source 
    srcset="large.webp 1200w, medium.webp 800w, small.webp 400w"
    sizes="(min-width: 1000px) 50vw, 100vw"
    type="image/webp">
  <source 
    srcset="large.jpg 1200w, medium.jpg 800w, small.jpg 400w"
    sizes="(min-width: 1000px) 50vw, 100vw">
  <img src="fallback.jpg" alt="Responsive image">
</picture>

• 1200w in srcset indicates the image width is 1200 pixels.
• sizes defines the display width of the image under different viewports.

Practical Use Cases

1. Art Direction

Display differently cropped versions of an image based on device screen size:

<picture>
  <source media="(min-width: 768px)" srcset="landscape.jpg">
  <source media="(max-width: 767px)" srcset="portrait.jpg">
  <img src="default.jpg" alt="Art direction example">
</picture>

2. Supporting Modern Image Formats

Prioritize WebP or AVIF formats with fallbacks to traditional formats:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Modern format example">
</picture>

Considerations

1. Mandatory <img> Element: <picture> must include an <img> as a fallback.
2. Performance Optimization: Avoid overusing high-resolution images and set srcset and sizes appropriately.
3. Browser Compatibility: Modern browsers generally support <picture>, but older browsers will load the <img> directly.

Advanced Usage: Dynamic Loading with JavaScript

You can dynamically modify <picture> content using JavaScript:

<picture id="dynamic-pic">
  <img src="placeholder.jpg" alt="Dynamic image">
</picture>

<script>
  const picture = document.getElementById('dynamic-pic');
  const newSource = document.createElement('source');
  newSource.srcset = 'new-image.webp';
  newSource.type = 'image/webp';
  picture.prepend(newSource);
</script>

Comparison with Other Responsive Techniques

• CSS Background Images: Suitable for decorative images but lack semantic and SEO benefits.
• <img> with srcset: Useful for simple scenarios but cannot achieve art direction or format switching.