⛔  Attention NO AD-BLOCKER was detected!!!  ⚠
 
This site is safe and ad-free.
 
But what about the next website you visit?
 
Surfing the internet without an ad blocker is like using random needles you find on the street!
 
You can find more information and how you can incorporate this message into your page in the following link: Learn more.

Stay cool! Stay safe! Use an ad-blocker! Stay alive
 

Recommended adblocker: Ublock Origin
 


 

Image formats: AVIF, WebP and JPEG XL

TheGreatGreenStar

Images are something used very often online, from blogs (like this one) to Wikipedia articles, to emails. But something most people don't seem to realise the importance of is the file formats used for those images. 

While you may ask, does it really matter? Technically no. But in the same sense that you don't want web-pages to take 5 minutes to load you don't want needless slowdown due to less efficient formats. While I am not an expert within this field, there's still a good amount of media content I see daily in older formats and while that's fine, a good goal is to reduce creation of new media content in the old formats, thus this post to spread the word.

The current format I recommend is WebP, as while AVIF is good, it just isn't supported enough YET.

Note that this data is as of posting this so it may be worth rechecking some limited support things to see if they evolve.

So what are the differences between WebP and AVIF?

WebP:

  • Developed by Google in 2010 
  • Supersedes JPEG, PNG and, GIF (Average minimum of 28% more efficient when converted with only lossless compression from the previous formats)
    • Higher image quality than the older formats as well
    • Average of 29.5% better compression than JPEG images. 
  • Supports Transparency
  • All widely used modern browsers support
    • Easy conversion of other formats to WebP due to wide support
  • Lossless and Lossy support, with full features in both
  • Incremental decoding allowing what's loaded of image to more rapidly be displayed.

 

AVIF:

  • Developed by the Alliance for Open Media in 2019
    • Intended to succeed WebP
    • Compresses with AV1 and uses HEIF container
  • Overall Support in most widely used modern browsers
  • Lossless and Lossy support
  • Animation and transparency support
    • Note this isn't supported in all widely used modern browsers yet
  • Situationally better compression than WebP
    • Sometimes has worse compression than WebP (Average amount larger for worst-case is 38%) usually against lossless.
    • Average of 50% better compression than JPEG
  • Decent conversion support but current conversion tools may actually increase the file size due to not utilising AVIF correctly.
  • HDR Support
    • And overall slightly higher image quality vs WebP.
  • Image must be fully loaded before it can display
  • Max image size of 3840x2160

 

Honorable mention, JPEG XL:

  • Extremely low support (Mainly just Safari)
  • Developed by the group of: Joint Photographic Experts Group, Google and, Cloudinary in 2019.
    • Also intended to succeed WebP
  • For obvious reasons, high compatibility with JPEG, and converting from JPG to JpegXL gives an average of 30% free reduction.
  • On average better compression than AVIF
    • AVIF generally performs better with "Gif" type media 
    • but when it isn't, it can be ~4x larger.
  • Max image size of 1,073,741,823x1,073,741,824
  • Supports progressive decoding
  • Maximum of 32 bits per channel. AVIF supports up to 10.
  • Supports transparency and wide gamut (HDR).

 

So what's the verdict? AVIF with WebP fallback (or just WebP if no fallback is possible). Why? While JPEGXL is very cool, it simply doesn't have enough support to be viable for use right now. AVIF is in a similar situation, and WebP is something almost everyone though perhaps not every service can use right now.

 

Sources and Further reading/research (Note that some sources contain sources thereof):