How to optimise images for the web: a 10-step checklist

Images are usually the heaviest part of a web page, and the hero image is very often the element Google times for Largest Contentful Paint (LCP), the Core Web Vital that measures how fast a page appears. Optimising them is the cheapest speed win most sites have. This is the checklist we use, in order of impact.

1. Resize to the size it’s displayed at

This is the biggest saving, and the one most often skipped. A photo straight from a phone is 4000 px wide; shown in an 800 px column, it carries about 25 times the pixels anyone sees. No amount of compression makes up for that.

Work out the largest size each image is shown at, double it for high-density (“retina”) screens, and resize to that. As a guide: around 2000 px wide for a full-width hero, 1200–1600 px for an image inside an article, and a few hundred pixels for thumbnails. Resize Image does this in the browser, one image or a batch.

2. Use a modern format: AVIF or WebP

At the same visual quality, WebP is typically 25–35% smaller than JPEG, and AVIF around half the size. Every current browser displays both. Use AVIF where you can and WebP as the fallback, or just WebP if you want one file per image. PNG is for screenshots and graphics that must stay pixel-exact; never use it for photos. Our guide to image formats compares them in detail.

3. Compress with a sensible quality setting

Quality settings aren’t comparable between formats, but good starting points are JPEG 75–82, WebP 75–80 and AVIF 50–60. Check the result at 100% zoom on the image’s busiest area. If you have a page-weight budget, a target-size compressor finds the highest quality that fits a number such as 150 KB.

4. Serve different sizes to different screens

A phone doesn’t need the 2000 px desktop image. With srcset and sizes, the browser picks the smallest file that will look sharp:

<img src="team-1200.webp"
     srcset="team-600.webp 600w, team-1200.webp 1200w, team-2000.webp 2000w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1200" height="800" alt="The team at the summer offsite">

sizes tells the browser how wide the image will be shown (here: full screen width on phones, 700 px otherwise), so it can choose before the layout is calculated.

5. Always set width and height

Without dimensions, the browser doesn’t know how much space to reserve, so the text jumps down when the image arrives. That shift is measured as Cumulative Layout Shift (CLS), another Core Web Vital. Set width and height attributes to the image’s real proportions, and keep height: auto in your CSS so it still scales.

6. Lazy-load images below the fold, and only those

Add loading="lazy" to images further down the page so they load as the visitor scrolls. Never lazy-load the hero or anything visible on first load: it delays the very image LCP is waiting for. This is one of the most common causes of a poor LCP score.

7. Prioritise the LCP image

Give the main image above the fold fetchpriority="high" so the browser fetches it before less important resources. If it’s a CSS background image, the browser only discovers it late; preload it, or better, make it an <img>.

<img src="hero.avif" fetchpriority="high" width="2000" height="1000" alt="…">

8. Strip metadata

Camera photos carry EXIF data: camera model, settings, sometimes GPS location. It adds a few kilobytes and can reveal where a photo was taken. Re-encoding an image in the browser drops it as a side effect, which is how our image tools work.

9. Cache images for a long time

Serve images with a long cache lifetime, such as Cache-Control: public, max-age=31536000, immutable, and give the file a new name when the image changes. Returning visitors then load them from disk. A CDN puts copies close to every visitor.

10. Write useful alt text and file names

Not a speed fix, but part of doing images properly. Alt text describes the image for screen-reader users and for Google Images (alt="" for purely decorative images). A descriptive file name, such as red-trail-running-shoes.webp rather than IMG_4031.webp, helps image search too.

How to check your results

Run your page through PageSpeed Insights. It reports LCP and CLS from real Chrome users (if your site has enough traffic) plus a lab test, and flags oversized images, missing dimensions and lazy-loaded LCP images by name. LCP of 2.5 seconds or less counts as good.

Don’t forget video: a background video is often heavier than all the images on a page combined. The video compressor gets a hero clip down to 1–3 MB.

Frequently asked questions

What is the best image size for a website?

The size it’s displayed at, doubled for high-density screens: about 2000 px wide for a full-width hero and 1200–1600 px for an image in an article. In file size, aim for under about 200 KB for large images and far less for small ones.

What is the best image format for websites?

AVIF for the smallest files, WebP as a fast, safe default. Both work in every current browser. Use PNG only for graphics that must stay pixel-exact.

Do images affect SEO?

Yes, in two ways. Heavy images slow pages down and hurt Core Web Vitals, which are part of Google’s page experience signals, and alt text and file names help images appear in Google Images.

Should I lazy-load all images?

No. Lazy-load only images below the fold. Lazy-loading the main image at the top delays your Largest Contentful Paint.

How do I reduce image size without losing quality?

Resize to the display size, then save as AVIF or WebP at a moderate quality. The pixels you remove were never visible at that size, and modern formats keep detail better per kilobyte.