add start page image

eleventy.config.js

@@ -2,6 +2,7 @@ const { EleventyHtmlBasePlugin, EleventyI18nPlugin } = require("@11ty/eleventy")
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
 const pluginIcons = require('eleventy-plugin-icons');
+const Image = require("@11ty/eleventy-img");
 const yaml = require("js-yaml");
 const fs = require('fs');
 
@@ -40,6 +41,21 @@ module.exports = function(eleventyConfig) {
     return out.replaceAll("\n", "");
   });
 
+  // responsive images
+  eleventyConfig.addShortcode("image", async function(src, alt, sizes) {
+    let metadata = await Image(src, {
+      outputDir: "./_site/img/",
+      widths: [480, 1024, 1920, 2560, "auto"],
+    });
+    let imageAttributes = {
+      alt,
+      sizes,
+      loading: "lazy",
+      decoding: "async",
+    };
+    return Image.generateHTML(metadata, imageAttributes);
+  });
+
   // process the logo files
   eleventyConfig.addTemplateFormats("logo.svg");
   eleventyConfig.addExtension("logo.svg", {