Tooleem

Images

WebP vs JPG vs PNG (and AVIF): Measured File Sizes

Which image format to use for photos, screenshots and logos, with file sizes measured on the same images, compatibility problems outside the browser and why browsers cannot create AVIF.

By TooleemPublished Facts checked

Short answer

For photos, WebP at the same quality setting is usually about a quarter smaller than JPG: in our test a 1600-pixel photo was 306 KB as JPG and 222 KB as WebP (−27%). For screenshots, logos and anything with text or flat colour, use PNG or lossless WebP, never low-quality JPG; lossless WebP was 42% smaller than an optimised PNG. AVIF is smaller still, but Chrome’s engine cannot create it from a web page, so in-browser converters there fall back to another format. Keep JPG when the file must open everywhere, including old editors, email clients and upload forms.

Do the calculation

WebP to JPG Converter

Convert a WebP image to JPG in your browser, pick the quality, and download a file that opens everywhere.

Open the tool
On this page
  1. Which format for which image
  2. Measured: one photo in each format
  3. Measured: a screenshot
  4. Measured: a logo with transparency
  5. Compatibility: where WebP still causes trouble
  6. Practical settings

Which format for which image

Choosing an image format by content and destination
ImageBest choiceWhy
Photo on a websiteWebP (lossy), or AVIF with a fallbackSmallest files at the same visual quality; all current browsers display both
Photo to email, print or upload anywhereJPGOpens in every app, camera, printer and form
Screenshot, chart, text, UIPNG or lossless WebPSharp edges stay sharp; JPG adds blur and halos around text
Logo or icon with transparencySVG if vector; otherwise PNG or WebPJPG has no transparency at all
AnimationWebP or AVIF instead of GIFMuch smaller than GIF for the same frames

Measured: one photo in each format

Aerial photo, 1600 × 1071 pixels, encoded in the browser (Chromium 148)
Format and settingFile sizeCompared with JPG quality 80
PNG3.75 MB12.5 times larger
JPG, quality 92503 KB+64%
JPG, quality 80306 KBreference
WebP, quality 92423 KB+38%
WebP, quality 80222 KB−27%
At quality 92 the WebP is 16% smaller than the JPG at quality 92. Quality numbers are not the same scale across formats, so compare by looking at the result, not by matching numbers.

With a dedicated encoder the gap grows: AVIF at quality 65 came out at 218 KB against 455 KB for JPG at quality 90, with almost the same measured error (PSNR 39.1 dB against 39.4 dB), so about half the size. Google reports WebP lossy files 25% to 34% smaller than comparable JPGs; our −27% sits inside that range.

Measured: a screenshot

Tool page screenshot, 1280 × 900 pixels
Format and settingFile sizeLossless?
PNG from the browser (fast compression)117 KByes
PNG, optimised (maximum compression)61 KByes
WebP lossless35 KByes
JPG, quality 80 (browser)56 KBno, text edges blur
WebP, quality 80 (browser)27 KBno
AVIF, quality 5015 KBno
A browser’s PNG encoder favours speed, so the same PNG can be half the size after an optimiser. Lossless WebP was 42% smaller than the optimised PNG; Google’s own figure is 26% smaller on average.

Compatibility: where WebP still causes trouble

  • Chrome, Edge, Firefox, Opera and Safari all display WebP and AVIF, according to MDN’s image format guide.
  • Problems usually come from outside the browser: older photo editors, some office software, email clients, and upload forms that accept only JPG or PNG.
  • Displaying AVIF is not the same as creating it. Asked for AVIF, the canvas encoder in Chromium 148 (the engine of Chrome and Edge) returned a PNG in our test, so an in-browser converter cannot promise AVIF output.
  • Converting a lossy WebP to PNG does not bring back detail; it only makes the file bigger. Convert to PNG only when an app needs a lossless format.

Practical settings

  1. Resize first. A 4000-pixel photo shown at 1200 pixels wastes most of its bytes; resize it before you choose a format.
  2. For photos, start at quality 75 to 85 and look at the result at 100% zoom.
  3. For screenshots, choose PNG or lossless WebP and let an optimiser shrink it.
  4. To make WebP files for a website, use the image to WebP converter; to send one to someone whose app will not open it, convert it back to JPG.

Note

How we measured

Browser sizes come from Chromium 148’s canvas encoders, the same route in-browser converters use. Optimised PNG, lossless WebP and AVIF were made with libvips 8.17 (sharp 0.34.5). Error is PSNR against the resized original. Your results will vary with the image: noisy photos compress less, flat graphics more.

Do the calculation

WebP to JPG Converter

Convert a WebP image to JPG in your browser, pick the quality, and download a file that opens everywhere.

Open the tool

Tools used in this guide

Sources

The figures and rules in this guide come from these documents.

  1. An image format for the Web (WebP)Google for DevelopersWebP lossless 26% smaller than PNG; lossy 25% to 34% smaller than comparable JPG.
  2. Image file type and format guideMDN Web DocsBrowser support and recommended uses of WebP, AVIF, PNG and JPG.
  3. KSC-2009-3194: aerial view of the Rocket GardenNASA Image and Video LibraryTest photo used for the measurements (photo credit: NASA/Kim Shiflett).

Facts checked

All guides