Here are two simple Async/Await JavaScript scripts that will detect and indicate browser support for the AVIF and WEBP image formats. The scripts shown here next indicate the results of the support test by adding a class to the document element’s We place the script immediately following the tag. <body> class list. <body> The method used here is to attempt to create an image object in the test format from a base64 encoded representation of the image. Here below is the content of the two scripts. <body>
<script> //place this script just under the <body> tag
async function supportsAvif() { // check for avif image support
  const fallbackclass = 'no-avif'
  if (!this.createImageBitmap) return fallbackclass

  const avifData = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A='
  avifblob = await fetch(avifData).then((r) => r.blob());
  return createImageBitmap(avifblob)
		.then(() => 'avif')
		.catch(() => fallbackclass)
}
(async () => {
  document.body.classList.add(await supportsAvif()) //show result in body class
})()

async function supportsWebp() { // check for webp image support
  const fallbackclass = 'no-webp'
  if (!this.createImageBitmap) return fallbackclass

  const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='
  webpblob = await fetch(webpData).then((r) => r.blob());
  return createImageBitmap(webpblob)
  		.then(() => 'webp')
		.catch(() => fallbackclass)
}
(async () => {
  document.body.classList.add(await supportsWebp()) //show result in body class
})()
</script>
 ...
 ...
 </body> Now the particulars of what you do with this added class information will be left up to you, but one idea might be to toggle an image object’s visibility Here is another simple script relevant to image format support. As it happens Apple Mobile Safari does not support AVIF files. What is problematic is that it claims to do so, thus giving you an opportunity to see if your alt text displays properly. Less offensive but still problematic is Firefox, which supports the AVIF format but does not support AVIF animations. You get a still image preview. This example script is inserted into the document <head> section and for our example it does a simple redirect to another page without AVIF content. Certainly not the most elegant solution but it does the job intended and when Apple and Firefox catch up it will be easy to remove. ☺ <head>
 ...
<script>
// safari mobile does not display AVIF or AVIF animation files
// Firefox does not display AVIF aninmations as animated
window.addEventListener("load", () => {
    //console.info("index "+navigator.userAgent.indexOf("Edg"));
    console.info("user agent "+navigator.userAgent);
  if ((navigator.userAgent.indexOf("iPhone") != -1 ) || (navigator.userAgent.indexOf("Firefox") != -1 )) {
	  console.info("its an iPhone or Firefox");
              //window.location.replace("https://new-URL");
  } else {
    console.info("not an iPhone or Firefox"); }
  });
</script>
...
</head> Hopefully these pieces will be of benefit to managing your own web content. As always, Comments, Criticisms, and Suggestions are welcome.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Testing for Image Format Support Using Simple JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Bibliography Generator From Browser Bookmarks: How It Works

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

A Bibliography Generator From Browser Bookmarks: How It Works

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps