Setup automatic image optimization pipeline

Author: parlough

.gitignore

@@ -1,5 +1,6 @@
 _cache/
 _site/
+.cache
 .*-cache
 .*-metadata
 .buildlog

eleventy.config.js

@@ -19,6 +19,7 @@ import yaml from 'js-yaml';
 
 import * as path from 'node:path';
 import * as sass from 'sass';
+import {eleventyImageTransformPlugin} from '@11ty/eleventy-img';
 
 // noinspection JSUnusedGlobalSymbols
 /**
@@ -92,7 +93,9 @@ export default function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('src/content/assets/dash');
   eleventyConfig.addPassthroughCopy('src/content/assets/js');
   eleventyConfig.addPassthroughCopy({'site-shared/packages/inject_dartpad/lib/inject_dartpad.js': 'assets/js/inject_dartpad.js'});
-  eleventyConfig.addPassthroughCopy('src/content/assets/img', { expand: true });
+  eleventyConfig.addPassthroughCopy('src/content/assets/img/404-bg-pattern.jpg');
+  eleventyConfig.addPassthroughCopy('src/content/assets/img/logo');
+  eleventyConfig.addPassthroughCopy('src/content/assets/img/social');
   eleventyConfig.addPassthroughCopy('src/content/f', {
     expand: true,
     filter: /^(?!_).+/,
@@ -118,6 +121,37 @@ export default function (eleventyConfig) {
 
       return content;
     });
+
+    // Optimize all images, generate an avif, webp, and png version,
+    // and indicate they should be lazily loaded.
+    // Save in `_site/assets/img` and update links to there.
+    eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+      extensions: 'html',
+      formats: ['avif', 'webp', 'png', 'svg'],
+      svgShortCircuit: true,
+      widths: ['auto'],
+      defaultAttributes: {
+        loading: 'lazy',
+        decoding: 'async',
+      },
+      urlPath: '/assets/img/',
+      outputDir: '_site/assets/img/',
+    });
+  } else {
+    // To be more consistent with the production build,
+    // don't optimize images but still indicate they should be lazily loaded.
+    // Then save in `_site/assets/img` and update links to there.
+    eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+      extensions: 'html',
+      formats: ['auto'],
+      widths: ['auto'],
+      defaultAttributes: {
+        loading: 'lazy',
+        decoding: 'async',
+      },
+      urlPath: '/assets/img/',
+      outputDir: '_site/assets/img/',
+    });
   }
 
   eleventyConfig.setQuietMode(true);

firebase.json

@@ -5,12 +5,19 @@
     "trailingSlash": false,
     "headers": [
       {
-        "source": "**/*.@(jpg|jpeg|gif|png|md|txt|json|webp|webm|svg|css|js)",
+        "source": "**/*.@(avif|jpg|jpeg|gif|png|md|txt|json|webp|webm|svg|css|js)",
         "headers": [
           { "key": "Cache-Control", "value": "max-age=28800" },
           { "key": "Access-Control-Allow-Origin", "value": "*" }
         ]
       },
+      {
+        "source": "/assets/img/*.@(jpg|jpeg|png|webp|avif)",
+        "headers": [
+          { "key": "Cache-Control", "value": "max-age=604800" },
+          { "key": "Access-Control-Allow-Origin", "value": "*" }
+        ]
+      },
       {
         "source": "**",
         "headers": [

package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.10",
+    "@11ty/eleventy-img": "^4.0.2",
     "firebase-tools": "^13.8.0",
     "hast-util-from-html": "^2.0.1",
     "hast-util-select": "^6.0.2",