An estimate based on typical compression ratios. Actual file size depends heavily on the specific image: a photo of a plain sky compresses far better than one of foliage. Treat this as a planning figure and check the real output.
Calculated entirely in your browser. Nothing you enter is sent anywhere.
How to use it
Enter the dimensions
The size you will actually serve, not the size the camera produced.
Pick format and quality
WebP at 75 is the sensible default for photographs on the web.
Match the content type
A photograph compresses very differently from a screenshot or a logo.
How the calculation works
The estimate works from bits per pixel, which is the only way to compare formats meaningfully. A photograph at WebP quality 75 runs around 0.55 bits per pixel; the same image as JPEG is roughly 0.85, and as PNG it is an order of magnitude worse.
Content type changes this more than format does. Flat illustrations and screenshots have large areas of identical colour, which compresses extremely well. Foliage, gravel and fabric do not.
Quality is applied as a curve rather than a straight line, because the relationship between quality setting and file size is not linear. Dropping from 90 to 75 saves far more than dropping from 60 to 45.
What this calculator does not do
It is an estimate based on typical ratios. A photo of a plain sky can come in at a third of the figure; a photo of a forest can come in at double.
It does not account for metadata, colour profiles or progressive encoding, all of which add a little.
It assumes a single image. Responsive images with srcset serve different sizes to different devices, which is what you should be doing anyway.
Questions
WebP or AVIF?
AVIF produces smaller files and is supported in all current browsers, but encodes slowly. WebP is the safe default.
What quality should I use?
75 for photographs is the usual sweet spot. Going above 85 rarely improves what anyone can see and costs a lot of bytes.
How wide should a web image be?
Rarely more than 1920px. Serve smaller versions to smaller screens with srcset rather than scaling one large file.
When should I use PNG?
Only for images that need sharp edges with transparency, like logos. On a photograph it produces enormous files.
Related calculators
Page Weight Budget
How many KB before your LCP target.
LIVEAspect Ratio Calculator
Resize without distorting.
LIVECSS Clamp Calculator
Fluid font sizes in one line.
LIVESomething wrong with this calculator? Report it and it gets fixed or taken down.
