What file size should website images be?

No official limit exists, but smaller loads faster. As rough starting points, a full-width hero photo often lands around 60 to 200 KB, an image inside an article tens of KB, a thumbnail a few KB, and a logo a few KB as SVG. Test them against how the image looks, because detailed photos may need more.

Why it matters

Images are often the heaviest part of a page. On a slow mobile connection, a large photo delays what the visitor sees first, and the biggest image above the fold is frequently the element measured by Largest Contentful Paint. Smaller files cost less data for your visitors and less bandwidth for you.

How to do it

Find your heaviest images. Open developer tools, choose the Network tab, filter by Img and sort by size.
Compare the pixel size of each file with the size it is shown at. A picture that is 4000 pixels wide but displayed at 800 is wasting bytes.
Resize to about twice the displayed width at most, so screens with a high pixel density still look sharp.
Choose a suitable format. Photographs usually suit JPEG or WebP, flat graphics suit PNG or SVG.
Compress. A quality setting somewhere in the middle, checked by eye, usually removes much of the weight with little visible change.
Serve different sizes to different screens with srcset, and add loading="lazy" to images far below the first screen.

<img src="/img/hero-800.webp"
     srcset="/img/hero-400.webp 400w, /img/hero-800.webp 800w, /img/hero-1200.webp 1200w"
     sizes="100vw" width="1200" height="600" alt="Bakery shelf with fresh bread">

Crawvix Image Doctor lists every image on a scanned website with findings for heavy files, and its Optimize my images button converts JPEG and PNG pictures to WebP in a ZIP.

Common mistakes

Uploading camera originals straight from a phone.
Using a very large image and shrinking it with CSS only.
Lazy loading the main image at the top of the page, which can delay it.
Compressing a file again and again until it looks smeared.
Judging by one image when thirty small ones can add up to more than a single hero.

Frequently asked questions

Is there a size Google requires?

No. Core Web Vitals measure timing, not kilobytes. Smaller files help you reach good timings, but no single size passes or fails a page.

What dimensions should a hero image have?

Match the widest size it is displayed at, and supply a smaller version for phones through srcset. Avoid sending a desktop-size file to a small screen.

Do I lose quality when I compress?

Lossy compression discards some detail, and lossless compression does not. Check the result by eye at the size it is shown.

To check your own images, Try the free website sample.