Images are usually the heaviest thing on a web page and the easiest thing to fix. The whole discipline comes down to three decisions: which format, what dimensions, and how much compression. Get those right and most sites lose half their page weight.
Use AVIF or WebP for photographs, SVG for logos and icons, and serve images at no more than twice their display size. Aim to keep any single image under 200 KB and most under 100 KB. Set explicit width and height, lazy load everything below the fold, and never lazy load the hero image.
Choosing a format
| Format | Use for | Notes |
|---|---|---|
| AVIF | Photographs | Smallest files, excellent quality, broad modern support |
| WebP | Photographs, fallback | Roughly 25 to 35 percent smaller than JPEG, supported everywhere that matters |
| JPEG | Legacy fallback | Still fine, simply larger than the alternatives |
| PNG | Images needing transparency | Large. Use only when transparency is required and SVG will not do |
| SVG | Logos, icons, simple illustration | Scales to any size, tiny, editable in code |
For most business sites the answer is AVIF with a WebP fallback for photographs, and SVG for everything vector.
Getting the dimensions right
The most common mistake is uploading a 4000 pixel wide photograph and letting CSS shrink it. The browser still downloads all four thousand pixels.
- Work out the largest size the image is ever displayed at.
- Export at roughly twice that for high density screens, and no more.
- Provide several sizes with srcset so phones download a phone-sized file.
- A full width hero rarely needs to exceed 1920 pixels wide.
How much compression is too much
For JPEG and WebP, quality around 75 to 80 is the sweet spot. Below 60 you start seeing artefacts in flat areas like skies. Above 85 you are adding file size nobody can see.
Test on the actual image rather than trusting a number. Photographs with fine texture tolerate more compression than illustrations with flat colour and hard edges.
Loading behaviour
- Set width and height attributes on every image so the browser reserves space and the layout does not shift.
- Add loading="lazy" to images below the fold.
- Never lazy load your hero. It is usually the Largest Contentful Paint element and lazy loading it makes that metric worse.
- Consider preloading the hero image so it starts downloading immediately.
- Use fetchpriority="high" on the hero to push it ahead of other requests.
Tools worth using
Squoosh for one-off manual work and for seeing the quality trade-off visually. Sharp or ImageMagick for automated pipelines. Most modern hosting and CDNs will convert and resize on the fly, which is usually the least effort option if it is available to you.
Whatever you choose, the important thing is that it runs automatically. Optimisation that depends on someone remembering to do it before every upload stops happening within a month.
Frequently asked questions
What size should website images be?
No more than twice their maximum display size, and ideally under 200 KB each. A full width hero rarely needs more than 1920 pixels wide. Thumbnails and inline images are usually well under 800 pixels.
Is WebP better than JPEG?
Yes, by roughly 25 to 35 percent smaller at equivalent quality, with support in every browser that matters. AVIF is smaller still. There is no practical reason to serve JPEG as your primary format in 2026.
Should I use PNG or SVG for my logo?
SVG, in almost every case. It scales to any size without losing quality, the file is usually a fraction of the size, and you can change its colour in CSS. Use PNG only where SVG is not accepted, such as some email clients.
Does image optimisation help SEO?
Indirectly. It improves Largest Contentful Paint, which is a Core Web Vitals metric and part of page experience. The larger benefit is that faster pages lose fewer visitors, which affects conversion more than it affects rankings.
What is lazy loading and should I use it?
Lazy loading defers downloading an image until it is about to enter view. Use it for everything below the fold. Do not use it on your hero image, since delaying the largest visible element directly worsens your LCP score.