Responsive Images With srcset and sizes: Faster Pages on Every Screen

A 2000-pixel hero image looks great on a large monitor but wastes data and time on a phone. Responsive images with srcset let the browser choose the most suitable image size for each screen, making pages faster without hurting quality.

The problem

<img src="hero-2000.jpg" alt="...">

Every device downloads the 2000 px image, even a 360 px wide phone.

Solution 1: srcset with widths + sizes

<img
  src="hero-1200.webp"
  srcset="hero-480.webp 480w, hero-800.webp 800w, hero-1200.webp 1200w, hero-2000.webp 2000w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1200" height="675"
  alt="Team discussing a website design">

• srcset lists available files and their actual widths (480w)
• sizes tells the browser how wide the image will be displayed:
• on screens up to 768 px: full viewport width (100vw)
• otherwise: half the viewport (50vw)
• The browser picks the best file, considering screen density (retina) too

Solution 2: density descriptors for fixed-size images

For logos and icons displayed at a fixed size:

<img src="logo-160.png" srcset="logo-160.png 1x, logo-320.png 2x" width="160" height="46" alt="Company logo">

Solution 3: picture element for formats

Serve AVIF/WebP to supporting browsers with a fallback:

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
  <img src="hero-1600.jpg" width="1600" height="900" alt="..." fetchpriority="high">
</picture>

You can also use <picture> for art direction: a tighter crop for mobile.

Always set width and height

Even with responsive images, include width and height (or CSS aspect-ratio) so the browser reserves space and avoids layout shift. See Core Web Vitals.

Hero vs below-the-fold images

• Hero image: fetchpriority="high", not lazy-loaded
• Images further down: loading="lazy" See lazy loading done right.

Generating the sizes

• WordPress creates multiple sizes automatically and adds srcset
• Shopify image CDN can resize on the fly
• Custom sites: generate sizes during upload with PHP (GD/Imagick) or a build tool, or use an image CDN

Checklist

• [ ] 3–4 widths for large images (e.g. 480, 800, 1200, 1600/2000)
• [ ] WebP (and optionally AVIF) versions
• [ ] Correct sizes that match your CSS layout
• [ ] Width/height on every image
• [ ] Descriptive alt text. See image SEO

FAQs

Does srcset help SEO?

Indirectly. Faster pages improve user experience and Core Web Vitals.

What if I get sizes wrong?

The browser may download a larger image than needed. Test in DevTools Network tab at different widths.

Image optimisation is built into every Joboo Web website. Ask for a speed check.