Performance
What image format should I use on my website?
AVIF first, WebP as a fallback, JPEG or PNG last, delivered through a picture element. SVG for logos, icons and line art. Getting the size right for each viewport saves more than the format choice, so do both.
The formats and where each belongs
| Format | Use for | Note |
|---|---|---|
| AVIF | Photographs | 30–50% smaller than WebP, slower to encode |
| WebP | Photographs, fallback | 25–35% smaller than JPEG, universally supported |
| JPEG | Final fallback | Universally supported |
| PNG | Images needing transparency without WebP | Large; usually avoidable |
| SVG | Logos, icons, line art | Scales infinitely, tiny, no variants needed |
The bigger saving
Sizing. Serving a 2000-pixel image to a 390-pixel phone wastes more than any format choice recovers. Generate several widths and let srcset and sizes pick.
The two attributes that must always be there
Width and height, or an aspect-ratio in CSS. Without them the page reflows as images arrive, which is measured directly as Cumulative Layout Shift.
The longer version
This answer is deliberately short. If you want the full treatment, Image SEO: findable images that do not wreck your page speed covers it in about 3 minutes — free, ungated, written from client work.
Who answered this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan — fifteen live client sites, six of them stores taking real payments. These answers come from those projects rather than from a content brief. More about how I work, or ask me something directly.