feat: crop images before optimizing them to ensure proper aspect ratio

config/shortcodes/index.js

@@ -1,18 +1,59 @@
 import Image from '@11ty/eleventy-img';
 import path from 'path';
+import Sharp from 'sharp';
 import htmlmin from 'html-minifier-terser';
 
-const stringifyAttributes = (attributeMap) =>
+const stringifyAttributes = attributeMap =>
   Object.entries(attributeMap)
-    .map(([attribute, value]) => (value === undefined ? '' : `${attribute}="${value}"`))
+    .map(([attribute, value]) =>
+      value === undefined
+        ? ''
+        : `${attribute}="${typeof value === 'object' ? value.value : value}"`
+    )
     .join(' ');
 
+const resizeImage = async (src, width, height, mode, shape) => {
+  const commonOptions = {
+    fit: mode,
+    position: 'center',
+    background: { r: 255, g: 255, b: 255, alpha: 1 },
+  };
+
+  if (shape === 'square') {
+    const buffer = await Sharp(src)
+      .resize({
+        width: Math.min(width, height),
+        height: Math.min(width, height),
+        ...commonOptions,
+      })
+      .toBuffer();
+
+    return { buffer, width: Math.min(width, height), height: Math.min(width, height) };
+  } else if (shape === 'vertical') {
+    const aspectRatio = 2 / 3;
+    const targetWidth = Math.min(Math.floor(height * aspectRatio), width);
+    const buffer = await Sharp(src)
+      .resize({
+        width: targetWidth,
+        height: Math.floor(targetWidth / aspectRatio),
+        ...commonOptions,
+      })
+      .toBuffer();
+
+    return { buffer, width: targetWidth, height: Math.floor(targetWidth / aspectRatio) };
+  } else {
+    const buffer = await Sharp(src).toBuffer();
+
+    return { buffer, width, height };
+  }
+};
+
 export const img = async (
   src,
   alt = '',
   className,
   loading = 'lazy',
-  shape = 'square',
+  shape = '',
   icon,
   maxWidth = 1248,
   sizes = '90vw',
@@ -21,13 +62,11 @@ export const img = async (
   const isLocal = src.includes('src/assets');
   const imageExists = async () => {
     try {
-      const isOk = await fetch(src, { method: 'HEAD' }).then((res) => res.ok);
+      return await fetch(src, { method: 'HEAD' }).then(res => res.ok);
-      return isOk;
     } catch {
       return false;
     }
   };
-
   const generateImage = async () => {
     const widths = [320, 570, 880, 1024, 1248];
     const metadata = await Image(src, {
@@ -40,31 +79,58 @@ export const img = async (
         return `${name}-${width}w.${format}`;
       },
     });
-
     const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
 
-    const imageSources = Object.values(metadata)
+    if (shape === 'square' || shape === 'vertical') {
-      .map(
+      const { buffer, width: resizedWidth, height: resizedHeight } = await resizeImage(
-        (imageFormat) =>
+        `./_site/${lowsrc.url}`,
+        lowsrc.width,
+        lowsrc.height,
+        'cover',
+        shape
+      );
+      const resizedImageBase64 = buffer.toString('base64');
+      const resizedImageSrc = `data:image/${lowsrc.format};base64,${resizedImageBase64}`;
+      const imageSources = Object.values(metadata)
+        .map((imageFormat) =>
           `<source type="${imageFormat[0].sourceType}" srcset="${imageFormat
             .map((entry) => entry.srcset)
             .join(', ')}" sizes="${sizes}">`
-      )
+        )
-      .join('\n');
+        .join('\n');
+      const imageAttributes = stringifyAttributes({
+        src: resizedImageSrc,
+        width: resizedWidth,
+        height: resizedHeight,
+        alt,
+        class: className,
+        loading,
+        decoding: 'async',
+      });
+      const imageElement = `<picture>${imageSources}<img ${imageAttributes} /></picture>`;
 
-    const imgageAttributes = stringifyAttributes({
+      return htmlmin.minify(imageElement, { collapseWhitespace: true });
-      src: lowsrc.url,
+    } else {
-      width: lowsrc.width,
+      const imageSources = Object.values(metadata)
-      height: lowsrc.height,
+        .map((imageFormat) =>
-      alt,
+          `<source type="${imageFormat[0].sourceType}" srcset="${imageFormat
-      class: className,
+            .map((entry) => entry.srcset)
-      loading,
+            .join(', ')}" sizes="${sizes}">`
-      decoding: 'async',
+        )
-    });
+        .join('\n');
+      const imgageAttributes = stringifyAttributes({
+        src: lowsrc.url,
+        width: lowsrc.width,
+        height: lowsrc.height,
+        alt,
+        class: className,
+        loading,
+        decoding: 'async',
+      });
+      const imageElement = `<picture>${imageSources}<img ${imgageAttributes} /></picture>`;
 
-    const imageElement = `<picture>${imageSources}<img ${imgageAttributes} /></picture>`;
+      return htmlmin.minify(imageElement, { collapseWhitespace: true });
-
+    }
-    return htmlmin.minify(imageElement, { collapseWhitespace: true });
   };
 
   const generatePlaceholder = async () => {
@@ -72,5 +138,5 @@ export const img = async (
     return htmlmin.minify(placeholderElement, { collapseWhitespace: true });
   };
 
-  return isLocal ? await generateImage() : await imageExists().then(async (exists) => (exists ? await generateImage() : await generatePlaceholder()));
+  return isLocal ? await generateImage() : await imageExists().then(async exists => (exists ? await generateImage() : await generatePlaceholder()));
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.3.13",
+  "version": "5.4.13",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_includes/partials/webmentions/comments.liquid

@@ -8,7 +8,7 @@
             <div class="avatar__wrapper flex--centered">
             {% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
             {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
-            {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %}
+            {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
             </div>
           </a>
           <div class="comment">

src/_includes/partials/webmentions/interaction.liquid

@@ -13,7 +13,7 @@
       <div class="avatar__wrapper flex--centered">
         {% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
         {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
-        {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %}
+        {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
       </div>
     </a>
     {% endfor %}