Responsive Images with srcset, sizes and picture

Responsive images let the browser download the right image size for each screen. In this lesson you will learn srcset, sizes and the <picture> element for modern formats, art direction and faster loading.

Why do we need responsive images?

A large photo for a big desktop screen might be 2400 pixels wide and 500 KB. A phone with a small screen only needs about 800 pixels. If the phone downloads the big file, the page is slower and uses more mobile data for no reason. Responsive images let you offer several sizes of the same image, and the browser picks the best one. It's like a coffee shop offering small, medium and large cups instead of filling one huge cup for everyone.

srcset with w descriptors and sizes

The srcset attribute lists the image files and their real widths. The number with a w is the width of the file in pixels (a width descriptor). The sizes attribute tells the browser how wide the image will be shown on the page.

<img
  src="/images/mountain-800.jpg"
  srcset="/images/mountain-400.jpg 400w,
          /images/mountain-800.jpg 800w,
          /images/mountain-1600.jpg 1600w,
          /images/mountain-2400.jpg 2400w"
  sizes="(min-width: 1200px) 1100px, (min-width: 700px) 90vw, 100vw"
  alt="Snowy mountain peak at sunrise"
  width="2400" height="1600">

Here is what happens. The sizes value says: "On screens at least 1200px wide, the image is 1100px wide. On screens at least 700px wide, it is 90% of the screen width (90vw). Otherwise it fills the whole width (100vw)." The browser checks the screen, works out the size it needs, also considers the screen's pixel density, and downloads only one matching file. A phone may get the 800 version, and a large high-resolution laptop the 2400 version. The src is a fallback for very old browsers.

Tip: Always add width and height with the image's real size (or at least its correct ratio). The browser then reserves the right space before the image loads, so the text does not jump down. This jumping is called layout shift.

For a small image with a fixed size, like a 200px logo, use x descriptors instead: srcset="logo.png 1x, logo@2x.png 2x". The 2x file is for high-resolution screens.

The picture element for AVIF and WebP

AVIF and WebP are modern image formats. They are often 30–50% smaller than JPEG at the same quality. In 2026 all major browsers support both, but <picture> lets you offer the best format with a safe fallback.

<picture>
  <source type="image/avif" srcset="/images/team-800.avif 800w, /images/team-1600.avif 1600w" sizes="(min-width: 900px) 50vw, 100vw">
  <source type="image/webp" srcset="/images/team-800.webp 800w, /images/team-1600.webp 1600w" sizes="(min-width: 900px) 50vw, 100vw">
  <img src="/images/team-800.jpg" srcset="/images/team-800.jpg 800w, /images/team-1600.jpg 1600w" sizes="(min-width: 900px) 50vw, 100vw" alt="Our team of five smiling in the office kitchen" width="1600" height="1067">
</picture>

The browser reads the <source> elements from top to bottom and uses the first type it supports. Most browsers pick AVIF. Any browser that does not support it moves on to WebP, and finally to the JPEG in <img>. The <img> is required: it is the element that is actually shown, and it holds the alt, width and height.

Art direction: a different image on small screens

Sometimes you don't just want a smaller image, you want a different one. A wide landscape photo of a cyclist on a road becomes tiny on a phone. A tighter, taller crop works better. Choosing different crops for different screens is called art direction. You do it with the media attribute on <source>.

<picture>
  <source media="(min-width: 800px)" srcset="/images/cyclist-wide.webp" width="1600" height="700">
  <img src="/images/cyclist-tall.webp" alt="Cyclist riding up a mountain road" width="800" height="1000" fetchpriority="high">
</picture>

On screens at least 800px wide, the browser shows the wide photo. On smaller screens, it shows the tall crop from the <img>. Each <source> can have its own width and height because the shapes are different.

Note: Use media only for art direction. If it is the same picture at different sizes, use srcset and sizes, and let the browser choose.

Speed up the hero image with fetchpriority

The hero image is the big image at the top of a page. It is usually the largest thing visible when the page opens, so it decides how fast the page feels. Adding fetchpriority="high" to its <img> tells the browser "download this one first", as you can see in the example above. Use it on one or two images at most. If everything is high priority, nothing is.

Common mistake: Adding loading="lazy" to the hero image. Lazy loading delays the image, which makes the most important picture appear later. You'll learn when to use lazy loading in the next lesson.

Practice exercise

Take one large photo and create three sizes (for example 480, 960 and 1920 pixels wide) with a free tool like Squoosh. Save each as AVIF, WebP and JPEG. Write a <picture> element that offers all of them with a correct sizes value for an image that fills the full width on phones and half the width on screens wider than 1000px.

Hint: sizes="(min-width: 1000px) 50vw, 100vw". Open your browser's developer tools, Network tab, and resize the window to see which file loads.

Key takeaways

• Responsive images save data and make pages faster on small screens.
• srcset with w descriptors lists the files, and sizes says how wide the image is shown.
• <picture> with type sources offers AVIF and WebP with a JPEG fallback.
• <source media="..."> is for art direction: different crops for different screens.
• Add width and height to every image, and fetchpriority="high" to the hero image.