feat: improved image optimization

2024-02-01 10:53:34 -08:00 · 2024-02-01 10:53:34 -08:00 · 0534bc5607
commit 0534bc5607
parent 9e118c83db
10 changed files with 70 additions and 104 deletions
--- a/config/shortcodes/index.js
+++ b/config/shortcodes/index.js
@ -1,69 +1,64 @@
-import outdent from 'outdent'
 import Image from '@11ty/eleventy-img'
+import path from 'path'
+import htmlmin from 'html-minifier-terser'
+
+const stringifyAttributes = (attributeMap) => {
+  return Object.entries(attributeMap)
+    .map(([attribute, value]) => {
+      if (typeof value === 'undefined') return '';
+      return `${attribute}="${value}"`;
+    })
+    .join(' ');
+};

 export const img = async (
  src,
-  alt,
-  className = undefined,
+  alt = '',
+  className,
  loading = 'lazy',
-  widths = [75, 150, 300, 600, 900, 1200],
-  formats = ['webp', 'jpeg'],
-  sizes = '100vw'
+  maxWidth = 1248,
+  sizes = '90vw',
+  formats = ['avif', 'webp', 'jpeg']
 ) => {
-  if (!src) return;
-  const imageMetadata = await Image(src, {
-    widths: [...widths, null],
-    formats: [...formats, null],
+  const widths = [320, 570, 880, 1024, 1248];
+  const metadata = await Image(src, {
+    widths: widths.filter((width) => width <= maxWidth),
+    formats: [...formats],
    outputDir: './_site/assets/img/cache/',
    urlPath: '/assets/img/cache/',
-  })
+    filenameFormat: (id, src, width, format, options) => {
+      const extension = path.extname(src);
+      const name = path.basename(src, extension);
+      return `${name}-${width}w.${format}`;
+    },
+  });

-  const stringifyAttributes = (attributeMap) => {
-    return Object.entries(attributeMap)
-      .map(([attribute, value]) => {
-        if (typeof value === 'undefined') return ''
-        return `${attribute}="${value}"`
-      })
-      .join(' ')
-  }
+  const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];

-  const sourceHtmlString = Object.values(imageMetadata)
-    .map((images) => {
-      const { sourceType } = images[0]
-      const sourceAttributes = stringifyAttributes({
-        type: sourceType,
-        srcset: images.map((image) => image.srcset).join(', '),
-        sizes,
-      })
-
-      return `<source ${sourceAttributes}>`
+  const imageSources = Object.values(metadata)
+    .map((imageFormat) => {
+      return `  <source type="${
+        imageFormat[0].sourceType
+      }" srcset="${imageFormat
+        .map((entry) => entry.srcset)
+        .join(', ')}" sizes="${sizes}">`;
    })
-    .join('\n')
+    .join('\n');

-  const getLargestImage = (format) => {
-    const images = imageMetadata[format]
-    return images[images.length - 1]
-  }
-
-  const largestUnoptimizedImg = getLargestImage(formats[0])
-  const imgAttributes = stringifyAttributes({
-    src: largestUnoptimizedImg.url,
-    width: largestUnoptimizedImg.width,
-    height: largestUnoptimizedImg.height,
+  const imgageAttributes = stringifyAttributes({
+    src: lowsrc.url,
+    width: lowsrc.width,
+    height: lowsrc.height,
    alt,
+    class: className,
    loading,
    decoding: 'async',
-  })
+  });

-  const imgHtmlString = `<img ${imgAttributes}>`
-  const pictureAttributes = stringifyAttributes({
-    class: className,
-  })
+  const imageElement = `<picture>
+    ${imageSources}
+    <img ${imgageAttributes} />
+  </picture>`;

-  const picture = `<picture ${pictureAttributes}>
-    ${sourceHtmlString}
-    ${imgHtmlString}
-  </picture>`
-
-  return outdent`${picture}`
-}
+  return htmlmin.minify(imageElement, { collapseWhitespace: true });
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "coryd.dev",
-  "version": "4.14.0",
+  "version": "5.0.4",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "coryd.dev",
-      "version": "4.14.0",
+      "version": "5.0.4",
      "license": "ISC",
      "dependencies": {
        "@remy/webmention": "^1.5.0",
@ -32,7 +32,6 @@
        "markdown-it": "^14.0.0",
        "markdown-it-anchor": "^8.4.1",
        "markdown-it-footnote": "^4.0.0",
-        "outdent": "^0.8.0",
        "sanitize-html": "^2.11.0",
        "slugify": "^1.6.6",
        "writing-stats": "^1.0.6"
@ -3598,12 +3597,6 @@
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
      "integrity": "sha512-iotkTvxc+TwOm5Ieim8VnSNvCDjCK9S8G3scJ50ZthspSxa7jx50jkhYduuAtAjvfDUwSgOwf8+If99AlOEhyw=="
    },
-    "node_modules/outdent": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz",
-      "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==",
-      "dev": true
-    },
    "node_modules/p-finally": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "coryd.dev",
