[Article] Web Image Formats - A quick comparison of PNG, JPG, WebP, & AVIF

I think the AVIF logo is probably the snazziest of the bunch, while the PNG logo is probably one of the most '90s things I've seen in a while.

Simply put, this is gonna be a quick and dirty comparison of the performance of some of the most common rasterized image formats used for storing images on the web - .png, .jpg, .webp, and .avif. Here’s a quick synopsis of each:

• Portable Network Graphics (PNG) – Introduced in 1996, .png is a lossless raster image format designed to be a patent-free replacement to the Graphics Interchange Format (GIF). The lossless compression used means that images are preserved faithfully to the pixel at the cost of larger file sizes. Modern lossless image formats tend to be smaller owing to more sophisticated modern compression technologies, but PNG generally boasts superior compatibility due to its veterancy.

• Joint Photographics Expert Group (JPG/JPEG) – The oldest image format on this list, .jpg/.jpeg is a lossy raster image format introduced in 1992 chiefly designed for storing photographic images at reasonable sizes. Unlike the other 3 image formats here, alpha channel transparency is not supported in JPG and an image featuring transparency will have it converted into whitespace upon conversion to JPG.

• WebP – An image format officially released in 2018 by Google, .webp is a versatile raster image format that supports both lossy and lossless compression with far superior efficiency in file size in each compared to its predecessors while still being as easy to use.

• AV1 Image File Format (AVIF) – Designed primarily for use in multimedia containers such as video, .avif is a lossy/lossless raster image format released in 2019. AVIF offers similar features to WebP as well as a superior suite of options for colour depth. Encoding images in AVIF can be more time intensive than the previous formats however, especially without a GPU which natively supports it.

While .gif can be used for still images as well, it doesn’t see regular use these days for reasons of quality and performance. Even most animations displayed on sites these days claiming to be GIFs are actually just looping MP4/WebM video files with the playback controls hidden.

To give some definitions for some key terms featured there for the non-technical readers, raster graphics are images defined by a grid of squares (pixels) with assigned colour values that make up the whole image. The alternative is vector graphics, which instead define an image by specifying geometry and curves mathematically, which allows for an image to scale up and down in size much more naturally than raster graphics in most cases. I won't be covering any vector graphics formats in this article as their use tends to be far more niche, but the most common example is .svg, the Scalable Vector Graphics (SVG) format, which you'll often see used for the likes of logos or flags on sites such as Wikipedia. A lossless image format is an image format which always perfectly stores the image as it was when the save button was pressed. This is in contrast to a lossy image format, which will use tricks such as averaging and smearing colours together to further reduce the image size, hence the name as detail is irrevocably lost in the process.

My methodology is simple; I take a 759x1000 PNG image and using Paint.NET 5.0.12 I save a new version of it as each of the other file types, using the 100% quality setting for the first batch, 85% quality for the second batch, and 50% quality for the third batch. The first batch is to represent high quality image storage (demonstrating both lossless and lossy in the cases of WebP and AVIF), while the second batch is more representative of the level of compression desirable for online usage to keep file sizes lower without any serious impact to image quality. The third batch is a steep level of compression I could only imagine being used by a website churning out massive amounts of low quality content (such as a content mill or meme website) but I figured it would still be an interesting comparison. The completed charts feature all the formatted images compiled together and saved as a lossless WebP to accurately preserve and display any artifacting present from their conversions.

As a purely lossless image format, the PNG serves as an unchanging baseline to compare the others against. WebP images are saved using the ‘Default’ preset. JPG and AVIF images are both saved with 4:2:2 Chroma Subsampling for parity between the two image formats. AVIF images are saved using the ‘Medium’ encoder preset – while smaller file sizes are possible using even slower presets, I feel most users as of the time of writing probably don’t want to have to wait that much longer for their images to save.

Now, let’s get to the substance of this article, the performance breakdown of each image format. I’ve prepared 3 distinctly different types of image for the test to provide a varied look at how each format deals with them.

Image 1 - Photograph

For the first image to test, I chose a photograph of my cats Char & CC snoozing together on their bed by the back door, really showing off that I need to give the doormat a quick vacuum, but for the purposes of this test those extra gritty details are probably useful! Photographs tend to be dense with detail with constantly shifting shades and tones you won't find in many digitally created images, however a lot of those details can be smudged and compressed without any major loss to image clarity. As a format designed for use with photographs in particular, this should be the type of image JPG is most comfortable with.

100% Quality

Unsurprisingly, the PNG version of this image is the largest image that will be featured in this entire article, as the original image is rich with fine detail such as the detail present on Char & CC's tortoiseshell fur and the many uneven textures present throughout, from the material of the bed to the concrete surface outside. While JPG shows a solid reduction in size compared to PNG, WebP almost matches that again for JPG and quickly shows up the older format in terms of efficiency at minimal levels of compression. Even the lossless version of the WebP conversion almost matches the lossy JPG format in terms of filesize.

85% Quality

Once we drop the quality level below 100% however, JPG makes quite the resurgence and draws very close to the size of the WebP image while even managing to defeat the younger AVIF format in terms of file size. Perhaps if I was using a slower AVIF encoding preset I'd be able to push the AVIF version to a smaller size than the JPG, but for now it looks like the older format can still do a decent job within its comfort zone. WebP still proves to be the best of the bunch overall however, which will become a pretty common trend throughout this article.

50% Quality

