diff --git a/config/shortcodes/image/index.js b/config/shortcodes/image/index.js
new file mode 100644
index 0000000..737eb11
--- /dev/null
+++ b/config/shortcodes/image/index.js
@@ -0,0 +1,82 @@
+const Image = require('@11ty/eleventy-img');
+const path = require('path');
+const htmlmin = require('html-minifier-terser');
+
+const stringifyAttributes = attributeMap => {
+  return Object.entries(attributeMap)
+    .map(([attribute, value]) => {
+      if (typeof value === 'undefined') return '';
+      return `${attribute}="${value}"`;
+    })
+    .join(' ');
+};
+
+const imageShortcode = async (
+  src,
+  alt = '',
+  caption,
+  loading = 'lazy',
+  className,
+  sizes = '90vw',
+  widths = [320, 570, 880, 1024, 1248],
+  formats = ['avif', 'webp', 'jpeg']
+) => {
+  const metadata = await Image(src, {
+    widths: [...widths],
+    formats: [...formats],
+    urlPath: '/assets/images/',
+    outputDir: './dist/assets/images/',
+    filenameFormat: (id, src, width, format, options) => {
+      const extension = path.extname(src);
+      const name = path.basename(src, extension);
+      return `${name}-${width}w.${format}`;
+    }
+  });
+
+  const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
+
+  // Getting the URL to use
+  let imgSrc = src;
+  if (!imgSrc.startsWith('.')) {
+    const inputPath = this.page.inputPath;
+    const pathParts = inputPath.split('/');
+    pathParts.pop();
+    imgSrc = `${pathParts.join('/')}/${src}`;
+  }
+
+  const imageSources = Object.values(metadata)
+    .map(imageFormat => {
+      return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
+        .map(entry => entry.srcset)
+        .join(', ')}" sizes="${sizes}">`;
+    })
+    .join('\n');
+
+  const imgageAttributes = stringifyAttributes({
+    src: lowsrc.url,
+    width: lowsrc.width,
+    height: lowsrc.height,
+    alt,
+    loading,
+    decoding: 'async'
+  });
+
+  const imageElement = caption
+    ? `<figure class="flow ${className ? `${className}` : ''}">
+				<picture>
+					${imageSources}
+					<img
+					${imgageAttributes}>
+				</picture>
+				<figcaption>${caption}</figcaption>
+			</figure>`
+    : `<picture class="flow ${className ? `${className}` : ''}">
+				${imageSources}
+				<img
+				${imgageAttributes}>
+			</picture>`;
+
+  return htmlmin.minify(imageElement, {collapseWhitespace: true});
+};
+
+module.exports = imageShortcode;
diff --git a/config/shortcodes/imagePlaceholder/index.js b/config/shortcodes/imagePlaceholder/index.js
deleted file mode 100644
index 80dd167..0000000
--- a/config/shortcodes/imagePlaceholder/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const Image = require('@11ty/eleventy-img');
-const path = require('path');
-const htmlmin = require('html-minifier-terser');
-
-const imageShortcodePlaceholder = async (
-  src,
-  alt,
-  caption,
-  sizes = '(min-width: 55rem) 880px, 100vw'
-) => {
-  if (!alt) {
-    throw new Error(`Missing \`alt\` on myImage from: ${src}`);
-  }
-
-  let metadata = await Image(src, {
-    widths: [320, 570, 880, 1200],
-    formats: ['avif', 'webp', 'jpeg'],
-    urlPath: '/assets/images/',
-    outputDir: './dist/assets/images/',
-    filenameFormat: function (id, src, width, format, options) {
-      const extension = path.extname(src);
-      const name = path.basename(src, extension);
-
-      return `${name}-${width}w.${format}`;
-    }
-  });
-
-  let lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
-
-  // getting the url  to use
-  let imgSrc = src;
-  if (!imgSrc.startsWith('.')) {
-    const inputPath = this.page.inputPath;
-    const pathParts = inputPath.split('/');
-    pathParts.pop();
-    imgSrc = pathParts.join('/') + '/' + src;
-  }
-
-  return htmlmin.minify(
-    `<figure class="flow">
-      <picture>
-      ${Object.values(metadata)
-        .map(imageFormat => {
-          return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
-            .map(entry => entry.srcset)
-            .join(', ')}" sizes="${sizes}">`;
-        })
-        .join('\n')}
-        <img
-          src="${lowsrc.url}"
-          width="${lowsrc.width}"
-          height="${lowsrc.height}"
-          alt="${alt}"
-          loading = 'lazy'
-          decoding="async">
-      </picture>
-    ${caption ? `<figcaption>${caption}</figcaption>` : ``}
-    </figure>`,
-    {collapseWhitespace: true}
-  );
-};
-
-module.exports = imageShortcodePlaceholder;