Image Optimization
Serving images in a modern format, at display size, with dimensions set and loading matched to position.
Image optimisation is making pictures as small as they can be while still looking right: a modern format such as WebP or AVIF, dimensions matching how the image is displayed, compression tuned per image, and explicit width and height so nothing shifts as it loads. Images are usually the largest part of a page's weight.
Definition
Image optimization is the work of serving images at the smallest size that still looks right: a modern format, dimensions matched to the display size, compression tuned to the content, and loading behaviour matched to position on the page.
Images are usually the largest payload on a page and the most common Largest Contentful Paint element, so they are where performance work pays best.
Four things do nearly all of it: convert to WebP or AVIF, resize to the largest size actually displayed, add explicit width and height, and lazy-load everything below the fold while giving the LCP image fetchpriority="high" instead.
Why It Matters
It touches two Core Web Vitals at once. Oversized images delay LCP; images without declared dimensions cause layout shift and damage CLS. Both are fixed by the same pass.
The most common waste is a 3000-pixel-wide photograph displayed in a 400-pixel column — the browser downloads all of it and throws most of it away.
Example
A well-formed below-fold image:
<img src="/photo.webp" width="800" height="600"
loading="lazy" decoding="async"
alt="Audit report showing a 47/100 mobile score">The one above the fold is the exception: no loading="lazy", and add fetchpriority="high" so it is not queued behind other requests.
Related Terms
Related Tools
Know the term.
Check your own site.
A free audit tells you whether this is currently costing you score points — and exactly what to change.
Run a free audit