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.
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.
| Format | File size | Sample |
|---|---|---|
| PNG | 937.8 kB | Open PNG ↗ |
| JPEG | 35.5 kB | Open JPEG ↗ |
| WebP | 27.7 kB | Open 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