What size should your images actually be on a website?

Pages load slowly for many reasons, and by far the most common is images that are far larger than the space they are displayed in. A photograph straight from a phone can be 4000 pixels wide and several megabytes; displayed in a 600 pixel column, the browser downloads all of it and then throws most of it away.

Fixing this is the single highest-return thing most people can do for page speed, and it takes minutes.

Dimensions and file size are different problems

This distinction causes a lot of confusion. Dimensions are how many pixels wide and tall the image is. File size is how many bytes it takes to store. They are related but not the same, and they are fixed by different actions.

Compression reduces file size while keeping the dimensions, by storing the same picture less precisely. Resizing reduces the dimensions, which reduces file size as a consequence and loses nothing visible if the image was larger than it is displayed.

The order matters. Resize first, then compress. Resizing a 4000 pixel image to 1200 removes three quarters of the data at no visible cost, and whatever compression you then apply is working on a much smaller starting point. Doing it the other way round means compressing pixels you are about to discard.

How big is big enough

Start from the space the image occupies on the page, then double it. The doubling accounts for high-density screens, which pack roughly twice as many physical pixels into the same space and will otherwise render your image slightly soft.

• Full-width hero on a wide screen: 2000 to 2400 pixels wide
• Main content column image: 1200 to 1600 pixels wide
• Half-width or side-by-side images: 800 to 1000 pixels wide
• Thumbnails and list images: 400 to 600 pixels wide
• Icons and logos: use SVG where possible, since it scales to any size at no cost

Beyond twice the display size there is essentially no visible benefit. A 4000 pixel image in a 600 pixel column looks identical to a 1200 pixel one and costs your visitors several times the data.

Keep the proportions

Resizing should change how large an image is, not its shape. Setting both width and height to values that do not match the original ratio stretches the picture, and stretched faces and squashed logos are noticeable even to people who could not say what is wrong.

Set one dimension and let the other follow. If you need a specific shape — a square thumbnail from a landscape photograph — crop to that shape first and then resize. Cropping removes part of the picture, which is a deliberate choice; stretching distorts all of it, which never is.

A workflow that holds up

1. Keep the original full-size file somewhere safe, and never edit it directly.
2. Crop to the shape you need.
3. Resize to roughly twice the display width.
4. Compress, checking the result at full size rather than trusting a percentage.
5. Choose the format last: WebP for the web, JPG for photographs sent to people, PNG for anything with text or transparency.

Working from a preserved original matters because every one of these steps loses something. If you resize a copy and later need it larger, you go back to the original rather than enlarging something already reduced, which never recovers the detail.