From 1f496210844a21079da822785e56801e2885ae82 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Tue, 24 Jan 2023 08:41:50 -0600 Subject: [PATCH] A few more features and cleanup --- README.md | 7 ++++++- eleventy.config.images.js | 12 ++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d6a79e9..2b892fa 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,12 @@ A starter repository showing how to build a blog with the [Eleventy](https://www - Easily [deploy](#deploy-this-to-your-own-site) to various hosting providers. - Live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/). - Content-driven [hierarchical navigation](https://www.11ty.dev/docs/plugins/navigation/) -- Automated [image optimization](https://www.11ty.dev/docs/plugins/image/) via the `{% image %}` shortcode (images can be co-located with posts) (with zero-JavaScript output). +- [Image optimization](https://www.11ty.dev/docs/plugins/image/) (including modern formats AVIF and WebP) via the `{% image %}` shortcode (images can be co-located with posts) (with zero-JavaScript output). + - Prefers `` if possible (single image format) but switches automatically to `` for multiple image formats. + - Automated `` syntax markup with `srcset` and optional `sizes` + - Includes `width`/`height` attributes to avoid [content layout shift](https://web.dev/cls/). + - Includes `loading="lazy"` for native lazy loading without JavaScript. + - Includes [`decoding="async"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding) - Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (with zero-JavaScript output). - Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. - Automated next/previous links on blog posts. diff --git a/eleventy.config.images.js b/eleventy.config.images.js index 98a9139..32a0269 100644 --- a/eleventy.config.images.js +++ b/eleventy.config.images.js @@ -11,14 +11,18 @@ module.exports = eleventyConfig => { // Eleventy Image shortcode // https://www.11ty.dev/docs/plugins/image/ - eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) { + eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) { + // Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats + // Warning: Avif can be resource-intensive so take care! + let formats = ["avif", "webp", "auto"]; let file = relativeToInputPath(this.page.inputPath, src); let metadata = await eleventyImage(file, { - widths: ["auto"], - // You can add "avif" or "jpeg" here if you’d like! - formats: ["webp", "png"], + widths: widths || ["auto"], + formats, outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. }); + + // TODO loading=eager and fetchpriority=high let imageAttributes = { alt, sizes,