How to reduce total image weight
Images are usually the heaviest part of a page. Compress, resize and use modern formats to cut their weight by half or more.
Step by step, with screenshots: Image optimization for the web: size, format, compression and loading →
Check your own site
Runs these 2 checks and the other 191, free, in about 45 seconds.
Or run only this check with the free Image size checker, the free Image compressor or the free Website speed comparison.
What it is
Image weight is the total size of all the images a page downloads, in kilobytes or megabytes. On most websites images are the heaviest part of the page, often more than the HTML, CSS and JavaScript combined.
Heavy images cost visitors seconds on mobile networks and real money on metered data plans, and a large hero image slows your Largest Contentful Paint. Over 1.5 MB of images in total, or a single image over 500 KB, is usually a sign that original camera files or oversized exports were uploaded.
OK looks like this: each image is resized to the largest size it is actually shown at, saved as WebP or AVIF at around 80 % quality, and the page's images stay well under 1.5 MB in total. getReport adds up the image weight and lists the heaviest files.
What a passing site looks like
- Total image weight: passeswarning · −2 ptseffort M
- Heavy image files: passeswarning · −1.5 ptseffort M
1. Total image weight
Why it matters. Images are usually the heaviest part of a page. Over 1.5 MB in total, or a single image over 500 KB, adds seconds on mobile and costs visitors real data.
- Resize images to the size they are shown at (a 400 px wide photo does not need a 4000 px file).
- Convert to WebP or AVIF and compress to about 80 % quality; CMS plugins and CDNs can do this automatically.
2. Heavy image files
Why it matters. A single image over a few hundred kilobytes takes longer to download on mobile than the rest of the page. Uploading the original camera file is the usual cause.
- Export each listed image at the size it is displayed and save it as WebP or AVIF at about 80 % quality.
- Let your CMS or CDN resize on upload so this does not come back with the next photo.
Questions people ask
How do you reduce image file size?
Resize the image to the largest size it is displayed at, then compress it: export as WebP or AVIF at around 75-80 % quality, or JPG for photos if you need the widest support. Strip metadata you do not need. Image plugins and CDNs can do all of this automatically on upload.
What is the best image size for a website?
It depends on where the image is shown: make it as wide as its largest display size, times two for sharp screens, and no bigger. A full-width hero around 1600-2000 px wide and a content image around 800-1200 px cover most layouts. Aim for under 200 KB per image and far less for thumbnails.
How do you optimise images for the web?
Choose the right format (WebP or AVIF for photos, SVG for logos and icons), resize to the display size, compress, and serve several sizes with srcset so phones get smaller files. Add width and height attributes to prevent layout shift, and lazy-load images below the fold.
How much should images weigh on a web page?
As little as the design allows. As a guide, keep all images on a page under about 1.5 MB, and single images under 500 KB, with most content images far below 200 KB. getReport warns above those figures, since they usually mean images were uploaded straight from a camera or design tool.