[COM-3172]: add avif support

Author: maksim-kononov-csssr

example/react-entry.tsx

@@ -5,7 +5,7 @@ import { backgroundCssSmart } from '../src/utils/backgroundCss';
 import { getOriginal } from '../src/utils';
 
 // Adds 'webp' class to html element if the browser supports webp.
-import '../src/utils/webpDetector';
+import '../src/utils/imgSupportDetector';
 
 const oneImageForAllBreakpoints = require.context('./images/oneImageForAllBreakpoints');
 const differentBreakpoints = require.context('./images/differentBreakpoints');

src/utils/backgroundCss.ts

@@ -9,7 +9,15 @@ const breakpointMedia = (media: string | null): ((nestedCss: string) => string)
 };
 
 const getSelector = (selector: string, extension: string) => {
-  return extension === 'webp' ? `html.webp ${selector}` : selector;
+  if (extension === 'avif') {
+    return `html.avif ${selector}`;
+  }
+
+  if (extension === 'webp') {
+    return `html.webp ${selector}`;
+  }
+
+  return selector;
 };
 
 const srcSetCss = (selector: string, sources: ExtensionSrcSet[]): string => {

src/utils/imgSupportDetector.ts

@@ -0,0 +1,17 @@
+// https://avif.io/blog/tutorials/use-avif-in-css/
+
+function imgSupportDetector () {
+  const avif = new Image();
+  avif.src = "data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjEAAACgbWV0YQAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAC8AAAAGwAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAARWlwcnAAAAAoaXBjbwAAABRpc3BlAAAAAAAAAAQAAAAEAAAADGF2MUOBAAAAAAAAFWlwbWEAAAAAAAAAAQABAgECAAAAI21kYXQSAAoIP8R8hAQ0BUAyDWeeUy0JG+QAACANEkA=";
+
+  avif.onload = () => { document.documentElement.classList.add("avif") };
+
+  avif.onerror = () => {
+    const webp = new Image();
+    webp.src = "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
+
+    webp.onload = () => { document.documentElement.classList.add("webp") };
+  };
+}
+
+imgSupportDetector();

src/utils/webpDetector.ts

@@ -68,7 +68,7 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
     (a, b, imagePath) => imagePath,
   );
 
-  let webpSrcSet: SrcSet, originalExtensionSrcSet: SrcSet, data: OrderedBreakpointSource;
+  let avifSrcSet: SrcSet, webpSrcSet: SrcSet, originalExtensionSrcSet: SrcSet, data: OrderedBreakpointSource;
   // Disables picture processing, srcSet is generated only for the original image type
   if (options.imgproxy.disable) {
     data = {
@@ -86,6 +86,7 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
     };
   } else {
     const buildUrlsForPixelRatios = getImgproxyUrlBuilder(options.imgproxy);
+    avifSrcSet = buildUrlsForPixelRatios(pixelRatios, outputImagePath, 'avif');
     webpSrcSet = buildUrlsForPixelRatios(pixelRatios, outputImagePath, 'webp');
     originalExtensionSrcSet = buildUrlsForPixelRatios(
       pixelRatios,
@@ -97,6 +98,10 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
       order,
       breakpointMedia,
       srcSets: [
+        {
+          extension: 'avif',
+          srcSet: avifSrcSet,
+        },
         {
           extension: 'webp',
           srcSet: webpSrcSet,
@@ -109,6 +114,7 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
     };
     // Add links to images via imgproxy to the global object
     imageUrls.push(
+      ...(Object.values(avifSrcSet) as string[]),
       ...(Object.values(webpSrcSet) as string[]),
       ...(Object.values(originalExtensionSrcSet) as string[]),
     );