Summary
- WebP is the best format for uncompressed photos (1.42x smaller than JPEG, 1.70x smaller than PNG, and 1.75x smaller than AVIF)
- PNG is the best format for uncompressed text images (6.25x smaller than JPEG, 3.06x smaller than WebP, and 3.88x smaller than AVIF).
- AVIF and WebP offer the best quality when lossy compression of photos, while PNG offers the best lossy compression for text images.
- Progressive JPEG files are 5% larger than standard JPEG files.
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
- 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.
About your guide
Matic Broz is a multifaceted creative professional, with experience as a photographer, graphic designer, and business owner. He has a decade of experience in helping other creatives improve their craft and start their own businesses. His writing and research have been featured in notable publications such as The Guardian, PetaPixel, and USA Today. Additionally, his scientific research has been recognized with a cover feature in the prestigious MDPI-owned journal. In his leisure time, he enjoys photography, hiking, and spending time with dogs. Read more
Information provided on Photutorial is for educational purposes only. Your situation is unique and the products and services we review may not be right for your circumstances. We do not offer financial advice, nor do we recommend or advise individuals to buy or sell particular stocks or services. Performance information may have changed since the time of publication. Past performance is not indicative of future results.
Photutorial adheres to strict editorial integrity standards. To the best of our knowledge, all content is accurate as of the date posted, though offers contained herein may no longer be available. The opinions expressed are the author’s alone and have not been provided, approved, or otherwise endorsed by our partners.