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 <body> element’s class list. We place the script immediately following the <body> tag.
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.