What is an image budget?

An image budget is the maximum total file size (in KB or MB) that all images on a page should collectively occupy so that the page loads within a target time on a specified connection speed.

What bandwidth share should I use for images?

A common rule of thumb is 50–70% of total page bandwidth for images on media-rich pages, and 20–40% for content-focused pages. Adjust based on your actual waterfall breakdown.

Does this account for HTTP/2 multiplexing or caching?

No. The calculator uses a simple throughput model: budget = speed × time × share. Real-world performance is also affected by caching, CDN latency, HTTP/2 parallelism, and browser rendering — treat the result as a planning ceiling, not a precise prediction.

Why does the budget seem low on 3G?

3G typically delivers 1–3 Mbps, so a 3-second load window leaves only ~375–1125 KB total page weight. Allocating 50% to images yields 187–562 KB — which sounds tight but is achievable with modern WebP/AVIF compression.

What is a good target load time?

Google recommends Largest Contentful Paint (LCP) under 2.5 seconds. For a conservative planning budget, 3 seconds is a widely used target on mobile connections.

Image Budget Calculator

Set a target load time and connection speed to get the maximum total image payload your page can afford.

Performance Parameters

Connection Speed

Target Load Time 3.0 s

0.5 s10 s

Image Bandwidth Share

5%95%

Number of Images on Page

Set your parameters and click Calculate Budget.

Summary

The Image Budget Calculator helps web developers and designers determine how much total image weight a page can carry while still meeting a target load time on a given connection. Enter the connection speed, your load-time goal, and what fraction of bandwidth images should consume, and the tool outputs the maximum bytes available for all images combined. You can then break that budget down by individual image count to see the average allowance per image.

How it works

Select the target connection speed (or enter a custom throughput in Mbps).
Set the desired total page load time in seconds.
Adjust the image bandwidth share — the percentage of the connection reserved for images.
Enter the number of images on the page to get the per-image allowance.
The calculator displays the total image budget in KB/MB and a breakdown by image.

Use cases

Auditing image-heavy landing pages before launch.
Setting team guidelines for hero images and gallery thumbnails.
Checking whether a design mockup is feasible on slow mobile connections.
Estimating how many full-width images a blog post template can support.
Educating clients on the real cost of uncompressed photography.
Benchmarking existing pages against 3G or LTE performance budgets.

Frequently Asked Questions

Last updated: 2026-10-05 · Reviewed by Nham Vu