Why the <picture> Tag Beats <img> for Responsive Images

Using images and animations in user interfaces is common, but if they are not responsive across devices they can degrade user experience. Choosing the right HTML element—especially between img and picture —can significantly improve performance and UX.

Why the img tag is no longer enough

The img element has been a core HTML tag for years due to its simplicity, yet the rise of diverse screen sizes and resolutions exposes its shortcomings in responsive scenarios.

As devices with varying dimensions and complex user needs proliferate, the responsiveness of img is increasingly questioned.

The two main challenges are:

Resolution switching – providing smaller images for small‑screen devices.

Image switching – serving entirely different images for different screen contexts.

Resolution switching with srcset and sizes

Using srcset and sizes inside a picture element lets the browser choose the appropriate image based on viewport width.

<picture>
  <source srcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w"
          sizes="(min-width: 1280px) 1200px, (min-width: 768px) 400px, 100vw">
  <img src="medium-car-image.jpg" alt="Car">
</picture>

The srcset list provides three image variants; the browser picks the one that best matches the current viewport. The sizes attribute tells the browser how much space the image will occupy.

Although modern img with srcset can handle resolution switching, the picture tag remains the most flexible solution when both resolution and image switching are needed.

Image switching with the media attribute

By adding multiple source elements with media queries, different images can be served for different device characteristics such as orientation or width.

<picture>
  <source media="(orientation: landscape)"
          srcset="land-small-car-image.jpg 200w, land-medium-car-image.jpg 600w, land-large-car-image.jpg 1000w"
          sizes="(min-width: 700px) 500px, (min-width: 600px) 400px, 100vw">
  <source media="(orientation: portrait)"
          srcset="port-small-car-image.jpg 700w, port-medium-car-image.jpg 1200w, port-large-car-image.jpg 1600w"
          sizes="(min-width: 768px) 700px, (min-width: 1024px) 600px, 500px">
  <img src="land-medium-car-image.jpg" alt="Car">
</picture>

If the screen is in landscape mode, the first set of images is used; otherwise the portrait set is selected. Media queries can also use max-width and min-width conditions for finer control.

<picture>
  <source media="(max-width: 767px)" ...>
  <source media="(min-width: 768px)" ...>
</picture>

A final img fallback ensures compatibility with browsers that do not support picture.

Supporting partially supported image formats

New formats such as WebP, AVIF, and SVG offer better compression and quality, but not all browsers support them. The picture element can list multiple source tags with a type attribute, falling back to a widely supported format.

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

The browser tries AVIF first, then WebP, and finally PNG if the earlier formats are unsupported. Chrome DevTools (from version 88) now includes rendering emulations to test image‑type compatibility.

Conclusion

While the img tag remains valid and useful—especially with srcset and sizes for resolution switching—the picture element provides a more powerful, declarative way to handle both resolution and image switching, as well as format fallbacks. Choose the element that best fits your project’s requirements.

Thank you for reading!