Added v1 of image optimisation using the eleventy-img plugin

.eleventy.js

@@ -4,6 +4,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(eleventyNavigationPlugin)
 
   eleventyConfig.addLayoutAlias('page', 'layouts/page')
+  eleventyConfig.addNunjucksAsyncShortcode('image', require('./src/_11ty/imageShortcode').imageShortcode)
 
   /* Creating a collection of blogposts by filtering based on folder and filetype */
   eleventyConfig.addCollection("blog", (collectionApi) => {

src/_11ty/imageShortcode.js

@@ -0,0 +1,35 @@
+const Image = require("@11ty/eleventy-img")
+const  path = require('path')
+
+const imageShortcode = async (
+  relativeSrc,
+  alt,
+  className,
+  widths = [null, 300, 800, 1280],
+  formats = ['webp'],
+  sizes = '(min-width: 100px)'
+) => {
+  const { dir: imgDir } = path.parse(relativeSrc);
+  const fullSrc = path.join('src', relativeSrc);
+
+  const imageMetadata = await Image(relativeSrc, {
+    widths,
+    formats,
+    outputDir: "./_site/assets/images/generated/",
+    urlPath: "/assets/images/generated/",
+  })
+
+  const imageAttributes = {
+    alt,
+    sizes,
+    loading: 'lazy',
+    decoding: 'async',
+  }
+
+  if(className) {imageAttributes["class"] = className }
+
+  return Image.generateHTML(imageMetadata, imageAttributes)
+}
+
+
+module.exports.imageShortcode = imageShortcode;