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

Name: Image Budget Calculator
Availability: InStock
Author: Nham Vu

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

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

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-06-25 · Reviewed by Nham Vu