[COM-3172]: add avif support

example/react-entry.tsx

@@ -4,8 +4,8 @@ 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.
-import '../src/utils/webpDetector';
+// Adds 'webp' or 'avif' class to html element if the browser supports it.
+import '../src/utils/imgSupportDetector';
 
 const oneImageForAllBreakpoints = require.context('./images/oneImageForAllBreakpoints');
 const differentBreakpoints = require.context('./images/differentBreakpoints');

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/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,14 @@
+// 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") };
+
+  // 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;
 };
@@ -68,7 +69,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 +87,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,
@@ -107,6 +109,18 @@ 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(webpSrcSet) as string[]),