Ideal image size and weight for websites

Find the widest the image can ever be displayed in your design, then double it for high-density screens. That doubled figure is your target width, and everything else follows from it.

An image in an 800-pixel content column needs 1600 pixels. A hero that spans a 1440-pixel viewport needs 2560 at most. A 200-pixel thumbnail needs 400.

Doubling is the sensible ceiling. A 3× file costs roughly twice as much as a 2× file and is essentially indistinguishable, because at that density the limiting factor is your eye rather than the screen.

Dimensions decide how sharp an image can be. Compression decides how many bytes that sharpness costs. Getting one right and the other wrong produces two distinct failures.

Too few pixels, generous compression: a small, clean file that looks soft on a good screen. No setting fixes it — the detail was never there.

Too many pixels, aggressive compression: a large file full of visible artefacts. The worst of both, and surprisingly common when people compress hard without resizing first.

Set the dimensions from the layout, then compress at quality 78–85, and both are right.

Content decides how many bytes an image legitimately needs. A portrait against a plain wall reaches 100 KB at 1600 pixels easily. A photograph of foliage, gravel or a crowd at the same dimensions may need 250 KB before it stops looking mushy — the detail is genuinely there, and the encoder has to pay for it.

Treat the figures above as the range to aim for, and let genuinely detailed images exceed them rather than destroying them to hit a number.

Individual image sizes matter less than what loads before the visitor can use the page. A single 300 KB hero is fine; six 300 KB images all loading immediately is not.

A workable discipline: keep everything above the fold under about 1 MB in total, and lazy-load the rest. That way the page is usable quickly regardless of how much imagery sits further down.

Then check the real figure in your browser's network panel rather than trusting the arithmetic. There is usually one forgotten background image doing more damage than everything you optimised.