← All articles

Digital culture · 4 min

One image, three file sizes

How much does an image’s file size change when you export it for the web? We saved the same scene in three formats so you can see the difference.

Metal wreckage around the edges of a purple nebula in Megablast’s third sector.
The WebP version used on this page, 960 × 640 pixels and 27.7 kB.

On the workbench

We cropped a Megablast background to 960 × 640 pixels and exported the same crop as lossless PNG, JPEG and WebP. We set quality to 80 for JPEG and WebP. Each encoder uses its own quality scale, so look at the images as well as the file sizes.

FormatFile sizeSample
PNG937.8 kBOpen PNG ↗
JPEG35.5 kBOpen JPEG ↗
WebP27.7 kBOpen WebP ↗

In this test, the WebP file is about 22% smaller than the JPEG. The jump from PNG is much bigger because the two small files discard some visual information. The table lists on-disk file sizes, with 1 kB equal to 1,000 bytes.

Where to look

Open all three samples at the same zoom. Start with the edges of the metal wreckage, then move to the purple gradients in the middle. Zoom in and look for changes in the gradients, thin lines and grain. Repeat at the size you would use on a page. A detail visible at 200% can disappear when the image is only as wide as your phone.

Try it with your own image

Start with the original and export two copies at the same width, one as JPEG and one as WebP. Compare them at the intended display size and choose the smallest file that preserves the important details. For a text-heavy screenshot or pixel art, include a lossless version. Sharp edges are a good place to check.

Google’s documentation explains how to set the encoder’s quality from the command line. WebP encoder guide