Add native sharp avif support (google#64)

README.md

@@ -8,8 +8,8 @@ Based on the awesome [eleventy-base-blog](https://github.com/11ty/eleventy-base-
 
 ## Demo
 
-* [Netlify Demo](https://eleventy-high-performance-blog-sample.industrialempathy.com/)
-* [Original site this template was based on](https://www.industrialempathy.com/)
+- [Netlify Demo](https://eleventy-high-performance-blog-sample.industrialempathy.com/)
+- [Original site this template was based on](https://www.industrialempathy.com/)
 
 ## Getting Started
 
@@ -36,11 +36,13 @@ npm install
 ```
 
 ### 5. Build, serve, watch and test
+
 ```
 npm run watch
 ```
 
 ### 6. Build and test
+
 ```
 npm run build
 ```
@@ -54,7 +56,7 @@ npm run build
 
 ```css
 :root {
-  --primary: #E7BF60;
+  --primary: #e7bf60;
   --primary-dark: #f9c412;
 }
 ```
@@ -75,7 +77,7 @@ npm run build
 
 - 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 instability of the encoder) and [webp](https://developers.google.com/speed/webp) and generates `picture` element.
+- Transcodes images to [AVIF](<https://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)>) 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`).
 - **Lazy layout** of images and placeholders using [`content-visibility: auto`](https://web.dev/content-visibility/#skipping-rendering-work-with-content-visibility).
@@ -109,7 +111,7 @@ npm run build
 - Supports locally serving Google Analytics's JS and proxying it's hit requests to a Netlify proxy (other proxies could be easily added).
 - Support for noscript hit requests.
 - Avoids blocking onload on analytics requests.
-- To turn this on, specify `googleAnalyticsId` in `metadata.json`. 
+- To turn this on, specify `googleAnalyticsId` in `metadata.json`.
 
 ### DX features
 

_11ty/img-dim.js

@@ -26,8 +26,6 @@ const blurryPlaceholder = require("./blurry-placeholder");
 const srcset = require("./srcset");
 const path = require("path");
 
-const ACTIVATE_AVIF = false;
-
 /**
  * Sets `width` and `height` on each image, adds blurry placeholder
  * and generates a srcset if none present.
@@ -83,17 +81,13 @@ const processImage = async (img, outputPath) => {
     const avif = doc.createElement("source");
     const webp = doc.createElement("source");
     const jpeg = doc.createElement("source");
-    if (ACTIVATE_AVIF) {
-      await setSrcset(avif, src, "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");
-    if (ACTIVATE_AVIF) {
-      picture.appendChild(avif);
-    }
+    picture.appendChild(avif);
     picture.appendChild(webp);
     picture.appendChild(jpeg);
     img.parentElement.replaceChild(picture, img);

_11ty/srcset.js

@@ -22,7 +22,6 @@
 const { promisify } = require("util");
 const exists = promisify(require("fs").exists);
 const sharp = require("sharp");
-const avif = require("./avif");
 
 /**
  * Generates sensible sizes for each image for use in a srcset.
@@ -48,18 +47,14 @@ async function resize(filename, width, format) {
   if (await exists("_site" + out)) {
     return out;
   }
-  if (format == "avif") {
-    await avif("_site" + filename, "_site" + out, width);
-  } else {
-    await sharp("_site" + filename)
-      .rotate() // Manifest rotation from metadata
-      .resize(width)
-      [format]({
-        quality: 60,
-        reductionEffort: 6,
-      })
-      .toFile("_site" + out);
-  }
+  await sharp("_site" + filename)
+    .rotate() // Manifest rotation from metadata
+    .resize(width)
+    [format]({
+      quality: 60,
+      reductionEffort: 6,
+    })
+    .toFile("_site" + out);
 
   return out;
 }