I've gotta say, it was pretty interesting to see AVIF suddenly match JPG in terms of compression efficiency again after having lost to it by a notable margin in the 85% quality comparison. I can only speculate that perhaps JPG is superior when it comes to the initial stages of compression but AVIF's algorithms prove superior the more you try to compress it tighter and tighter. The differences in the file sizes are pretty negligible between formats at this stage, though WebP still maintains the overall lead by just over 10KB.

Image 2 - 2D Illustrated Style with Transparency

For the next set of tests, I used NovelAI's Image Generation service to generate an anime-style image of my character Perrine and then manually scrubbed out the background to make it transparent. The main thing I sought to examine with this test was to see if the presence of transparency had any major impact on the differences in file size efficiency between the tested images. JPG, of course, doesn't support alpha channel transparency and will instead render it as whitespace, which I figured was worth showing off for those who mightn't grasp what that entails. I think it goes without saying though, but please don't save transparent images as JPGs.

_{Honestly, to show my hand early, please just stop saving images as JPGs in general.}

100% Quality

Moving to an image consisting heavily of flat colours with a limited palette, we see the younger formats really hit their strides. While the 100% quality lossy WebP managed to reduce the photograph of Char & CC down to a third of its size, here we see it achieve a reduction down to an eighth of the size of the original PNG. AVIF similarly sees an improvement in compression efficiency from a half on image 1 to about a third on image 2, while JPG performs about the same as it did on the prior image. Lossless WebP and AVIF also perform significantly better than on the photograph prior, unsurprisingly.

85% Quality

Once more, just that slight reduction in quality sees massive gains in file size reduction immediately, bringing every single lossy format down to double digit values. At these sizes, I can't imagine there's much more gains in reduction to be had without utterly butchering the image's quality. WebP continues to lead the pack, offering fantastically small sizes without any waiting on tedious rendering processes.

50% Quality

As expected, gains here are pretty minimal for all formats other than JPG, but again, you really shouldn't be butchering transparent images by saving them as JPGs. While a case could probably be made for the 50% quality on image 1 as there were still solid gains made there, here there's really no reason to consider anything below like 80% quality.

Image 3 - Minimalist Corporate Art

Ah yes, the much loathed minimalist art style so often employed by big tech firms. In the process of putting this article together, I learned that it's apparently named 'Corporate Memphis.' Inoffensive and lacking in any real character or personality, I think it makes for an interesting test case in 2 regards; 1) the minimal amount of detail featured lets us test the performance of the formats in regards to just storing very general regions of colour, and 2) a lot of the people who actually care about things like file size and storage efficiency other than massive nerds are probably the people who are going to be filling up webservers with this shit. For this test, I took the public domain image featured on the Corporate Memphis Wikipedia article and added a bland ol' pale blue background that felt in-line with the style.

100% Quality

This is probably the most interesting chart of this entire article honestly; the JPG, despite being a lossy format designed to shrink image sizes, has ended up being larger than the PNG representation of the image. I can only hazard a guess that this might be due to it simply not really being designed to store such simple, flat images efficiently, especially when told to maintain 100% quality on said image. Its also interesting to see both the lossy and lossless WebP conversions end up more or less the same size by a matter of bytes while the lossless AVIF ends up being the same size as the original PNG.

85% Quality

JPG sheds off all that strange bloat it introduced once it's allowed to eschew quality and do its compression thing and slips below the size of the PNG where it always should have been. Interestingly we also see our first big win for AVIF here, with it finally overtaking WebP for smallest image size. I suspect the newer rendering technology employed versus WebP's likely gave it the edge in compression in an image with only like 10 or 11 colours present.

50% Quality

AVIF achieves the first and only single digit file size of the article as it shrinks the image right down to a measly 7KB in size, and without any real noticeable graphical distortion either. JPG continues to lag behind the 2 newcomers in size while also displaying the most prevalent compression artifacting visible on the edges of the colour boundaries. WebP also displays some distortion at the edges of its colours, but still less than the JPG does and at a much smaller size still.

Conclusions

As things currently stand, WebP is probably the best all-round format to use for static web images at the moment. Its ease of use, versatility, widespread adoption by modern devices & software, and fantastic file sizes really give it an edge over the competition. Once AV1 equipped GPUs start to replace older model cards I suspect the paradigm will probably shift in AVIF's favour instead, but with the fantastic longevity GPUs have had since around the era of Nvidia's GTX1000 series I suspect it may take some time for that to really come about.

JPG meanwhile is really starting to show its age. It has the least features of all formats presented here and even in its own area of expertise it sees itself beaten out by the newer formats. Probably the only advantage it still holds at all is the all-pervasive compatibility it holds thanks to its veterancy, but otherwise I would advise people to just stop using JPG entirely if possible.

PNG has always been the bulky but accurate image format and it'll probably stay that way for the forseeable future. Lossless WebP and AVIF arguably do its job better now, but it does still boast the advantage of the level of compatibility JPG also enjoys while also having greater functionality than it thanks to its support of alpha channel transparency. There's also something to be said for the certainty that seeing an image saved as a PNG brings - if you see a .png, you KNOW it's a lossless image, whereas due to it being an optional setting in WebP and AVIF you can't always tell if they are just by looking at the file extension. Coupling that with PNG being a standard when it comes to texture work in 3D applications, PNG will likely stick around for decades to come.

And there we have it, my tests and thoughts on what are probably the 4 most relevant web image formats. In hindsight I probably should've also included an image with some text and maybe some graph-like imagery to better test the effect compression artifacting had on their readability, but oh well. Maybe when a few more new image formats come along such as JPEG XL and hit the mainstream I'll do a new series of tests and make sure to cover that base too. Time will tell...

But yeah WebP rocks and if you're running a website you should use it.