Web developer's guide to AVIF images

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • OPS - Build and Run Open Source Unikernels
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
  • squoosh

    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

    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.


    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.


  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • chromium

    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

    Easy responsive images for Jekyll.

  • av1-avif

    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

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts