JPG, PNG, WebP or AVIF: which format to use

Four image formats cover almost everything on the web and on phones today: JPEG, PNG, WebP and AVIF. The usual advice ("use WebP, it is smaller") is true but vague. How much smaller, on which pictures, and is AVIF worth the extra step? We encoded the same six photos in every format and measured both file size and how close each result stays to the original.

How the test works

We used six photos of different kinds: a long-haired cat with a soft background, a lake surrounded by forest, a cup of coffee held in knitted gloves, a neon sign at night, a macaw with fine feathers and a sunset with smooth gradients. Each was scaled to 2048 pixels wide, a common size for web pages, and encoded with the same encoders and settings our image compressor uses: MozJPEG, libwebp and libavif.

Comparing formats at the same quality setting is misleading, because "quality 75" means something different in each encoder. Instead, for every photo and format we searched for the lowest setting that keeps the result at the same SSIM score, a standard measure of how similar two images look to people, from 0 to 1. We used two levels: 0.98, which is hard to tell from the original at normal viewing size, and 0.95, where a careful eye starts to notice softness or blocks.

Results at high quality

At high quality, WebP needed 45 percent less space than JPEG and AVIF 51 percent less. PNG, which stores every pixel exactly, took five times as much as JPEG.

The totals hide a wide spread between photos:

Photos with lots of fine, sharp detail, such as feathers, foliage and lit signs, gained the most. To keep that detail at high quality, JPEG had to go to a quality setting between 90 and 98, where its files grow quickly. Soft photos with smooth backgrounds compress well in every format, so the newer ones have less room to improve. On the coffee photo, the knitted texture actually suited WebP better than AVIF.

Results when files must be small

At the lower level, SSIM 0.95, the six photos totalled 1,011 KB as JPEG, 844 KB as WebP and 683 KB as AVIF: 17 and 32 percent less than JPEG. The differences shrink in percentage, but what you see at a given size changes more, because JPEG fails in a more visible way. Here is the macaw's head with each file limited to the same 100 KB for the whole photo:

JPEG, 99 KBAVIF, 95 KB

Smooth gradients show the same pattern. On the sunset limited to about 39 KB, JPEG's blocks appear in the sky, WebP softens them, and AVIF keeps the colour transitions almost intact (SSIM 0.939, 0.956 and 0.974):

JPEG, 39 KBAVIF, 38 KB

Screenshots and graphics are different

Photos are the case lossy formats were designed for. Screenshots, charts, diagrams and logos have large flat areas and sharp text, and there the picture changes. We drew a simple chart with text, 1600 by 1000 pixels, and saved it in each format:

For this kind of image, PNG is as small as a JPEG and keeps every pixel exactly, so JPEG has nothing to offer. WebP and AVIF are smaller still, but they soften the edges of text slightly, which matters for screenshots that people need to read.

JPEG 75PNG

Speed and compatibility

Encoding cost differs too. At default settings in the browser, a 2048 pixel photo took about 0.5 seconds as WebP, 0.6 seconds as JPEG with MozJPEG's extra optimisation and 1.3 seconds as AVIF, using libavif's faster speed setting. For a batch of a few hundred photos that is minutes, not hours, but AVIF is clearly the slowest to make.

Every current version of Chrome, Edge, Firefox and Safari shows WebP and AVIF, so for websites both are safe today, with a JPEG fallback only if you serve very old devices. Outside the browser the picture is mixed. Email clients, print shops, older photo editors, government upload forms and many messaging apps still expect JPEG or PNG. When a photo leaves your website, JPEG remains the format nobody refuses.

Which format to use

• Photos on a website: AVIF or WebP. AVIF gave the smallest files in our test; WebP was close and faster to encode.
• Photos you send, print or upload elsewhere: JPEG at quality 75 to 85, which every program accepts. See what JPEG quality settings really change.
• Screenshots, charts, logos and anything with text: PNG, or WebP if size matters more than exact pixels.
• Images with transparency: PNG, WebP or AVIF. JPEG has no transparency at all.
• Photos you will edit again: keep an untouched original, ideally the camera file or a PNG, and export a compressed copy for each use.

You can try all of this on your own pictures with the image compressor, which encodes JPEG, WebP, AVIF and PNG in your browser and shows the size before you download, or convert in bulk with the image converter. Nothing is uploaded.