How to reduce image size for a website, measured

How much does each change save?

We ran five photographs through this site's own engine and changed one thing at a time: width, then quality, then format, then DPI. The width table comes first because width did most of the work.

The four camera photos started between 2.7 and 5.3 MB. At 1600 pixels wide and quality 82, each was 87 to 96 percent smaller. No other setting came close.

The close crop was already 1280 pixels wide, so saving it again at its own width took off only 8 percent. A photo that is already the right size has little left to give.

Halving the width from 1600 to 800 pixels left 31 to 32 percent of the bytes. A quarter of the pixels does not mean a quarter of the file, but it is close.

How wide should a website image be?

As wide as the space it fills, times the screen's pixel ratio. A laptop or phone with a sharp screen usually reports a ratio of 2 or 3, so it draws each CSS pixel with two or three real pixels across.

So a photo in an 800 pixel column needs 1600 pixels to look sharp on a ratio 2 laptop. A full-width photo on a phone 390 pixels wide at ratio 3 needs 1170.

Anything wider is downloaded and thrown away. Lighthouse flags an image when its rendered size, counting the pixel ratio, is at least 4 KiB smaller than the file. In Lighthouse 13 this check moved into the "Improve image delivery" insight.

If one image appears at several sizes, give the img tag a srcset with two or three widths and a sizes attribute. The browser then picks the smallest file that is still sharp.

To make those widths, the bulk image resizer resizes a whole folder in one go, in your browser.

How much does quality save?

Once the width is right, quality is the next lever. This table keeps every photo at 1600 pixels and changes only the quality and the format.

Going from quality 82 to 70 took another 25 to 40 percent off. Going up to 92 made the files 22 to 72 percent larger, for detail few readers will see on a web page.

Lower is not free. Check faces, text and smooth skies in the preview before you settle, because that is where compression shows first. The free online image compressor shows the file size as you move the slider.

How to compress an image without losing quality, measured scores every setting from 100 to 30 against the original, and tests what saving again does.

Is WebP worth it?

At 1600 pixels and quality 82, WebP was 16 to 38 percent smaller than JPEG on all five photos. Every current browser shows it, so for a site you control it is usually the better choice.

Part of that saving is detail. In our JPG vs PNG vs WebP vs AVIF comparison, WebP at quality 82 drifted furthest from the original on every photograph.

AVIF at quality 82 came out close to JPEG here, larger than WebP on all five, because at the same number it keeps more detail. Lower its quality to compare fairly. Convert JPG to WebP switches a photo in your browser.

Does 72 DPI make a file smaller?

No. We saved each photo at 1600 pixels with 72 DPI, 300 DPI and no DPI at all. All three files came out the same size to the byte, on every photo.

DPI is a note in the file header that tells a printer how large to print. A browser ignores it and draws the pixels. The pixels do not change, so neither does the file size.

What about the 150 KB rule?

Many guides say to keep images under 150 or 200 KB. Whether that works depends on the width you picked and on the photo.

At 1600 pixels, even quality 50 left two of the four camera photos over 150 KB. At 800 pixels and quality 82, every photo was under 125 KB.

So choose the width first, then the quality, and let the file size follow. If a platform does set a limit, Resize an image to 150 KB finds the highest quality that fits.

Does lazy loading make images smaller?

No. Lazy loading tells the browser to wait until an image is near the screen before it downloads it. The file is exactly as large when it arrives.

It helps a long page start faster, but it will not fix an oversized image. Set width and height on the image too, so the page does not jump when it loads.

How was this measured?

Each photo went through this site's engine in Chrome on 26 September 2026, the same code that makes your download. Widths are the long edge, and a photo is never enlarged.

The photographs are the five Wikimedia Commons images behind this site's file size pages. At full size, the JPEG results matched our format comparison to the byte.