On a typical page, images account for more transferred data than the HTML, CSS, JavaScript and fonts put together. That makes them the first place to look when a site feels slow, and the easiest to improve — most of the weight comes from images being far larger than they are displayed, which costs nothing visually to fix.
First: stop serving images larger than they display
This is the single biggest win and it is almost always present. A photo straight off a phone is around 4000 pixels wide. Displayed in a 800-pixel-wide column, the browser downloads all four thousand pixels and throws most of them away.
Work out the widest the image will ever be displayed, double it for high-density screens, and resize to that. A full-width hero on a typical layout rarely needs more than 2400 pixels; a blog body image rarely needs more than 1600; a thumbnail needs a few hundred. Resizing down is lossless in the sense that matters here — you are removing pixels nobody could see.
Doing only this, on a site that has never done it, often cuts total page weight by more than half.
Second: choose the right format
JPG is for photographs. It discards detail the eye is poor at noticing, which keeps files small, but it cannot store transparency and it degrades slightly every time it is re-saved.
PNG is lossless and supports transparency, which makes it right for logos, screenshots, icons and anything with flat colour or sharp text. Used for a photograph it produces a file several times larger than JPG with no visible benefit.
WebP is usually the best choice today. It is typically a quarter to a third smaller than JPG at comparable quality, supports transparency like PNG, and every current browser reads it. The main reason to avoid it is a file being handed to someone else, since some desktop software and print services still do not accept it. The format converter moves between all three.
SVG belongs in this list too, for logos, icons and simple illustrations. It is usually a fraction of the size of a raster equivalent and stays sharp at any scale.
Third: compress, but stop at the right point
Compression quality is a slider, not a switch. Somewhere around 75 to 85 per cent is where most photographs sit — visually indistinguishable from the original at normal viewing size, at a fraction of the file size. Below about 60 the artefacts become visible: blocky patches in skies, halos around edges.
Judge it by eye rather than by number, and judge it at the size the image will actually be shown. An image compressor with a live before-and-after size makes this quick: push the quality down until you can see damage, then back off a step.
One rule that matters: always compress from the original. Compressing an already-compressed file compounds the damage, because each pass discards more detail from what is left. If you need several sizes, export each from the master.
The mistakes that undo all of this
Upscaling a small image to fill a large space is the most common. It adds file size and blur at the same time, and no compressor can fix it — the detail was never captured. Go back to the original or use a different image.
Using PNG for photographs is next, usually because someone read that PNG is higher quality. It is lossless, which is not the same as better here: for a photograph it means storing detail nobody will notice at several times the cost.
And saving a JPG repeatedly through rounds of edits degrades it each time. Keep an untouched master in a lossless format, and export the JPG once, at the end.
Two things the browser can do for you
Lazy loading tells the browser not to fetch images until they are near the viewport. Adding loading="lazy" to images below the fold means a visitor who never scrolls never downloads them. Leave it off the images visible on arrival, since delaying those makes the page feel slower, not faster.
Setting explicit width and height attributes lets the browser reserve the right space before the image arrives, which stops the page jumping around as things load. It costs nothing and fixes one of the most irritating things a slow page does.
Common questions
What is the best image format for a website?
WebP for most photographs and graphics — usually a quarter to a third smaller than JPG at similar quality, with transparency support. JPG remains the safe fallback for photos, PNG for flat colour, sharp text and screenshots, and SVG for logos and icons.
How much should I compress web images?
Around 75 to 85 per cent quality suits most photographs — visually indistinguishable at normal viewing size, at a much smaller file size. Below roughly 60 per cent, blocky patches and halos start to appear. Judge by eye at the size the image will be displayed, not by the number.
What size should I export images at?
Measure the widest the image will ever be displayed, then double it for high-density screens. A full-width hero rarely needs more than about 2400 pixels, a body image more than 1600, a thumbnail more than a few hundred. Anything beyond that is downloaded and discarded.
Does lazy loading actually help?
Yes, for images below the fold — a visitor who does not scroll never downloads them, which can cut the real page weight substantially on long pages. Do not lazy-load images visible when the page opens, as delaying those makes the page feel slower rather than faster.
Last updated 2 September 2026