Best Image Size and Quality for the Web (by Use Case)

"How large should my images be?" is one of the most common questions in web design — and the answer is always "it depends on where they're shown." This guide gives practical starting points for dimensions, file size and quality by use case, so you can stop guessing.

Two numbers that matter

Every web image has two sizes: its pixel dimensions (like 1600×900) and its file size in kilobytes. Dimensions should roughly match the space the image occupies on screen, and file size should be as small as it can be while still looking clean. Optimizing both is the goal.

Guidelines by use case

Full-width hero images

Aim for around 1600–2000 px wide for large screens, and keep the file under roughly 200 KB using WebP or AVIF. Because the hero is usually the LCP element, its size has an outsized effect on perceived speed.

Blog and content photos

Most article columns are 700–900 px wide, so an image around 1200–1600 px covers retina screens. Target well under 150 KB. Quality 75 in WebP is almost always enough.

Thumbnails and cards

Thumbnails are small on screen, so 400–600 px is plenty. These can often be squeezed under 30–50 KB, which matters a lot when a page shows dozens of them.

A quality starting point

For lossy formats, quality 70–80 is the safe range for photos. AVIF can go a bit lower for the same look. Always compare before and after — the right value is the lowest one where you can't spot a difference.

Put it into practice

Pick a target width for each use case, resize to it, then convert to WebP or AVIF at quality 75. With Scrunch you can batch-convert a whole set of images and check each result against the original before downloading — keeping every image as light as it needs to be.

Frequently asked questions

Can I upload images larger than the display size?

Up to about 2x the display size is useful for retina screens. Beyond that you only waste bandwidth and slow the page down, so treat 2x as the upper limit.

Is smaller file size always better?

Push too far and quality visibly suffers. The goal is the smallest file that still looks clean. Compare before and after to find the balance.

Should I use the same quality for every image?

Quality 75 is a solid default, but you can be more careful with large hero images and more aggressive with small thumbnails. Adjusting per use case gives the best results.

Do image file names affect SEO?

Yes. Descriptive file names and alt text help image search and accessibility. Prefer something like red-running-shoes.webp over img12345.jpg. Combined with size and file-size optimization, this strengthens your image SEO.