perf/large-image

Why

Images are usually the heaviest part of a page and often its Largest Contentful Paint element. A multi-megabyte photo costs mobile users time and data. The 250 KB budget is this tool's default, not a number from a standard; set audit.budgets.imageKB in the profile to change it.

Fix

Resize the image to the largest size it is displayed at (and provide smaller ones with srcset), and encode it as AVIF or WebP at a sensible quality. Framework image components and build plugins can do both at build time.

Examples

bad:  public/hero.png   2.4 MB, 4000×3000, shown at 1200×900
good: public/hero.avif  140 KB, 1200×900, with 600w and 900w variants in srcset

Sources

• web.dev, Choose the right image format
• Chrome for Developers, Efficiently encode images

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/large-image