Responsive Images in HTML: srcset, sizes and the picture Element

A phone with a small screen does not need the same 2000-pixel-wide photo as a large desktop monitor. Responsive images let you offer several versions of an image so the browser can download the most suitable one. This makes pages faster without making images blurry.

There are two separate problems:

• Resolution switching: the same picture at different sizes. Use srcset and sizes.
• Art direction: a different crop or picture on different screens. Use <picture>.

Resolution switching with srcset and sizes#

This lesson uses three copies of the same picture. Each one has its file name written on it, so you can see which one your browser chose:

<img
  src="/lesson-assets/landscape-600.svg"
  srcset="/lesson-assets/landscape-300.svg 300w,
          /lesson-assets/landscape-600.svg 600w,
          /lesson-assets/landscape-1200.svg 1200w"
  sizes="(max-width: 500px) 100vw, 400px"
  alt="Green hills under a blue sky with a yellow sun"
  width="400" height="267"
  style="max-width: 100%; height: auto">

• srcset lists the available files with their real widths. 300w means "this file is 300 pixels wide".
• sizes tells the browser how wide the image will be displayed. Here: the full viewport width (100vw) on screens up to 500 pixels wide, otherwise 400 pixels.
• src is the fallback for browsers that do not support srcset.

The browser combines the display width with the screen's pixel density and picks the smallest file that is sharp enough. On a high-density phone screen it may pick a larger file than the display width suggests. Browsers are also allowed to consider network conditions and what is already cached, so the exact choice can vary. That is the point: you describe the options and the browser decides.

Density descriptors: 1x and 2x#

For images shown at a fixed size, such as a 200-pixel logo, describe pixel density instead of widths:

<img src="logo-200.png"
     srcset="logo-200.png 1x, logo-400.png 2x"
     alt="Laviyx Learn" width="200" height="60">

Screens with double-density pixels (common on phones and many laptops) get the 400-pixel file and stay crisp; others get the 200-pixel one.

Art direction with picture#

Sometimes a wide landscape photo is too small to understand on a phone, and a square crop works better. The <picture> element lets you choose a different image per screen size:

<picture>
  <source media="(max-width: 500px)" srcset="/lesson-assets/landscape-square.svg">
  <img src="/lesson-assets/landscape-600.svg" alt="Green hills under a blue sky with a yellow sun"
       width="600" height="400" style="max-width: 100%; height: auto">
</picture>

On a narrow screen (500 pixels or less) you see the square image; otherwise the wide one. To try it, open this page on a phone, or narrow your browser window and reload.

• <source> elements are checked in order; the first one whose media matches is used.
• The <img> inside is required. It is the fallback, and its alt, width and height apply whichever source is chosen.

Modern formats with fallbacks#

<picture> can also offer newer, smaller formats while keeping a fallback. The type attribute lets the browser skip formats it cannot display:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Our office in Hyderabad" width="1200" height="800">
</picture>

Which tool when?#

Practice#

<img
  src="team-960.jpg"
  srcset="team-480.jpg 480w, team-960.jpg 960w, team-1440.jpg 1440w"
  sizes="(max-width: 700px) 100vw, 640px"
  alt="The Laviyx Learn team at the annual meetup"
  width="960" height="640">

Key takeaway#