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

Related tools

Base64 Encoder Url Encoder Lorem Ipsum

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