Image dimensions and sizes

Reserve each image's box, set accurate sizes, pick quality per use.

From nextjs-pagespeed.

Reserve the box first

Replay, then click Continue reading before the photo lands.

No width or heightBad

Quarterly report

Q3 closed two days early

Receivables fell 18% after the new dunning schedule. The team closed on day three, two days ahead of plan.

<img src="/q3.jpg" alt="">
Text moved–
Layout shift–
Your click–
width + heightGood

Quarterly report

Q3 closed two days early

Receivables fell 18% after the new dunning schedule. The team closed on day three, two days ahead of plan.

<img src="/q3.jpg" width="1200" height="675" alt="">
Text moved–
Layout shift–
Your click–
<Image src={q3} width={1200} height={675} alt="" sizes="(min-width: 768px) 50vw, 100vw" />

<div className="relative aspect-video">
  <Image src={url} fill alt="" sizes="(min-width: 768px) 50vw, 100vw" className="object-cover" />
</div>

sizes: say how wide it renders

Drag the viewport and change the pixel ratio.

srcset, no sizesBad
Browser assumes
–
Actually renders
–
Picks
–
Decoded / shown
–
6 cards
–
srcset="… 320w, … 640w, … 1280w, … 2560w"
srcset + sizesGood
Browser assumes
–
Actually renders
–
Picks
–
Decoded / shown
–
6 cards
–
sizes="(min-width: 768px) 33vw, 100vw"

Your browser, right now

Candidate chosen without sizes
No sizes: –
Candidate chosen with sizes
sizes set: –

–

<Image
  src={card.image}
  width={1280}
  height={800}
  alt={card.title}
  sizes="(min-width: 768px) 33vw, 100vw"
/>

Quality: choose it per use

Move each slider; your browser encodes every image live.

–
Thumbnail, 200 pxq=75
Thumbnail at actual display size
Actual size
3× crop
–
Hero, 1200 pxq=75
Hero image, scaled to fit
Scaled to fit
3× crop
– 
images: { qualities: [50, 75, 80] }

<Image src={avatar} width={200} height={200} sizes="200px" quality={50} alt="" />
<Image src={hero} fill sizes="100vw" quality={80} priority alt="" />

Why it matters, pros and cons

Why it matters

Without an aspect ratio the browser reserves nothing, so content jumps.

Pros

  • No image layout shift or mis-clicks.
  • Accurate sizes cuts grid bytes severalfold.
  • Low thumbnail quality costs nothing visible.

Cons

  • A stale sizes blurs or bloats images.
  • Unknown aspect ratios need fill, which may crop.
  • Each quality value adds optimizer cache entries.