The Ultimate Guide to Image File Sizes and Formats for the Web

Every image on your website has a file size budget. Go over it and your page crawls; stay within it and everything feels instant. This guide gives you concrete KB targets for every common use case, the pixel dimensions to match, and the format that gets you there.

The Reference Table: Ideal File Sizes by Use Case

These targets assume you are using WebP or AVIF. If you're stuck with JPEG, add roughly 25-30% to each number.

Where These Numbers Come From

The median web page weighs about 2.5 MB on mobile, and images alone account for roughly 1 MB of that — about 40% of total page weight, according to HTTP Archive's 2025 data. Google's "good" threshold for Largest Contentful Paint is 2.5 seconds. To hit that target on a 4G connection (roughly 1.5 MB/s effective throughput), your hero image needs to load in under a second — which means staying below 200 KB.

The targets in the table above aren't arbitrary. They're reverse-engineered from real performance budgets: a total image budget of 400-600 KB for a typical page, distributed across hero, content, and thumbnail slots.

Format Makes the Biggest Difference

The same photo at the same visual quality can be radically different file sizes depending on format:

Switching from JPEG to WebP saves about 25-35%. Going to AVIF saves roughly 50% compared to JPEG. Both support transparency. For a detailed comparison, check our WebP vs AVIF guide.

You can convert your images right now: JPG to WebP, any format to AVIF, or use batch convert for multiple files at once.

Pixel Dimensions: The Hidden Multiplier

File size is a function of two things: pixel count and compression. Most people focus on compression and ignore pixel count — but reducing dimensions has a much larger effect.

A quick example: a 4000 x 3000 photo is 12 million pixels. Resize it to 1200 x 900 and it's 1.08 million pixels — a 91% reduction in raw data. Even before compression, you've eliminated most of the weight.

Rule of thumb: never serve an image wider than its display container. If your blog's content area is 720px wide, a 1440px image (for 2x Retina) is the maximum you should serve. Anything beyond that is wasted bandwidth.

Use Vizua's resize tool to bring images down to the exact dimensions you need. Then compress with JPEG or PNG compressor for the final savings.

Compression Quality: Finding the Sweet Spot

Once your image is the right size and the right format, compression quality is the final dial. Here's a practical scenario showing how these three levers work together:

Starting point: A camera photo, 4000 x 3000, saved as PNG — about 14 MB.

1. Resize to 1200 x 900 (blog content width, 2x Retina): ~3.5 MB as PNG
2. Convert to WebP at quality 80: ~130 KB
3. Convert to AVIF at quality 65 (if your stack supports it): ~90 KB

That's a 99.3% reduction from the original PNG. The resulting image is visually indistinguishable from the source at normal viewing sizes.

For detailed quality recommendations per format, see our guide: How to compress images without losing quality.

Special Cases

E-commerce product pages

Product photos need to look sharp at zoom. Serve the main image at 800-1000px (1600-2000px for Retina) in WebP. Most product shots compress well to 80-150 KB. Thumbnails in a grid should be 300-400px wide, landing around 20-50 KB each.

Photography portfolios

Quality is paramount, but so is load time. Serve preview images at 1200-1600px in WebP (quality 85), targeting 150-250 KB. Offer a separate "view full size" link for the high-resolution version.

Social sharing (Open Graph)

OG images should be 1200 x 630px. Facebook and Twitter accept JPEG and PNG; some platforms now support WebP. Keep these under 150 KB. They're loaded by crawlers, not lazy-loaded by browsers, so every kilobyte counts.

Total Page Image Budget

A useful frame: aim for a total image weight under 500 KB per page. That typically means:

• 1 hero image: ~150 KB
• 3-4 content images: ~100 KB each, totaling ~300-400 KB
• Thumbnails, avatars, icons: ~50 KB combined

At this budget, your page loads fast on 4G and doesn't drain mobile data plans. If you need more images (gallery, e-commerce grid), lazy loading keeps the initial load within budget — only above-the-fold images count against first-load performance.

Frequently Asked Questions