Responsive image without sizes

perf/image-sizeswarningperformancelighthouse

Why it matters

Without sizes, a fill image's srcset assumes 100vw and a stretched fixed-width image only offers 1x/2x files: phones download desktop-sized images.

Fix

Add sizes describing the rendered width, e.g. sizes="(min-width: 768px) 50vw, 100vw".

Credit

  • From the Next.js team

    The sizes prop tells next/image which srcset width to pick; without it the browser assumes full-viewport width.

  • From Google Chrome

    Lighthouse's properly-size-images audit flags images larger than they are displayed.

References

See it

Image sizes and priority
Image dimensions and sizes