Performance

The Right Image Size and File Size for a Fast Website

Concrete pixel widths and byte budgets that keep pages fast — no guessing, no “just run it through a compressor”.

6 min readUpdated 2026-10-05

Images are the single biggest reason a web page is slow, and the fix is not complicated: send fewer pixels, in a modern format, at a sensible quality. What most teams lack is a number to aim at. Here are the numbers.

Start with a byte budget

Image role	Target file size
Hero / above the fold	80–150 KB
In-article photo	40–90 KB
Thumbnail / card	10–25 KB
Logo (SVG preferred)	Under 10 KB
Whole page	Under 1.5 MB including everything

If a single image breaks its budget by more than double, it is almost always one of two things: the pixel dimensions are far larger than the display size, or it is a PNG that should be a WebP/JPG.

Pixel widths that actually get displayed

Full-width hero on desktop: 1600–1920 px wide is plenty; anything above 2400 px is invisible detail.
Content column image: 800–1200 px.
Card / grid thumbnail: 400–600 px (or 2× the CSS size on high-density screens).
Mobile-only view: 640–800 px covers most phones, including high-DPI screens.

Use Image Dimensions Checker to audit what you have, then Bulk Image Resizer to bring a whole folder down to one width in a single pass.

The one image that decides your score

Google’s Largest Contentful Paint (LCP) measures how long the biggest visible element takes to appear. On most pages that element is an image — usually the hero. Three rules matter more than everything else combined:

Keep the hero under 150 KB after compression. Everything else is secondary.
Do not lazy-load it. Lazy-loading the hero delays the very thing that is being measured.
Give the element width and height so the layout does not jump while the file downloads.

Ship checklist

Resize every image to the width it will really be displayed at.
Convert photos to WebP, keeping JPG as a fallback where needed.
Compress at quality ~80 and check the savings.
Strip metadata you do not want public — camera details and GPS coordinates travel inside the file. Inspect what is inside with Image Metadata Viewer.
Re-measure the page. You are looking for a total under 1.5 MB and an LCP comfortably under 2.5 seconds.

Teams that do this consistently end up with pages that load in about a second on 4G without changing a single line of code.

Frequently asked questions

What is a good image file size for a website?

Hero images 80–150 KB, article images 40–90 KB, thumbnails 10–25 KB, and a total page weight under about 1.5 MB.

Does image size affect SEO?

Yes, indirectly but strongly: page speed is a ranking and conversion factor, and slow pages lose visitors before they read anything.

Should I use 2x images for retina screens?

For small UI elements and logos, yes — supply 2× the CSS pixel size. For large photos, a well-compressed 1600–1920 px image is usually enough.

Tools used in this guide

Bulk Image Resizer

Resize one image or hundreds at once — free and online.

Image Compressor

Compress JPG, PNG and WebP images in your browser.

Image Dimensions Checker

See an image size, dimensions and ratio.

Image Metadata Viewer

Inspect the details stored in an image.

Keep reading

PDF