Image format comparison: JPEG vs. PNG vs. WEBP vs. AVIF

What’s the best lossless format

Please note: There’s a difference between lossless compression and no compression. The term “no compression” means that the original image was converted to another format without using any techniques to reduce its size. Even without applying compression, images might still inherently lose some quality when converted to other formats. However, in my tests, all images showed an average MS-SSIM of over 0.991 after conversion, indicating an almost identical image that is unnoticeable to the human eye.

When using lossless compression, WebP consistently delivers smaller file sizes than JPEG, PNG, and AVIF for photos. Losslessly compressed WebP images are, on average, 1.42x smaller than JPEGs and 1.70x smaller than PNGs. While AVIF excels at lossy compression, its file sizes are generally larger than WebP’s when using lossless compression.

For text-based images, PNG is the clear winner for lossless compression. When no quality loss is desired, PNG files are, on average, 6.25x smaller than JPEG, 3.06x smaller than WebP, and 3.88x smaller than AVIF.

These results demonstrate that WebP is generally the best choice for losslessly compressing photos, while PNG is optimal for losslessly compressing text images when maintaining the highest quality is paramount.

Size comparison of uncompressed JPEG, PNG, WebP, and AVIF photos and text images. Average sizes were normalized. Lower is better.

Lossy compression comparison

To evaluate lossy compression performance, each image was intentionally degraded in quality, and the resulting size and quality were compared to the original. The better a format performs in lossy compression, the higher the relative quality it retains at the same relative size. Image degradation typically becomes noticeable around an MS-SSIM of 0.90 to 0.95.

Photos: AVIF emerges as the leader in lossy compression for photos, offering approximately a 10% improvement over WebP in our tests. JPEG can provide quality similar to WebP and AVIF at low compression levels, but its quality drops off significantly with more aggressive compression. PNG is not well-suited for lossy compression of photos due to substantial quality loss as the number of colors is reduced.

Text images: The landscape shifts for text images. Here, PNG offers excellent quality, up to around 40% compression. AVIF and WebP perform slightly worse than PNG for text, while JPEG exhibits the poorest quality-to-size ratio across all lossy compression levels.

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. Images saved as .jpg are one of the JPEG formats.

This distinction arose from older Windows operating systems that only supported 3-letter file extensions. Modern systems handle both .jpg and .jpeg extensions interchangeably.

JPEG vs. JPEG2000 (vs. Progressive JPEG)

Uncompressed: When uncompressed, standard JPEGs are 36% the size of JPEG2000. The almost threefold larger file size is due to JPEG2000’s less efficient encoding when no compression is applied. On the other hand, standard JPEG offers a slight loss in quality (0.993 SSIM) even when no compression is used.

Progressive JPEG: A progressive JPEG image loads in successive waves, giving websites the impression of faster loading. However, this feature comes at a cost: Progressive JPEG files are typically 5% larger than standard JPEGs.

JPEG vs. PNG

PNGs are commonly used for web graphics, logos, diagrams, and illustrations, while JPEGs are preferred for digital photographs. JPEGs employ lossy compression to reduce file size, whereas PNGs use lossless compression. PNG also supports transparency, making it suitable for graphic design elements.

A common misconception is that PNG cannot be compressed, which is not true. PNG compression works by reducing the number of colors used in an image. This is typically represented by bit depth: 32-bit, 24-bit, 16-bit, and 8-bit. An 8-bit PNG can have up to 256 colors, which can be further reduced down to a single color. JPEG compression, in contrast, averages similar image areas.

Due to these differences, JPEG is better suited for lossless compression of photos, resulting in file sizes that are, on average, 1.2x smaller. Conversely, PNG is more effective for losslessly compressing text images, offering file sizes 6.25x smaller than JPEG.

WebP vs. AVIF

WebP and AVIF are modern formats designed for efficient compression while preserving quality. When using no compression, WebP produces smaller file sizes than AVIF for both photos (1.75x smaller) and text images (1.27x smaller). However, when lossy compression is applied, AVIF generally provides a better quality-to-size ratio than WebP, with around a 10% improvement across various compression levels.

Methodology

This article compares image formats comprehensively, focusing on achieving the smallest file sizes without sacrificing significant quality. This is crucial for optimizing website performance, as smaller images contribute to faster page loading times and improved user engagement.

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

The study utilized a diverse set of images commonly found online:

• 100 Unsplash Images: Everyday stock photos.
• 67 custom screenshots: Captured using ShareX 14.1, saved in TIF format, representing text and web page elements.
• 5,836 Photos from the CADB_Dataset: This dataset provides a broader range of photographic content and is available on GitHub and hosted on Google Drive.

Image analysis

The analysis focused on the correlation between file size and image quality.

• Relative size: All sizes are presented as relative sizes, calculated as: (compressed_image_size / original_image_size) × 100. A relative size of 100 indicates the new image is the same size as the original. Values above 100 indicate an increase in size, which can occur during format conversion without compression.
• Image quality quantification: Three methods were considered: Manhattan distance, Structural Similarity Index Measure (SSIM), and Multiscale Structural Similarity Index Measure (MS-SSIM).
• MS-SSIM: Ultimately, MS-SSIM was chosen because it aligns most closely with human perception of image quality. MS-SSIM values range from 0 (completely different) to 1 (identical).

Format-specific settings

• JPEG: Saved using progressive JPEG with encoder optimization. Quality for lossy compression ranged from 1 to 100. Note that progressive JPEGs are typically 5% larger but can offer faster-perceived loading.
• PNG: Saved using the pngquant compression algorithm. Lossy compression was achieved by reducing the number of colors from 1 to 256 (8-bit).
• WebP: Saved using default settings. Quality for lossy compression ranged from 1 to 100.ž
• AVIF: Handled using the pillow-avif-plugin 1.2.2 due to the lack of native AVIF support in Pillow. The settings used were the same as with WebP, with the speed parameter set to 6 to balance encoding time and compression efficiency.

Sources

• Wikipedia contributors. Structural similarity. Wikipedia, The Free Encyclopedia. Retrieved October 9, 2022.
• SSIM: Structural Similarity Index (Documentation – Previous v5.2). Imatest. Retrieved October 9, 2022.
• Structural similarity index. Scikit-Image. Retrieved October 1, 2022.
• 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.
• 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.
• 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.
• 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.

Get creativity tips delivered straight to your inbox

Subscribe

We’ll email you 1-3 times per week—and never share your information.

You have successfully joined our subscriber list.

Matic Broz

Matic Broz is a stock media licensing expert with over 10 years of experience using and testing creative platforms for his own creative work. He has personally licensed over 5,000 stock assets and helped 20,000+ creators choose the right subscription services through his work at Photutorial.

Tags

• Images