The standard image formats for the web are JPG, PNG, and GIF. JPG allows for compressing photos, GIF are usually for short (pixelated) animations, and PNG are for transparent, or flat graphics.
In recent years, WebP and AVIF have come along in an attempt to offer better compression and smaller file sizes. At this point these formats are compatible across browsers and operating systems, including desktop and mobile. And major graphics editing tools support them as well.
Formats compared
For a simple comparison test, I took an abstract image at 2000x1200 pixels. Using Pixelmator, I exported the image into the five compatible web formats. In this blog post’s featured image, you can see a zoomed in portion that shows the difference in compression quality for each. These were the file size differences:
- JPG - 260KB, at 80% compression quality
- PNG - 2.3MB, with advanced compression
- GIF - 1.3MB, standard GIF compression
- WebP - 161KB, at 80% compression quality
- AVIF - 469KB, at 80% compression quality
Between quality and file size
Based on the numbers, WebP is the lowest in file size. But JPG isn’t that much higher. Somehow AVIF is considerably higher. And PNG and GIF are way too high. Which is why what's in the image is what should decide the format you go with.
Between JPG, WebP, and AVIF, you can see that AVIF is the sharpest, with WebP having some noticeable compression artifacts, and JPG having the most artifacts. So based on quality and file size, it would seem like WebP is the best option in this case.
Artifacts and pixel density
However, the artifacts are shown at 4x zoom of the original image. Zoomed out, and viewed at 2x pixel density, I honestly cannot tell the difference between the three formats. Which is why I go down to 80% quality when exporting because the 2x pixel density essentially makes it so you can’t see the artifacting!
Your results may vary, there is no one-size-fits-all answer. But to me, I’m not sure how much the newly added WebP and AVIF formats are really making a difference for the web. And anecdotally, it’s rare that I come across sites that use them at all.
Blocks Edit supports any web image format, including the modern ones, and will automatically scale uploaded images to the set placeholder image size, and compress them.
