How to optimize images for a faster website

On many pages, images make up a large share of everything a visitor downloads. That makes them the most rewarding place to start when a site feels slow. The good news is that most of the work is routine: serve images at the size they are shown, in a modern format, at sensible quality, and tell the browser how to load them.

Why images affect speed scores

Google measures page experience with a set of metrics called Core Web Vitals. Three of them are central:

• Largest Contentful Paint (LCP): how long it takes for the largest visible element to appear. Google considers 2.5 seconds or less good. On many pages, that element is an image, such as a hero photo or product picture.
• Cumulative Layout Shift (CLS): how much content jumps around while loading. A score of 0.1 or less is considered good. Images without reserved space are a classic cause of layout shifts.
• Interaction to Next Paint (INP): how quickly the page responds to input. Images affect it less directly, but heavy pages keep the device busy.

You can measure all three with Google's PageSpeed Insights or the Lighthouse panel in Chrome's developer tools.

Step 1: serve the right dimensions

The most common waste is a photo straight from a camera, 4000 pixels wide, displayed in a column 800 pixels wide. The browser downloads every pixel and then throws most of them away.

Find the largest size at which each image is actually displayed. Then account for high-density screens, which use two or more device pixels per CSS pixel. A reasonable target is about twice the displayed width: an image shown at 800 pixels wide looks sharp on most screens at 1600 pixels.

Because phones need smaller images than desktops, offer several sizes and let the browser choose with srcset and sizes. For example, on an img tag:

• srcset="photo-800.webp 800w, photo-1600.webp 1600w" lists the available files and their widths.
• sizes="(max-width: 800px) 100vw, 800px" tells the browser how wide the image will be displayed.

The browser then downloads only the file it needs. To create the variants, the bulk image compressor can process a whole set at a chosen maximum width (such as 800 or 1600 px) and add a filename suffix like -800. Run it once per size. For single images, the image resizer gives exact control.

Step 2: use a modern format

WebP and AVIF produce much smaller files than JPG and PNG at similar visible quality, and all current major browsers display both. WebP is fast to create and widely supported by other software; AVIF usually gives even smaller files but takes longer to encode.

Convert with the WebP converter or the AVIF converter. If you want to serve AVIF with fallbacks, the <picture> element lets the browser pick the first format it supports. The WebP vs AVIF guide walks through it.

For logos and icons, an SVG file is usually the lightest and sharpest option. For screenshots and illustrations that must stay PNG, the PNG compressor reduces colors and often shrinks files considerably.

Step 3: choose a sensible quality

For photos, a quality setting between about 70 and 85 is the usual sweet spot for JPG and WebP. Above that, files grow quickly for differences few visitors notice. Below it, artifacts start to show in skies, gradients and around edges.

Quality scales are not identical between formats and programs, so test with your own images. The image comparison tool shows the original and the compressed version side by side or with a slider, so you can find the lowest setting that still looks right.

Step 4: load images lazily, except the important one

Adding loading="lazy" to an image tells the browser to wait until the user scrolls near it. This saves data and frees the network for what is visible first. Use it for images further down the page.

Do not lazy-load the main image at the top of the page. If it is your LCP element, delaying it makes the score worse. For that image, you can add fetchpriority="high" to ask the browser to fetch it early; browsers that do not support the attribute simply ignore it.

Step 5: always set width and height

When an img tag has width and height attributes, the browser can reserve the right amount of space before the image arrives. Without them, the text jumps down once the image loads, which counts against CLS.

This does not stop images from being responsive. Set the attributes to the image's real pixel dimensions and use CSS such as max-width: 100% and height: auto. The browser uses the attributes to calculate the aspect ratio and scales the image to fit the layout.

Step 6: remove what visitors do not need

Camera photos carry metadata such as camera details, dates and sometimes GPS coordinates. It adds bytes and can reveal private information. The remove EXIF tool strips it, and for JPG files it does so without re-compressing the image.

Avoid embedding large images as Base64 inside HTML or CSS. Base64 text is about 33 percent larger than the file it encodes and cannot be cached separately. The Base64 converter is useful for tiny icons, not for photos. Large animated GIFs are also very heavy; a short video file or an animated WebP is usually far lighter.

Step 7: cache and serve efficiently

Images rarely change, so let browsers keep them. Long cache lifetimes combined with versioned filenames (for example hero-v2.webp) mean returning visitors do not download images again, and updates still reach them. A content delivery network can serve images from locations closer to your visitors.

A quick checklist

1. Each image is no wider than about twice its largest display width.
2. Responsive images use srcset and sizes where layouts change between devices.
3. Photos are WebP or AVIF, with a fallback where needed.
4. Quality is set between about 70 and 85 and checked visually.
5. Logos and icons are SVG or well-compressed PNG.
6. Every img has width, height and meaningful alt text.
7. Images below the fold use loading="lazy"; the main image does not.
8. Metadata has been removed from published photos.
9. Images are cached with versioned filenames.
10. You have measured the result with PageSpeed Insights or Lighthouse.

All the tools mentioned here run in your browser, so you can prepare images for a site without uploading them to a third-party service. More background is on the WebP, AVIF and SVG format pages.