Turn off avif

README.md

@@ -73,9 +73,9 @@ npm run build
 
 #### Images
 
-- Transcodes images to [AVIF](https://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)) (the latest widely supported next-gen image codec) and [webp](https://developers.google.com/speed/webp) and generates `picture` element.
 - Generates multiple sizes of each image and uses them in **`srcset`**.
 - Generates a **blurry placeholder** for each image (without adding an HTML element or using JS).
+- Transcodes images to [AVIF](https://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)) (currently off-by-default due to instabillity of the encoder) and [webp](https://developers.google.com/speed/webp) and generates `picture` element.
 - **Lazy loads** images (using [native `loading=lazy`](https://web.dev/native-lazy-loading/)).
 - **Async decodes** images (using `decoding=async`).
 - **Avoids CLS impact** of images by inferring and providing width and height (Supported in Chrome, Firefox and Safari 14+).

_11ty/img-dim.js

@@ -25,6 +25,8 @@ const sizeOf = promisify(require("image-size"));
 const blurryPlaceholder = require("./blurry-placeholder");
 const srcset = require("./srcset");
 
+const ACTIVATE_AVIF = false;
+
 /**
  * Sets `width` and `height` on each image, adds blurry placeholder
  * and generates a srcset if none present.
@@ -56,13 +58,17 @@ const processImage = async (img) => {
     const avif = doc.createElement("source");
     const webp = doc.createElement("source");
     const jpeg = doc.createElement("source");
-    await setSrcset(avif, src, "avif");
+    if (ACTIVATE_AVIF) {
+      await setSrcset(avif, src, "avif");
+    }
     avif.setAttribute("type", "image/avif");
     await setSrcset(webp, src, "webp");
     webp.setAttribute("type", "image/webp");
     await setSrcset(jpeg, src, "jpeg");
     jpeg.setAttribute("type", "image/jpeg");
-    picture.appendChild(avif);
+    if (ACTIVATE_AVIF) {
+      picture.appendChild(avif);
+    }
     picture.appendChild(webp);
     picture.appendChild(jpeg);
     img.parentElement.replaceChild(picture, img);

test/test-generic-post.js

@@ -117,25 +117,26 @@ describe("check build output for a generic post", () => {
         expect(pictures.length).to.greaterThan(0);
         const img = images[0];
         const picture = pictures[0];
-        const sources = picture.querySelectorAll("source");
-        expect(sources).to.have.length(3);
+        const sources = Array.from(picture.querySelectorAll("source"));
+        expect(sources).to.have.length(2);
         expect(img.src).to.match(/\/img\/remote\/\w+\.jpg/);
         expect(metaImage).to.equal(URL + img.src);
-        const avif = sources[0];
-        const webp = sources[1];
-        const jpg = sources[2];
+        // Comment back in when avif is stable enough.
+        //const avif = sources.shift();
+        const webp = sources.shift();
+        const jpg = sources.shift();
         expect(jpg.srcset).to.match(
           /\/img\/remote\/\w+-1920w.jpg 1920w, \/img\/remote\/\w+-1280w.jpg 1280w, \/img\/remote\/\w+-640w.jpg 640w, \/img\/remote\/\w+-320w.jpg 320w/
         );
         expect(webp.srcset).to.match(
           /\/img\/remote\/\w+-1920w.webp 1920w, \/img\/remote\/\w+-1280w.webp 1280w, \/img\/remote\/\w+-640w.webp 640w, \/img\/remote\/\w+-320w.webp 320w/
         );
-        expect(avif.srcset).to.match(
-          /\/img\/remote\/\w+-1920w.avif 1920w, \/img\/remote\/\w+-1280w.avif 1280w, \/img\/remote\/\w+-640w.avif 640w, \/img\/remote\/\w+-320w.avif 320w/
-        );
+        //expect(avif.srcset).to.match(
+        //  /\/img\/remote\/\w+-1920w.avif 1920w, \/img\/remote\/\w+-1280w.avif 1280w, \/img\/remote\/\w+-640w.avif 640w, \/img\/remote\/\w+-320w.avif 320w/
+        //);
         expect(jpg.type).to.equal("image/jpeg");
         expect(webp.type).to.equal("image/webp");
-        expect(avif.type).to.equal("image/avif");
+        //expect(avif.type).to.equal("image/avif");
         expect(jpg.sizes).to.equal("(max-width: 608px) 100vw, 608px");
         expect(webp.sizes).to.equal("(max-width: 608px) 100vw, 608px");
         expect(img.height).to.equal(850);