How to use Picture Tag for Responsive and Optimized Front End Design

How to use Picture Tag for Responsive and Optimized Front End Design

What is a picture tag and how to use it for Responsive Design

The HTML5 element <picture> tag is intended to provide more flexible and highly functional responsive image. Rather than loading a single image and adjusting it to match all potential viewport widths and layouts, the picture element loads multiple images of varying sizes and resolutions, selecting the best fit for various scenarios.

The picture tag can have "source" attributes and one img attribute to provide an alternative copy of a picture for various browsers and displays. The browser will evaluate each child's <source> element and select the best match from among them. If no matches are discovered, or if the browser does not support the <picture> element, the URL specified in the <img> element's src property is used. The selected picture is then shown in the <img> element's area.

Let's see an example

<picture>
  <source media="(min-width:769px)" srcset="img-medium.png">
  <source media="(min-width:465px)" srcset="img-small.png">
  <img src="img.jpg" alt="Flowers" style="width:auto;">
</picture>

srcset, media, and other basic characteristics of each <source> element in the picture tag are analyzed by the browser and find the best compatible picture for the current layout and capabilities of the display device. The picture tag helps us to select and choose the best-fit image for different device sizes and browser compatibility. It will help us save bandwidth and will speed up the page load times by loading these best-fit images for the viewer's display.

Attributes of Picture Tag

1. srcset

The srcset attribute is used to provide a list of potential pictures based on their size. It consists of a list of image descriptions separated by commas. Each image descriptor consists of

  • Image URL
  • Width Descriptor (such as 300w, 500w)
  • Pixel Density Descriptor (such as 1x, 2x) to deliver a high-resolution picture for high-DPI devices.
<picture>
  <source srcset="pic.png 768w, pic-1.5x.png 1.5x">
  <source srcset="pic-480.png 480w, pic-480-2x.png 2x">
  <img src="pic-320.png">
</picture>

2. Media

For each <source> the element that the user agent will examine, the media attribute specifies a media condition (similar to a media query). If the media condition of the <source> evaluates as false, the browser skips it and moves on to the next element within <picture>.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

3. Type

The type attribute specifies a MIME type (Multipurpose Internet Mail Extensions) for the resource URL(s) in the srcset attribute of the <source> element. The <source> element is skipped if the user agent does not support the specified type. This will help us to load an image with high quality and low size so that the loading speed of the image will be less.

<picture>
  <source srcset="pic.png" type="image/png">
  <source srcset="pic.avif" type="image/avif">
  <source srcset="pic.webp" type="image/webp">
  <img src="pic.jpg" alt="photo">
</picture>

Browser Compatibility

You can check in detail in caniuse

Browser support.PNG