Responsive Images in the High‑DPR Era and CSS image-set 2025

Beauty vs bytes: the optimum point is determined by srcset/sizes and CSS image-set().

TL;DR

• Fixed‑width elements: prefer x‑descriptor (1x/2x); fluid layouts: w‑descriptor + sizes

• Background images behind text: switch per DPR using CSS image-set()

• Cap bitmap resolution to avoid over‑transfer even on high device pixel ratio screens

• Handle LCP candidates separately with fetchpriority="high"

• Internal links: Srcset Generator tool, INP‑friendly delivery, Image priority & preload

Quick chooser

• Fixed card/thumbnail: srcset="… 1x, … 2x"
• Hero/fluid layout: srcset="… 800w, … 1200w" + sizes
• CSS background: background-image: image-set(url(...@1x.avif) 1x, url(...@2x.avif) 2x)

Examples

<img
  src="/imgs/card@1x.avif"
  srcset="/imgs/card@1x.avif 1x, /imgs/card@2x.avif 2x"
  width="320" height="200" alt="Card"
  decoding="async" loading="lazy"
/>

<!-- Fluid layout: w + sizes -->
<img
  src="/imgs/hero-1200.avif"
  srcset="/imgs/hero-800.avif 800w, /imgs/hero-1200.avif 1200w, /imgs/hero-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630" fetchpriority="high"
  alt="Hero"
/>

.hero {
  background-image: image-set(
    url('/imgs/cover@1x.avif') 1x,
    url('/imgs/cover@2x.avif') 2x
  );
  background-size: cover;
}

Frequent mistakes

• Always using sizes: 100vw → selects larger images than needed, wasting bandwidth
• Keeping 2x bitrate same as 1x → doubles file size; manage quality via PSNR/SSIM
• No 1x/2x prep for CSS backgrounds → blurry text or heavy payloads

Ops tips

• Generate @1x/@2x and w steps in CI
• Centralize image-set() definitions as theme variables for reuse
• Tune LCP candidates separately (priority/preload)

Checklist

• [ ] Apply the rule: x for fixed, w+sizes for fluid
• [ ] Use CSS image-set() for high‑DPR care
• [ ] Set fetchpriority for LCP candidates
• [ ] Monitor wasteful transfer and blurriness together

Summary

To satisfy both “appearance” and “bytes” across devices, keep srcset/sizes/image-set() in your toolbox.