Srcset: what it is and how to use it

What is Srcset

Srcset is an HTML attribute of the <img> tag that lets you specify multiple versions of an image in different sizes. The browser automatically selects the most suitable image based on the viewport width, screen pixel density, and network speed.

Srcset is a key tool for responsive images that prevents large images from being loaded on mobile devices.

Srcset syntax

Pixel Density Descriptor (x)

For Retina/HiDPI screens:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Логотип"
/>

• 1x — standard screens
• 2x — Retina displays (Mac, iPhone)
• 3x — high-density screens (some Android devices)

Width Descriptor (w)

For images with different widths:

<img
  src="hero.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 1024px) 50vw,
         1200px"
  alt="Hero image"
/>

The sizes attribute

sizes is required when using the w descriptor. It tells the browser how much width the image will occupy in the viewport:

sizes="
  (max-width: 480px) 100vw,    /* на мобильных — 100% ширины viewport */
  (max-width: 1024px) 50vw,    /* на планшетах — 50% ширины viewport */
  800px                         /* на десктопе — 800px */
"

Without sizes, the browser assumes 100vw, which results in images that are too large being loaded.

Example with WebP and a fallback

<picture>
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="Описание фото"
    width="800"
    height="600"
  />
</picture>

How the browser chooses an image

1. Gets the list of images in srcset
2. Checks the current viewport width
3. Checks the device's pixel density (window.devicePixelRatio)
4. Applies the rules from sizes
5. Takes connection speed into account (in Chrome)
6. Selects the most suitable image

Next.js Image component

Next.js automatically generates srcset:

import Image from 'next/image';

<Image
  src="/photo.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Photo"
/>
// Автоматически создаст srcset с несколькими размерами

Check images with reChecker

Use Image check to analyze images on your website. The tool will show:

• Images without srcset for responsive display
• Images without the sizes attribute
• Image sizes and formats
• Optimization recommendations

FAQ

Does srcset work without sizes? With the w descriptor, the browser assumes sizes="100vw", which is usually not optimal. With the x descriptor, sizes is not needed.

Do I need to generate all image sizes manually? For production, use automated processing tools: Next.js Image, imgix, Cloudinary, Thumbor. They generate the required sizes dynamically.

Does the browser cache the selected image? Yes. After selecting and loading an image, the browser caches it. On a return visit, it is retrieved from the cache.