Skip to main content

Responsive Images in HTML

Making images responsive is essential to ensure your website looks great and loads fast on different devices and screen sizes. In this tutorial, we will discuss how to create responsive images using the srcset and sizes attributes in HTML.

The srcset Attribute​

The srcset attribute allows you to define multiple image sources for a single <img> element. The browser will choose the most appropriate image based on the user's screen size and resolution.

Here's an example of using the srcset attribute:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Images Example - srcset</title>
  </head>
  <body>
    <img
      src="image-small.jpg"
      srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
      alt="Sample image"
    />
  </body>
</html>

In this example, we have defined three different image sources with different widths using the srcset attribute. The 480w, 768w, and 1200w values indicate the widths of the respective images. The browser will choose the most appropriate image based on the user's screen size.

The sizes Attribute​

The sizes attribute works in conjunction with srcset to tell the browser how the image will be displayed on different screen sizes. It allows you to define a set of media conditions and corresponding image widths.

Here's an example of using the sizes attribute:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Images Example - sizes</title>
  </head>
  <body>
    <img
      src="image-small.jpg"
      srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
      sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 25vw"
      alt="Sample image"
    />
  </body>
</html>

In this example, we have added the sizes attribute to the <img> element. The sizes attribute defines three media conditions:

  1. If the screen width is 480px or less, the image will take up 100% of the viewport width (100vw).
  2. If the screen width is between 481px and 768px, the image will take up 50% of the viewport width (50vw).
  3. For screens wider than 768px, the image will take up 25% of the viewport width (25vw).

The browser will use these media conditions in combination with the srcset attribute to choose the most appropriate image and display it at the correct size.

The <picture> Element​

Another approach to create responsive images is using the <picture> element along with the <source> element. This method allows you to provide multiple image sources and media conditions directly in the HTML.

Here's an example using the <picture> element:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Responsive Images Example - picture</title>
  </head>
  <body>
    <picture>
      <source media="(max-width: 480px)" srcset="image-small.jpg" />
      <source media="(max-width: 768px)" srcset="image-medium.jpg" />
      <img src="image-large.jpg" alt="Sample image" />
    </picture>
  </body>
</html>

In this example, we use the <picture> element to wrap around <source> elements and an <img> element. The <source> elements define the media conditions and the corresponding image sources:

  1. If the screen width is 480px or less, the browser will use image-small.jpg.
  2. If the screen width is between 481px and 768px, the browser will use image-medium.jpg.

If none of the media conditions match or the browser does not support the <picture> element, it will use the default image specified in the <img> element (image-large.jpg).

Conclusion​

By using the srcset, sizes, and <picture> elements, you can create responsive images in HTML that adapt to different screen sizes and resolutions, ensuring that your website looks great on all devices.