Image Format Comparison (JPEG, PNG, WEBP, & AVIF) – 2023 Statistics

Lossless: JPEG vs PNG vs WebP vs AVIF

The WebP compression format offers smaller file sizes compared to JPEG, PNG, and AVIF formats for photos. Uncompressed WebP images are 1.42x smaller than JPEGs, 1.70x smaller than PNGs, and 1.75x smaller than AVIFs. Although it must be noted that AVIF is a great compression format, so it doesn’t perform when used uncompressed.

For images that are text-based, the situation is reversed, with PNG offering the best size reduction without losing any quality. On average, PNG files are 6.25x smaller than JPEG, 3.06x smaller than WebP, and 3.88x smaller than AVIF.

These results show that WebP is the best format for photos and PNG is the best format for text images when you want to maintain the highest quality.

How I defined “no compression”?

“No compression” is defined as converting the original image to another format without any techniques for reducing size while sacrificing quality. Images inherently lose some quality when they are converted to other formats, yet all showed an average MS-SSIM of over 0.991, meaning an almost identical image (unnoticeable to the human eye).

Lossy Compression Comparison

To test compression performance, every image was deliberately reduced in quality and then compared to the original in terms of quality and size. The higher the relative quality at the same relative size, the better the format handles lossy compression. It’s worth noting that image degradation becomes noticeable at around MS-SSIM of 0.90 to 0.95.

AVIF is the best lossy compression format for photos, on average even 10% better than WebP. JPEG offers similar quality to WebP and AVIF at small compression, but at more aggressive compressions, it falls off significantly. PNG is by far the worst format for photos, due to a high loss in quality as you reduce the number of colors.

The situation is reversed for text images. Here, PNG offers the best quality (almost 1 up to 40% compression) when compressed. AVIF and WebP perform slightly worse than PNG, while JPEG offers the worst quality-to-size ratio for every level of lossy compression.

Format Comparison

JPG vs JPEG

The main difference between JPG and JPEG is that JPEG is a file format, while JPG is a 3-letter file extension for JPEG. As a result, images saved as .jpg are actually one of the JPEG formats.

The difference arose back in the day when Windows OS only accepted 3-letter file extensions. Nowadays, you can use 3- or 4-letter file extensions, so .jpg and .jpeg can be used interchangeably.

JPEG vs JPEG2000 (vs Progressive JPEG)

Standard JPEGs are 36% of the size of JPEG2000 when uncompressed. The almost 3x larger file size is due to JPEG2000’s completely unlossy conversion (1.0 SSIM), compared to JPEG’s slight loss in quality (0.993 SSIM).

Standard JPEG offers slightly

A progressive JPEG image loads in successive waves until a clear picture is formed. This can be handy for website performance, as the images seem to load faster. However, due to this feature, progressive JPEG images are on average 5% larger than standard JPEGs.

JPEG vs PNG

PNGs are mainly used for web graphics, logos, diagrams, and illustrations, while JPEGs are more commonly used for digital images. JPEGs are compressed to reduce the file size, while PNGs are already compressible. PNG also supports transparent backgrounds, which makes it a suitable format for graphic design.

A large misconception is that PNG cannot be compressed, which is not true. However, JPEG and PNG compressions work differently. JPEGs are compressed by averaging similar image areas while PNGs are compressed by gradually reducing the number of colors. This is expressed with bits: 32-bit, 24-bit, 16-bit, and 8-bit. An 8-bit PNG picture is composed of 256 colors, which we can further reduce any number down to 1.

Due to the difference in format encoding, the JPEG format is better for the lossless compression of photos (i.e. images with lots of colors), offering on average 1.2x smaller file size. In contrast, for text images, which usually contain fewer colors, PNG offers a 6.25x smaller file size than JPEG.

WebP vs AVIF

