Optimizing images for web page speed

On most websites, images are the heaviest thing on the page by a wide margin — bigger than the HTML, the CSS and the scripts combined. That weight is not abstract: it is the difference between a page that appears instantly and one that makes people wait, and it is very often the single biggest thing you can fix.

Why images decide how fast a page feels

The moment a visitor cares about is when the main content shows up. Google measures a version of this called Largest Contentful Paint, and on a typical page the largest element is an image — a hero photo, a product shot, a banner. If that image is slow to arrive, the page feels slow no matter how fast everything else is. Getting images right is usually the performance work that pays off most.

The biggest win is dimensions, not quality

People reach for the quality slider first, but the larger waste is almost always pixel dimensions. A photo straight from a phone might be 4000 pixels wide. Dropped into a layout column that is 800 pixels wide, the browser throws away three-quarters of that width — and because area scales with the square of the side, the discarded data is the overwhelming majority of the file. Halving an image's width cuts its pixel count to a quarter. Resize to the size it will actually display before you touch anything else.

Rough targets that cover most needs: around 1600–2000 pixels wide for a full-bleed hero on a large screen, 800–1200 for a normal in-article image, and 400 or less for a thumbnail. Serving a 4000-pixel image into any of those is paying for bytes nobody sees.

Choosing a format for the web

WEBP is the sensible default now. Browser support is effectively universal, and at the same visual quality it is meaningfully smaller than JPG. Keep JPG as the safe fallback for photographs when you need maximum compatibility with older tools. Use PNG only when you genuinely need lossless detail or transparency — a logo with sharp edges, a screenshot with text — because for photographs PNG produces far larger files for no visible benefit. For logos and icons, SVG beats all of them: it is a vector description that scales to any size from one small file.

You can move existing images toward the web-friendly options with PNG to WEBP and JPG to WEBP, and turn a vector into a raster where you need one with SVG to PNG. The image formats guide goes deeper on the trade-offs.

Quality settings that hold up

For photographic JPG or WEBP, something in the range of 75 to 85 is usually the sweet spot — a large size saving with no difference most people can see. The important caveat is that this range is for photographs. Screenshots, diagrams and anything containing text show compression artifacts far earlier, because sharp edges and flat color are exactly what lossy compression handles worst. Compress those more gently, or keep them as PNG. The image compressor shows the before and after side by side so you can judge it by eye rather than by number.

Responsive images

A phone and a desktop do not need the same file. The srcset and sizes attributes let you offer the browser several versions of an image and describe the layout, so it can download the one that fits the screen it is on. A phone grabs a small file, a large monitor grabs a big one, and nobody downloads more than they can use. It is more work than a single one-size-fits-all image, but it is the difference between a page that is fast on mobile and one that only feels fast on your own laptop.

Lazy loading and layout stability

Images far down the page do not need to load until the visitor scrolls toward them. Adding loading="lazy" defers them, so the initial load spends its bandwidth on what is actually on screen. One exception matters: never lazy-load the hero image at the top, because that is the one you want to appear as fast as possible — deferring it hurts the exact metric you are trying to improve.

Always set an image's width and height attributes too. Without them the browser does not know how much space to reserve, so when the image finally arrives the text below it jumps down — the annoying shift where you lose your place or tap the wrong thing. Declared dimensions let the browser hold the space in advance.

A short checklist

• Resize to the largest size it will actually display before anything else.
• Serve WEBP with a JPG fallback for photos; SVG for logos and icons.
• Quality 75–85 for photos; be gentler with text and screenshots.
• Use srcset so phones get small files and big screens get large ones.
• Lazy-load below-the-fold images, but never the hero.
• Always set width and height to prevent layout shift.