-  "version": "5.0.4",
+  "version": "5.1.4",
  "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
  "type": "module",
  "scripts": {
@ -43,7 +43,6 @@
    "markdown-it": "^14.0.0",
    "markdown-it-anchor": "^8.4.1",
    "markdown-it-footnote": "^4.0.0",
-    "outdent": "^0.8.0",
    "sanitize-html": "^2.11.0",
    "slugify": "^1.6.6",
    "writing-stats": "^1.0.6"
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@ -8,13 +8,13 @@ layout: default
 {% endcapture %}
 <style>{{ css }}</style>
 {{ content }}
-{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %}
-{% render "partials/now/media-grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %}
+{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager', imageMaxWidth: 320 %}
+{% render "partials/now/media-grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8, imageMaxWidth: 320 %}
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
-{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6 %}
+{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6, imageMaxWidth: 320 %}
 {% render "partials/now/links.liquid", links:links %}
-{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
-{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
+{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, imageMaxWidth: 320 %}
+{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6, imageMaxWidth: 320 %}
 <p class="now__explainer text-center">
  This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.
 </p>
--- a/src/_includes/partials/now/media-grid.liquid
+++ b/src/_includes/partials/now/media-grid.liquid
@ -37,7 +37,11 @@
              'lazy'
            {%- endif -%}
          {%- endcapture -%}
-          {% image item.image, alt, 'item__image', loadingStrategy %}
+          {% if imageMaxWidth %}
+            {% image item.image, alt, '', loadingStrategy, imageMaxWidth %}
+          {% else %}
+            {% image item.image, alt, '', loadingStrategy %}
+          {% endif %}
        </div>
      </a>
    {% endfor %}
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@ -403,17 +403,8 @@ li {
 .image__banner {
  border: 1px solid var(--accent-color);
  border-radius: var(--rounded-lg);
-  overflow: hidden;
-}
-
-.image__banner,
-.image__banner > * {
-  display: block;
-  width: 100%;
-}
-
-.image__banner > * {
  height: auto;
+  width: 100%;
 }

 /* pages */
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@ -4,30 +4,18 @@

 .avatar__wrapper {
  width: 100%;
-  margin-bottom: 1.5rem;
+  justify-content: center;
 }

-.avatar__wrapper .avatar__wrapper--interior {
+.avatar__wrapper img {
+  border-radius: var(--rounded-full);
+  border: 1px solid var(--accent-color);
  width: var(--avatar-size);
  height: var(--avatar-size);
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-full);
-  display: flex;
  padding: 1rem;
  background-color: var(--color-lightest);
 }

-.avatar__wrapper,
-.avatar__wrapper .avatar__wrapper--interior {
-  justify-content: center;
-  overflow: hidden;
-}
-
-.avatar__wrapper .avatar__wrapper--interior > * {
-  width: 100%;
-  height: 100%;
-}
-
@media screen and (min-width: 768px) {
  :root {
    --avatar-size: 24rem;
--- a/src/assets/styles/widgets/media-grid.css
+++ b/src/assets/styles/widgets/media-grid.css
@ -76,8 +76,7 @@
  font-weight: 700;
 }

-.media__grid .item__image,
-.media__grid .item__image > * {
+.media__grid img {
  width: 100%;
  height: 100%;
 }
--- a/src/pages/about.md
+++ b/src/pages/about.md
@ -9,10 +9,8 @@ image: /assets/img/ogi/about.jpg
 {% endcapture %}
 <style>{{ css }}</style>
 <div class="avatar__wrapper flex--centered">
-  <div class="avatar__wrapper--interior">
-    {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %}
-    {% image './src/assets/img/avatar.webp', about_alt %}
-  </div>
+  {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %}
+  {% image './src/assets/img/avatar.webp', about_alt %}
 </div>
 <h2 class="page__header text-center">Hi, I'm Cory</h2>

--- a/src/posts/2023/2023-in-review.html
+++ b/src/posts/2023/2023-in-review.html
@ -14,9 +14,8 @@ tags: ['books', 'music', 'development', 'Eleventy']
  <li><a href="https://www.last.fm/user/coryd_">I listened to a bunch of music</a></li>
  <li><a href="https://trakt.tv/users/cdransf">I watched a bunch of movies and TV</a>, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.</li>
 </ul>
-
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true %}
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8 %}
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true, imageMaxWidth: 320 %}
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8, imageMaxWidth: 320 %}

 <p><strong><a href="https://coryd.dev">I wrote some things:</a></strong></p>
 <ul>