WebP and AVIF are both compression formats that aim to offer lower sizes while keeping the quality. WebP offers 1.75x smaller file sizes than AVIF for photos, and 1.27x smaller file sizes for text images. However, AVIF offers a better lossy compression that WebP for photos and text images by about 10% throughout the compression range.

Methodology

This article was written to fill the glaring lack of knowledge and data regarding image compression and image format comparison. It focuses on resolving the dilemma, of which format is the best in terms of the smallest size with the highest quality. Serving small images ensures quick web page loading, while high quality keeps readers engaged.

Software used

Analysis was performed using Python 3.10.8. programming language. I used the following packages:

• Pillow (PIL Fork) 9.2.0: Image handling (opening, saving, compressing, converting)
• Scikit-Image 0.19.3: Structural Similarity Index Measure (SSIM)
• Visual Studio Code 1.72: code handling and execution

Images used

Since the goal of this article is to provide you with actionable advice and data on which format is best for a certain case, aimed mostly at online use where small size is paramount, I used images that are most commonly used on websites: everyday stock images and screenshots of texts or pages.

In addition to 100 Unsplash images, I also used 67 custom screenshots taken by ShareX 14.1, saved in TIF format, and 5,836 photos from the CADB_Dataset shared in a GitHub repository and hosted in Google Drive.

Image Analysis

I based image analysis on the correlation between size and quality. All sizes are presented as relative sizes, calculated as compressed_image_size/original_image_size * 100. Relative image size of 100 means that the new image is the same size as the original image. In some cases, a new image can be bigger (>100) than the original, which usually happens when you convert an image to a new format but do not compress it.

For the image quality quantification, three methods were considered and tested: Manhattan distance [6], structural similarity index measure (SSIM) with the Python package provided by Scikit-Image [3], and multiscale structural similarity index measure (MS-SSIM) from TensorFlow.

All results presented are based on MS-SSIM because it was shown that it provides an index that is the closest to human interpretation of image quality [7].

takes values between 0 and 1, with 0 meaning a completely different image and 1 meaning an identical image.

• JPEG: JPEG images were saved using progressive JPEG and the encoder was optimized with an extra pass. During lossy compression, quality was set to between 1 and 100. Note that progressive JPEG files are on average 5% larger, but the file can load faster due to the encoding.
• PNG: PNG images were saved using the best compression algorithm. Lossy compression was performed by reducing the number of colors to between 1 and 256 (8-bit).
• WebP: WebP images were saved using default settings and quality between 1 and 100 for lossy compression.
• AVIF: Since AVIF is not yet natively supported by PILLOW it was handled using pillow-avif-plugin 1.2.2. The settings used were the same as with WebP.

Sources

1. Wikipedia contributors. Structural similarity. Wikipedia, The Free Encyclopedia. Retrieved October 9, 2022.
2. SSIM: Structural Similarity Index (Documentation – Previous v5.2). Imatest. Retrieved October 9, 2022.
3. Structural similarity index. Scikit-Image. Retrieved October 1, 2022.
4. Zhou Wang; Bovik, A.C. “Mean squared error: Love it or leave it? A new look at Signal Fidelity Measures,” Signal Processing Magazine, IEEE, vol. 26, no. 1, pp. 98-117, Jan. 2009.
5. Z. Wang, A. C. Bovik, H. R. Sheikh and E. P. Simoncelli. Image quality assessment: From error visibility to structural similarity. IEEE Transactions on Image Processing, vol. 13, no. 4, pp. 600-612, Apr. 2004.
6. T. M. Hanoun, K. M. Hashim. Modify Manhattan Distance For Image Similarity. Open Journal of Science and Technology (OJST), 2(4): 12–16. (). Retrieved October 1, 2022.
7. Wang Z., Simoncelli E.P., and Alan C. Bovik. Multi-scale Structural Similarity for Image Quality Assessment. Proceeding of the 37th IEEE Asimolar Conference on Signals, Systems and Computers, Pacific Grove, CA, Nov. 9-12, 2003. Retrieved October 14, 2022.