WEBP vs PNG vs JPG: We Tested the File Sizes

WEBP vs PNG vs JPG: We Tested the File Sizes

Quick answer

For photos, lossy WEBP was 23 to 34 percent smaller than JPG at about the same quality score, and about 92 percent smaller than PNG. For a screenshot and a logo, lossless WEBP was 64 to 82 percent smaller than PNG, while JPG and lossy WEBP often made the files bigger. Use lossy WEBP or JPG for photos, and PNG or lossless WEBP for graphics, text and transparency.

Free tool

Image to PNG Converter. Turn JPG, WEBP, GIF, AVIF and other images into PNG in your browser.

Most advice on image formats stays vague: WEBP is smaller, JPG is for photos, PNG is for logos. We wanted numbers. So we saved five test images in every common way and measured each file. The results back up the general rules, and show one thing most guides miss: the right WEBP setting depends on the kind of picture.

How we ran the test

We used five images. Three are real photos from the free sample set of the scikit-image library: a cup of coffee (600 x 400 pixels), a cat (451 x 300) and a portrait of an astronaut (512 x 512). The fourth is a dashboard screenshot with text and flat colors (1,200 x 800), drawn by us. The fifth is a round logo with a see through background (800 x 800), also drawn by us.

We saved each image as an optimized PNG, as a lossless WEBP, and as lossy WEBP and JPG at quality 90, 80 and 60. The logo has no JPG version, because JPG cannot hold a see through background. All files were made with Python and the Pillow library (version 12.3), using its slowest and best WEBP setting.

To compare quality, we used SSIM, a score from 0 to 1 that measures how close a saved file is to the original. A score of 1 means identical. Sizes below are in kilobytes (1 KB is 1,000 bytes).

Results for photos

PhotoPNGWEBP losslessWEBP lossy, quality 80 (SSIM)JPG, quality 80 (SSIM)
Coffee441.8 KB336.0 KB36.4 KB (0.930)47.3 KB (0.919)
Cat218.9 KB153.4 KB15.9 KB (0.951)23.2 KB (0.955)
Astronaut422.3 KB326.4 KB30.0 KB (0.946)45.3 KB (0.946)
  • Lossless WEBP was 23 to 30 percent smaller than PNG, with no loss of detail.
  • Lossy WEBP at quality 80 was 92 to 93 percent smaller than PNG.
  • At quality 80, WEBP was 23 to 34 percent smaller than JPG, and the quality scores were within 0.01 of each other. The cat photo scored a little higher as JPG, and the coffee photo scored higher as WEBP.
  • At quality 60, the coffee photo came to 23.9 KB as WEBP and 30.5 KB as JPG.

Results for a screenshot and a logo

ImagePNGWEBP losslessWEBP lossy, quality 80JPG, quality 80
Dashboard screenshot53.4 KB9.4 KB43.7 KB83.7 KB
Round logo, see through background6.2 KB2.3 KB10.5 KBNot possible
  • Lossless WEBP was 82 percent smaller than PNG for the screenshot and 64 percent smaller for the logo.
  • Lossy WEBP at quality 80 was 18 percent smaller than PNG for the screenshot, but 67 percent bigger for the logo.
  • JPG was bigger than PNG for the screenshot at every quality we tried, even at quality 60 (62.2 KB against 53.4 KB).

The reason is how each method works. Lossy methods suit photos, where color changes slowly and small errors go unseen. A screenshot or logo has large flat areas and sharp edges, and lossless methods store these in very few bytes. Lossy methods add noise around edges and spend bytes to describe it.

What this means for your images

  • Photos: use lossy WEBP, or JPG when an app does not read WEBP. Try quality 75 to 85 and look at the result.
  • Screenshots, logos, charts and text: use PNG, or lossless WEBP for a smaller file. Avoid JPG, which makes these files bigger and blurs text edges.
  • See through backgrounds: use PNG or WEBP. JPG cannot hold transparency.
  • Not sure? Save both versions and keep the smaller one that still looks right to you.

How our numbers compare with Google

Google says lossless WEBP images are 26 percent smaller than PNG, and lossy WEBP images are 25 to 34 percent smaller than comparable JPG files at the same SSIM score. Our photo results fit: 23 to 30 percent for lossless, and 23 to 34 percent for lossy at quality 80. The screenshot and logo results go further than 26 percent, but those are only two images, so treat them as an example and not a promise.

Limits of this test

  • Five images is a small set. Other photos will give different numbers.
  • We used one encoder with one set of settings. Other tools, such as Photoshop or Squoosh, may give different sizes.
  • SSIM is a score, not a pair of eyes. Open the files and look at them before you pick one.

Frequently asked questions

Is WEBP always smaller than PNG?

Not always. In our test lossless WEBP was smaller than PNG for all five images. Lossy WEBP, however, made the logo 67 percent bigger and gave the screenshot only a small saving.

Can every browser open WEBP files?

All current major browsers open WEBP. Some older apps, email tools and print services do not. If a program rejects a WEBP file, the WEBP to PNG converter turns the file into a PNG in your browser.

What does SSIM mean?

SSIM stands for structural similarity index. The score runs from 0 to 1, and a higher score means the saved image is closer to the original.

Which format should I use for a website icon?

PNG works well for icons, because icons are flat shapes with sharp edges. Make one with the icon maker, or convert a PNG with the PNG to ICO converter.

Sources

Keep reading

Similar Posts