Unlock the Power of Responsive Images in HTML

The Standard Image Syntax

To add responsive images in HTML, you start with the standard image syntax, consisting of the <img> element and the src and alt attributes. This ensures backward compatibility and provides a foundation for building responsive image syntax.

<img src="image.jpg" alt="Image description">

The Srcset Attribute

The srcset attribute is an optional attribute of image-related HTML elements, including the <img> tag. It allows you to assign different image sources to certain features of the user’s device, such as viewport size or pixel density. The browser will only load the image that’s most suitable for the user’s device, resulting in a significant performance gain.

<img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-640w.jpg 640w"
     src="image.jpg" alt="Image description">

X Descriptors and W Descriptors

There are two ways to serve different size images with the srcset attribute: using x descriptors and using w descriptors and the sizes attribute.

• • X descriptors specify different image sources based on pixel density:

<img srcset="image.jpg 1x, image-2x.jpg 2x" src="image.jpg" alt="Image description">

• • W descriptors specify different image sources based on the width of the images:

<img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-640w.jpg 640w"
     sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 640px"
     src="image.jpg" alt="Image description">

The browser considers both pixel density and layout dimensions when selecting an image.

The Picture and Source Elements

Sometimes, you’ll want to load visually different images for different user agents. HTML has two elements for these situations: <picture> and <source>.

<picture>
  <source media="(max-width: 480px)" srcset="image-small.jpg">
  <source media="(min-width: 481px) and (max-width: 640px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="Image description">
</picture>

The <picture> element allows you to define different image sources for different media conditions, while the <source> element specifies different media resources for the <picture>, <audio>, and <video> elements.

Image Sources with Different Art Directions

You can define different image sources with different art directions using the <picture> and <source> elements. For example, you can serve a zoomed-in and zoomed-out version of the same image for different media conditions.

<picture>
  <source media="(max-width: 480px)" srcset="image-small-zoomed-in.jpg">
  <source media="(min-width: 481px) and (max-width: 640px)" srcset="image-medium-zoomed-out.jpg">
  <img src="image-large.jpg" alt="Image description">
</picture>

Image Sources in Different Formats

You can also serve an image in different formats, such as AVIF or WebP, which are smaller in size and can improve performance. You’ll need to define the MIME type of each image source using the type attribute.

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Image description">
</picture>

Browser Support

Browser support for the HTML syntax related to responsive images is relatively good, with most modern browsers supporting the srcset and sizes attributes, as well as the <picture> and <source> elements.

By using these HTML elements and attributes, you can serve different image sources based on various conditions, resulting in a huge performance gain, especially on mobile devices. Don’t forget to use CSS to adapt the image added by HTML to the design.