OneTaskBy Tim King · Updated
Image Size Calculator
Estimate File Size and Download Time From Pixels, Plus a Ready srcset
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Image Size Calculator works
This image size calculator shows the bytes an image costs. Images are the heaviest thing on most pages and the easiest to get wrong. This calculator
estimates how big an image will be on disk from its dimensions and format, how much memory it
takes once decoded, and how long it takes to arrive on a slow connection. Give it the width the
image is actually displayed at and it tells you how oversized the file is, how much a resize
would save, and writes the srcset that serves each screen the size it needs.
Image size calculator: dimensions, format and quality
File size is not a fixed function of pixel count — a photo of a forest compresses worse than a photo of the sky, and a flat-colour logo compresses far better than either — but for planning purposes the average bytes per pixel of each format is stable enough to be useful. This tool uses typical figures: around 0.18 bytes per pixel for a quality-80 JPEG photo, 0.11 for WebP, 0.07 for AVIF, under 0.1 for a simple PNG or GIF graphic, and close to a byte per pixel for a PNG photo or screenshot, which is why screenshots saved as PNG are so often the largest file on a page. For a real file you already have, the Compress to KB tool measures rather than estimates.
Decoded size is different from file size. Whatever the format, the browser decodes the image to raw pixels — four bytes each for RGBA — before it can paint it. A 4000 by 3000 photo is 48 MB in memory even if it is 900 KB on disk. This is what makes phones stutter when a gallery of full-resolution photos scrolls past, and why the intrinsic dimensions matter independently of how well the file compresses.
Oversizing. The most common image performance problem is serving an image far larger than the slot it fills. A 2400 px wide hero displayed in an 800 px column on a standard screen is three times wider than it needs to be and carries nine times the pixels. On a 2x retina screen the slot needs 1600 px, so the same image is still over twice the pixels it needs. Enter the displayed CSS width and your target density and the tool works out the exact intrinsic size required, the saving from resizing, and whether an undersized image will be upscaled and look soft.
srcset. Rather than pick one compromise size, serve several and let the browser choose.
The generated srcset lists candidate widths at 1x, 1.5x, 2x and 3x of the display width,
dropping any wider than your source, and the sizes attribute tells the browser how wide the
slot is before layout so it can pick the right candidate at request time. The width and
height attributes reserve space and prevent layout shift while the image loads — they should
match the aspect ratio of the source, not necessarily its size. If the slot changes width with
the viewport, replace the fixed sizes value with a media query list such as
(max-width: 600px) 100vw, 800px.
Download time. The figures use the throttling profiles Lighthouse applies: slow 3G at roughly 1.6 Mbps and a modest 4G at 9 Mbps. A single 1 MB hero takes five seconds on slow 3G, which is longer than the whole Largest Contentful Paint budget. Multiply by the number of similar images to see what a gallery or product grid costs before any script has run.
What to do about it. Resize to the largest width the slot can need, usually 2x the CSS
width. Convert photos to WebP or AVIF with a JPEG fallback in a <picture> element. Save
graphics with few colours as PNG or SVG, never JPEG. Lazy-load everything below the fold with
loading="lazy" and give the hero fetchpriority="high". The Page Weight Calculator on this
site adds images to scripts, styles and fonts to see whether the whole page fits a budget.
FAQ
How accurate is the file size estimate?
Within about a factor of two for photographs and closer for graphics. Compression depends on the content — noise, fine texture and sharp edges cost bytes, smooth gradients are cheap. Use the figure to plan and compare formats, then measure the exported file before shipping it.
Should I always target 2x density?
For most sites, yes. Almost all phones and many laptops are 2x or higher, and the extra bytes over a 1x image are worth the sharpness. 3x assets are rarely worth serving; the visible gain over 2x is small and the file is more than double the size.
What is the difference between CSS pixels and device pixels?
CSS pixels are the units in your stylesheet; device pixels are the physical dots on the screen. A 2x screen has two device pixels per CSS pixel in each direction, so an 800 CSS px slot needs a 1600 device px image to look sharp. The density select applies this multiplier.
Why is the PNG estimate so much bigger than the JPEG one?
PNG is lossless, so photographic detail and noise are stored exactly and barely compress. It is the right format for flat graphics, icons and anything with transparency, but a photograph or screenshot saved as PNG can be five to ten times the size of the same image as a good JPEG or WebP.
Does the image count include the same image used more than once?
No — the browser downloads a URL once and reuses it. The count field is for distinct images of similar size, such as thumbnails in a grid or slides in a carousel, so you can see the combined cost.
See also: all Dev Utilities tools, Formatters & Validators, Data & Encoding, Security & Identifiers, SEO, Accessibility, AI.
Related tools
Image Resizer
Resize to a width, height or percent with the aspect ratio locked.
Compress To KB
Hit an exact kB limit by searching for the right quality.
Aspect Ratio Calculator
Missing width or height for a ratio, and how to crop or pad.
Aspect Ratio Cropper
Crop to a standard ratio without shrinking the picture.
Core Web Vitals Calculator
Check whether your page passes Core Web Vitals and which metric to fix first.