Skip to content

Commit 93c8d2d

Browse files
committed
Setup automatic image optimization pipeline
1 parent 6c3ed12 commit 93c8d2d

14 files changed

+425
-26
lines changed

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
_cache/
22
_site/
3+
.cache
34
.*-cache
45
.*-metadata
56
.buildlog

eleventy.config.js

+35-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import yaml from 'js-yaml';
1919

2020
import * as path from 'node:path';
2121
import * as sass from 'sass';
22+
import {eleventyImageTransformPlugin} from '@11ty/eleventy-img';
2223

2324
// noinspection JSUnusedGlobalSymbols
2425
/**
@@ -92,7 +93,9 @@ export default function (eleventyConfig) {
9293
eleventyConfig.addPassthroughCopy('src/content/assets/dash');
9394
eleventyConfig.addPassthroughCopy('src/content/assets/js');
9495
eleventyConfig.addPassthroughCopy({'site-shared/packages/inject_dartpad/lib/inject_dartpad.js': 'assets/js/inject_dartpad.js'});
95-
eleventyConfig.addPassthroughCopy('src/content/assets/img', { expand: true });
96+
eleventyConfig.addPassthroughCopy('src/content/assets/img/404-bg-pattern.jpg');
97+
eleventyConfig.addPassthroughCopy('src/content/assets/img/logo');
98+
eleventyConfig.addPassthroughCopy('src/content/assets/img/social');
9699
eleventyConfig.addPassthroughCopy('src/content/f', {
97100
expand: true,
98101
filter: /^(?!_).+/,
@@ -118,6 +121,37 @@ export default function (eleventyConfig) {
118121

119122
return content;
120123
});
124+
125+
// Optimize all images, generate an avif, webp, and png version,
126+
// and indicate they should be lazily loaded.
127+
// Save in `_site/assets/img` and update links to there.
128+
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
129+
extensions: 'html',
130+
formats: ['avif', 'webp', 'png', 'svg'],
131+
svgShortCircuit: true,
132+
widths: ['auto'],
133+
defaultAttributes: {
134+
loading: 'lazy',
135+
decoding: 'async',
136+
},
137+
urlPath: '/assets/img/',
138+
outputDir: '_site/assets/img/',
139+
});
140+
} else {
141+
// To be more consistent with the production build,
142+
// don't optimize images but still indicate they should be lazily loaded.
143+
// Then save in `_site/assets/img` and update links to there.
144+
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
145+
extensions: 'html',
146+
formats: ['auto'],
147+
widths: ['auto'],
148+
defaultAttributes: {
149+
loading: 'lazy',
150+
decoding: 'async',
151+
},
152+
urlPath: '/assets/img/',
153+
outputDir: '_site/assets/img/',
154+
});
121155
}
122156

123157
eleventyConfig.setQuietMode(true);

firebase.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,19 @@
55
"trailingSlash": false,
66
"headers": [
77
{
8-
"source": "**/*.@(jpg|jpeg|gif|png|md|txt|json|webp|webm|svg|css|js)",
8+
"source": "**/*.@(avif|jpg|jpeg|gif|png|md|txt|json|webp|webm|svg|css|js)",
99
"headers": [
1010
{ "key": "Cache-Control", "value": "max-age=28800" },
1111
{ "key": "Access-Control-Allow-Origin", "value": "*" }
1212
]
1313
},
14+
{
15+
"source": "/assets/img/*.@(jpg|jpeg|png|webp|avif)",
16+
"headers": [
17+
{ "key": "Cache-Control", "value": "max-age=604800" },
18+
{ "key": "Access-Control-Allow-Origin", "value": "*" }
19+
]
20+
},
1421
{
1522
"source": "**",
1623
"headers": [

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
},
2424
"devDependencies": {
2525
"@11ty/eleventy": "3.0.0-alpha.10",
26+
"@11ty/eleventy-img": "^4.0.2",
2627
"firebase-tools": "^13.8.0",
2728
"hast-util-from-html": "^2.0.1",
2829
"hast-util-select": "^6.0.2",

0 commit comments

Comments
 (0)