fix(avif): COM-3172 set avif generation under the flag

Author: ArtyomResh

example/react-entry.tsx

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csssr/csssr.images",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Utilities for Webpack and React to simplify images workflow",
   "main": "dist/index.js",
   "types": "dist",

src/utils/imgSupportDetector.ts

@@ -3,15 +3,12 @@
 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") };
-  };
+  // before we remove `generateAvif` flag, we want to detect webp support even if avif support is present
+  const webp = new Image();
+  webp.src = "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
+  webp.onload = () => { document.documentElement.classList.add("webp") };
 }
 
 imgSupportDetector();

src/webpack/loader.ts

@@ -19,6 +19,7 @@ export type LoaderOptions = {
     disable: boolean;
     imagesHost: string;
     host: string;
+    generateAvif: boolean;
   };
   originalPixelRatio: Dpr;
 };
@@ -98,10 +99,6 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
       order,
       breakpointMedia,
       srcSets: [
-        {
-          extension: 'avif',
-          srcSet: avifSrcSet,
-        },
         {
           extension: 'webp',
           srcSet: webpSrcSet,
@@ -112,9 +109,20 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
         },
       ],
     };
+
+    if (options.imgproxy.generateAvif) {
+      data.srcSets.unshift({
+        extension: 'avif',
+        srcSet: avifSrcSet,
+      })
+
+      imageUrls.push(
+        ...(Object.values(avifSrcSet) as string[]),
+      );
+    } 
+    
     // 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[]),
     );