diff --git a/.eleventy.js b/.eleventy.js
index e5672f6..b7a7169 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -24,7 +24,7 @@ module.exports = function (config) {
 
     // Shortcodes
     Object.keys(shortcodes).forEach((shortcodeName) => {
-        config.addShortcode(shortcodeName, shortcodes[shortcodeName])
+        config.addAsyncShortcode(shortcodeName, shortcodes[shortcodeName])
     })
 
     // Icon Sprite
@@ -51,7 +51,7 @@ module.exports = function (config) {
     // Pass-through files
     config.addPassthroughCopy('src/robots.txt')
     config.addPassthroughCopy('src/site.webmanifest')
-    config.addPassthroughCopy('src/assets/images')
+    config.addPassthroughCopy('src/assets/images/favicon')
     config.addPassthroughCopy('src/assets/fonts')
 
     // Deep-Merge
diff --git a/utils/shortcodes.js b/utils/shortcodes.js
index 7d2c4e7..c7da663 100644
--- a/utils/shortcodes.js
+++ b/utils/shortcodes.js
@@ -1,5 +1,26 @@
+const Image = require("@11ty/eleventy-img");
+
 module.exports = {
-    icon: function (name) {
+    image: async function imageShortcode(src, alt, sizes, width) {
+        src = "./src/assets/images/" + src;
+        let metadata = await Image(src, {
+          widths: width?[width] : [300, 600],
+          formats: ["avif", "jpeg"],
+          outputDir: "./dist/assets/images/",
+          urlPath: "/assets/images/"
+        });
+      
+        let imageAttributes = {
+          alt,
+          sizes,
+          loading: "lazy",
+          decoding: "async",
+        };
+      
+        // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
+        return Image.generateHTML(metadata, imageAttributes);
+    },
+    icon: async function (name) {
         return `<svg class="icon icon--${name}" role="img" aria-hidden="true" width="24" height="24">
                     <use xlink:href="#icon-${name}"></use>
                 </svg>`