DEV Community

Detect AVIF image support to use in your CSS

Joan León on December 06, 2020

AVIF is a next generation image format, in the moment to write this post, the support is only by Chrome 85 and Firefox 77 under a flag. W3C are wo...

Read full post

Mountain/\Ash • Feb 17 '21

I've combined your code with the older [very similar] webp code from ourcodeworld.com/articles/read/630... to create a version that will work for both AVIF and WebP.

async function supportsEncode() {
  const fallbackclass = 'old';
  if (!this.createImageBitmap) return fallbackclass;

  const avifData =
    'data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjEAAACgbWV0YQAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAC8AAAAGwAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAARWlwcnAAAAAoaXBjbwAAABRpc3BlAAAAAAAAAAQAAAAEAAAADGF2MUOBAAAAAAAAFWlwbWEAAAAAAAAAAQABAgECAAAAI21kYXQSAAoIP8R8hAQ0BUAyDWeeUy0JG+QAACANEkA=',
    webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=',
    avifblob = await fetch(avifData).then((r) => r.blob()),
    webpblob = await fetch(webpData).then((r) => r.blob());
  return createImageBitmap(avifblob).then(
    () => 'avif',
    () => {
      return createImageBitmap(webpblob).then(() => 'webp', () => fallbackclass)
    }
  )
};

(async () => {
  const classImg = await supportsEncode();
  document.body.classList.add(classImg);
})()

Today in Safari 14.0.2 it returns old in the Tech Preview Safari 14.2 it returns webp
In Firefox 85.0.2 is returns webp and in Developer Edition 86.0b9 it returns avif
Chrome Version 88.0 returns avif as expected

li.li • Apr 20 '23

Chrome Version 112.0.5615.121 (Official Build) (x86_64) returns webp which is not right.

Mountain/\Ash • May 1 '23

Ensure you checkout the updated codepen code which was added to the comments 2yrs ago. It's returning correctly for the latest version of Chrome (aka, the version you've listed).

Mountain/\Ash • Feb 18 '21

Further to yesterday's comment; I've cleaned this up at codepen.io/mountainash/pen/eYBRpzV (not creating the WebP blob if the AVIF is OK)

justinschmitz97 • Feb 23 '21

I just compared this to my snippet on avif.io/blog/tutorials/use-avif-in...
Your script is at 900 chars, mine is 600 chars. Is there any benefit I don't see? I'm not criticizing your work, I'm actually curious, cause then I'd implement your version with credits.

Mountain/\Ash • Feb 23 '21

I wasn't aware of your's; it's new to me (and this article and the comments section). Looks good -> use it.

justinschmitz97 • Feb 23 '21

Awesome, thanks for clarifying, I appreciate it. :)

Ivan Maslov • Sep 11 '21 • Edited

Who googled this topic I have an alternate sync version for you, so you don't need to wait till onload or make some promises:

const { userAgentData, userAgent } = window.navigator;
const edge = Boolean(userAgentData?.brands.find(({ brand }) => brand === 'Microsoft Edge')); // doesn't, chromium though
const chromium85 = !edge && Boolean(userAgentData?.brands.find(({ brand, version }) => brand === 'Chromium' && parseFloat(version, 10) >= 85));
const ff93 = !chromium85 && parseFloat(userAgent.split('Firefox/').pop(), 10) >= 93;
const sb14 = !ff93 && parseFloat(userAgent.split('SamsungBrowser/').pop(), 10) >= 14;
const avifSupport = chromium85 || ff93 || sb14;

thanks))

p.s.: check this before simple copy it caniuse.com/avif maybe something has updated

Mountain/\Ash • Mar 14 '23

UserAgent lookups to define feature support should be a last resort - it's always better to test for the feature - you never know when a new browser will come out and make the test cases fail leaving the user with a suboptimal experience.

Wojciech Maj • Jan 25 '21

Update: Firefox 86 now has AVIF support on by default.