Web developer's guide to AVIF images

• squoosh

  266 20,944 5.8 TypeScript

  Make images smaller using best-in-class codecs, right in the browser.

  

We added a preview of the JPEG-XL encoder to https://squoosh.app (and WebPv2) so you can try it with your own images.

In my experience, AVIF tends to outperform JXL in most web use-cases. However, for cases where the image should be really high quality (where the image is core content, like Flickr or Unsplash), the winner is less clear. Also, at those kinds of sizes, JPEG-XL's progressive rendering becomes an important factor.

But seriously, there's so much hype around these image formats, the best thing to do is to test it with your own images and your own eyes.

• webp

  2 7 4.7 C

  webp for the Windows build of ImageMagick

  

WebP and AV1 are patent-encumbered as well.

Google provides a royalty-free patent license, which can be revoked.

https://github.com/ImageMagick/webp/blob/main/PATENTS

Similarly, AOMedia has a "royalty-free patent licensing commitment from all AOMedia members", but that doesn't mean that AV1 users won't have to licence patents from non-members.

http://aomedia.org/press%20releases/the-alliance-for-open-me...

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• chromium

  224 17,574 10.0

  The official GitHub mirror of the Chromium source

  

>You know, I don't really personally care if the successor to JPEG is AVIF (based on AV1), HEIF (based on h.265, pushed by Apple), or WebP (based on V8).

You should care, because those formats aren't equivalent. In many important cases, WebP performs worse than the good old JPEG[1]. It's popular mainly because of Google's brand and cargo culting. HEIF is doomed because it isn't royalty-free.

In my opinion, JPEG XL is the most interesting new format. Cloudinary published many blogposts comparing JPEG XL to the other formats, for example: [2][3]. I really recommend reading them.

BTW, Chromium has recently added support for JPEG XL decoding[4]. It's currently hidden behind a feature flag.

[1] - In medium to large BPP photographic images (which, I believe, is the most common use of lossy image compression) and in generation loss tests.

[2] - https://cloudinary.com/blog/time_for_next_gen_codecs_to_deth...

[3] - https://cloudinary.com/blog/how_jpeg_xl_compares_to_other_im...

[4] - https://chromium.googlesource.com/chromium/src/+/043d3254221...

• jekyll_picture_tag

  2 607 5.0 Ruby

  Easy responsive images for Jekyll.

• av1-avif

  25 437 0.0 HTML

  AV1 Image File Format Specification - ISO-BMFF/HEIF derivative

  

AV1 has some support for progressive images as well. It hasn't been used much in AVIF yet, though there are a couple of PRs that contain some sample images encoded progressively: https://github.com/AOMediaCodec/av1-avif/pull/134 https://github.com/AOMediaCodec/av1-avif/pull/131

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project