chore: image improvements

2024-09-12 17:28:09 -07:00 · 2024-09-12 17:28:09 -07:00 · 7dde72d1cb
commit 7dde72d1cb
parent 9c3d8e213a
15 changed files with 138 additions and 164 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "coryd.dev",
-  "version": "24.7.22",
+  "version": "24.8.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "coryd.dev",
-      "version": "24.7.22",
+      "version": "24.8.0",
      "license": "MIT",
      "dependencies": {
        "@cdransf/api-text": "^1.5.0",
@ -1743,9 +1743,9 @@
      "license": "MIT"
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.5.20",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.20.tgz",
-      "integrity": "sha512-74mdl6Fs1HHzK9SUX4CKFxAtAe3nUns48y79TskHNAG6fGOlLfyKA4j855x+0b5u8rWJIrlaG9tcTPstMlwjIw==",
+      "version": "1.5.21",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.21.tgz",
+      "integrity": "sha512-+rBAerCpQvFSPyAO677i5gJuWGO2WFsoujENdcMzsrpP7Ebcc3pmpERgU8CV4fFF10a5haP4ivnFQ/AmLICBVg==",
      "dev": true,
      "license": "ISC"
    },
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "coryd.dev",
-  "version": "24.7.22",
+  "version": "24.8.0",
  "description": "The source for my personal site. Built using 11ty (and other tools).",
  "type": "module",
  "scripts": {
--- a/src/includes/partials/blocks/badge-grid.liquid
+++ b/src/includes/partials/blocks/badge-grid.liquid
@ -2,16 +2,18 @@
  {%- for badge in badges limit: 8 -%}
    <a href="{{ badge.url }}">
      <img srcset="
-          https://cdn.coryd.dev/{{ badge.image }}?class=w50 50w,
-          https://cdn.coryd.dev/{{ badge.image }}?class=w100 100w,
-          https://cdn.coryd.dev/{{ badge.image }}?class=w200 200w,
+          https://cdn.coryd.dev/{{ badge.image }}?class=w50&type=webp 50w,
+          https://cdn.coryd.dev/{{ badge.image }}?class=w100&type=webp 100w,
+          https://cdn.coryd.dev/{{ badge.image }}?class=w200&type=webp 200w
        " sizes="(max-width: 450px) 88px,
          (max-width: 850px) 176px,
-          (max-width: 1000px) 352px,
-          704px" src="https://cdn.coryd.dev/{{ badge.image }}?class=w200" alt="{{ badge.image_alt }}" loading="lazy"
+          200px"
+        src="https://cdn.coryd.dev/{{ badge.image }}?class=w50&type=webp"
+        alt="{{ badge.image_alt }}"
+        loading="lazy"
        decoding="async"
-        width="88"
-        height="31"
+        width="50"
+        height="18"
      />
    </a>
  {%- endfor -%}
--- a/src/includes/partials/blocks/hero.liquid
+++ b/src/includes/partials/blocks/hero.liquid
@ -1,19 +1,17 @@
 <img
  srcset="
-    https://cdn.coryd.dev/{{ image }}?class=bannersm 256w,
-    https://cdn.coryd.dev/{{ image }}?class=bannermd 512w,
-    https://cdn.coryd.dev/{{ image }}?class=bannerbase 1024w,
-    https://cdn.coryd.dev/{{ image }}?class=bannerlg 2048w
+    https://cdn.coryd.dev/{{ image }}?class=bannersm&type=webp 256w,
+    https://cdn.coryd.dev/{{ image }}?class=bannermd&type=webp 512w,
+    https://cdn.coryd.dev/{{ image }}?class=bannerbase&type=webp 1024w
  "
  sizes="(max-width: 450px) 256px,
-    (max-width: 850px) 512px,
-    (max-width: 1000px) 1024px,
-    2048px"
-  src="https://cdn.coryd.dev/{{ image }}?class=bannerlg"
+    (max-width: 850px) 512px
+    1024px"
+  src="https://cdn.coryd.dev/{{ image }}?class=bannersm&type=webp"
  alt="{{ alt }}"
  class="image-banner"
-  loading="eager"
+  loading="lazy"
  decoding="async"
-  width="1080"
-  height="720"
+  width="720"
+  height="480"
 />
--- a/src/includes/partials/media/grid.liquid
+++ b/src/includes/partials/media/grid.liquid
@ -20,39 +20,31 @@
        {%- if shape == 'square' -%}
          <img
            srcset="
-              https://cdn.coryd.dev{{ item.image }}?class=squaresm 200w,
-              https://cdn.coryd.dev{{ item.image }}?class=squaremd 400w,
-              https://cdn.coryd.dev{{ item.image }}?class=squarebase 800w
+              https://cdn.coryd.dev{{ item.image }}?class=squaresm&type=webp 200w,
+              https://cdn.coryd.dev{{ item.image }}?class=squaremd&type=webp 400w
            "
-            sizes="(max-width: 450px) 200px,
-              (max-width: 850px) 400px,
-              (max-width: 1000px) 800px,
-              800px"
-            src="https://cdn.coryd.dev{{ item.image }}?class=squarebase"
-            alt="{{ alt }}"
-            loading="{{ loadingStrategy }}"
-            decoding="async"
-            width="240"
-            height="240"
-          />
-        {%- else -%}
-          <img
-            srcset="
-              https://cdn.coryd.dev{{ item.image }}?class=verticalsm 200w,
-              https://cdn.coryd.dev{{ item.image }}?class=verticalmd 400w,
-              https://cdn.coryd.dev{{ item.image }}?class=verticalbase 800w
-            "
-            sizes="(max-width: 450px) 200px,
-              (max-width: 850px) 400px,
-              (max-width: 1000px) 800px,
-              800px"
-            src="https://cdn.coryd.dev{{ item.image }}?class=verticalbase"
+            sizes="(max-width: 450px) 200px, 400px"
+            src="https://cdn.coryd.dev{{ item.image }}?class=squaresm&type=webp"
            alt="{{ alt }}"
            loading="{{ loadingStrategy }}"
            decoding="async"
            width="200"
-            height="307"
+            height="200"
          />
+        {%- else -%}
+        <img
+          srcset="
+            https://cdn.coryd.dev{{ item.image }}?class=verticalsm&type=webp 200w,
+            https://cdn.coryd.dev{{ item.image }}?class=verticalmd&type=webp 400w
+          "
+          sizes="(max-width: 450px) 200px, 400px"
+          src="https://cdn.coryd.dev{{ item.image }}?class=verticalsm&type=webp"
+          alt="{{ alt }}"
+          loading="{{ loadingStrategy }}"
+          decoding="async"
+          width="200"
+          height="307"
+        />
        {%- endif -%}
      </div>
    </a>
--- a/src/includes/partials/media/music/recent.liquid
+++ b/src/includes/partials/media/music/recent.liquid
@ -5,12 +5,11 @@
      <div class="meta">
        <img
          srcset="
-            https://cdn.coryd.dev{{ item.image }}?class=w50 50w,
-            https://cdn.coryd.dev{{ item.image }}?class=w100 100w,
-            https://cdn.coryd.dev{{ item.image }}?class=w200 200w,
+            https://cdn.coryd.dev{{ item.image }}?class=w50&type=webp 50w,
+            https://cdn.coryd.dev{{ item.image }}?class=w100&type=webp 100w
          "
-          sizes="(max-width: 1000px) 50px, 100px, 200px"
-          src="https://cdn.coryd.dev{{ item.image }}?class=w200"
+          sizes="(max-width: 450px) 50px, 100px"
+          src="https://cdn.coryd.dev{{ item.image }}?class=w50&type=webp"
          alt="{{ alt }}"
          loading="lazy"
          decoding="async"
--- a/src/includes/partials/media/watching/grid.liquid
+++ b/src/includes/partials/media/watching/grid.liquid
@ -22,15 +22,11 @@
        {%- assign loadingStrategy = loading | default: 'lazy' -%}
        <img
          srcset="
-            https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm 256w,
-            https://cdn.coryd.dev{{ item.backdrop }}?class=bannermd 512w,
-            https://cdn.coryd.dev{{ item.backdrop }}?class=bannerbase 1024w
+            https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm&type=webp 256w,
+            https://cdn.coryd.dev{{ item.backdrop }}?class=bannermd&type=webp 512w
          "
-          sizes="(max-width: 450px) 256px,
-            (max-width: 850px) 512px,
-            (max-width: 1000px) 1024px,
-            1024px"
-          src="https://cdn.coryd.dev{{ item.backdrop }}?class=bannerbase"
+          sizes="(max-width: 450px) 256px, 512px"
+          src="https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm&type=webp"
          alt="{{ alt }}"
          loading="{{ loadingStrategy }}"
          decoding="async"
--- a/src/includes/webrings/the-claw.liquid
+++ b/src/includes/webrings/the-claw.liquid
@ -2,16 +2,16 @@
  <div class="flex-centered justify-centered">
    <img
      srcset="
-        https://cdn.coryd.dev/{{ logo }}?class=w200 200w,
-        https://cdn.coryd.dev/{{ logo }}?class=w400 400w,
-        https://cdn.coryd.dev/{{ logo }}?class=w800 800w,
-        https://cdn.coryd.dev/{{ logo }}?class=w1600 1600w
+        https://cdn.coryd.dev/{{ logo }}?class=w200&type=webp 200w,
+        https://cdn.coryd.dev/{{ logo }}?class=w400&type=webp 400w,
+        https://cdn.coryd.dev/{{ logo }}?class=w800&type=webp 800w,
+        https://cdn.coryd.dev/{{ logo }}?class=w1600&type=webp 1600w
      "
      sizes="(max-width: 450px) 200px,
        (max-width: 850px) 400px,
        (max-width: 1000px) 800px,
-        1600px"
-      src="https://cdn.coryd.dev/{{ logo }}?class=1600"
+        1200px"
+      src="https://cdn.coryd.dev/{{ logo }}?class=w200&type=webp"
      alt="The Claw Webring"
      loading="lazy"
      decoding="async"
--- a/src/pages/dynamic/books/book.html
+++ b/src/pages/dynamic/books/book.html
@ -16,18 +16,17 @@ schema: book
  <div class="book-display">
    <img
      srcset="
-        https://cdn.coryd.dev{{ book.image }}?class=verticalsm 200w,
-        https://cdn.coryd.dev{{ book.image }}?class=verticalmd 400w,
-        https://cdn.coryd.dev{{ book.image }}?class=verticalbase 800w,
-        https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w
+        https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp 200w,
+        https://cdn.coryd.dev{{ book.image }}?class=verticalmd&type=webp 400w,
+        https://cdn.coryd.dev{{ book.image }}?class=verticalbase&type=webp 800w
      "
      sizes="(max-width: 450px) 203px,
        (max-width: 850px) 406px,
        (max-width: 1000px) 812px,
-        1624px"
-      src="https://cdn.coryd.dev{{ book.image }}?class=verticallg"
+        812px"
+      src="https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp"
      alt="{{ alt }}"
-      loading="eager"
+      loading="lazy"
      decoding="async"
      width="200"
      height="307"
--- a/src/pages/dynamic/books/index.html
+++ b/src/pages/dynamic/books/index.html
@ -14,40 +14,36 @@ schema: books
 {% render "partials/blocks/banners/rss.liquid", url: "/feeds/books", text: "Subscribe to my books feed or follow along on this page" %}
 <hr />
 {% for book in bookData %}
-{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
-<article class="book-entry">
-  <a href="{{ book.url }}">
-    <img
-      srcset="
-        https://cdn.coryd.dev{{ book.image }}?class=verticalsm 200w,
-        https://cdn.coryd.dev{{ book.image }}?class=verticalmd 400w,
-        https://cdn.coryd.dev{{ book.image }}?class=verticalbase 800w,
-        https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w
-      "
-      sizes="(max-width: 450px) 200px,
-        (max-width: 850px) 400px,
-        (max-width: 1000px) 800px,
-        1200px"
-      src="https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w"
-      alt="{{ alt }}"
-      loading="eager"
-      decoding="async"
-      width="200"
-      height="307"
-    />
-  </a>
-  <div class="book-meta">
+  {% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
+  <article class="book-entry">
    <a href="{{ book.url }}">
-      <p class="title"><strong>{{ book.title }}</strong></p>
+      <img
+        srcset="
+          https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp 200w,
+          https://cdn.coryd.dev{{ book.image }}?class=verticalmd&type=webp 400w
+        "
+        sizes="(max-width: 450px) 200px,
+          400px"
+        src="https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp"
+        alt="{{ alt }}"
+        loading="lazy"
+        decoding="async"
+        width="200"
+        height="307"
+      />
    </a>
-    {% if book.author %}
-      <p class="sub-meta">By {{ book.author }}</p>
-    {% endif %}
-    {% if book.progress %}
-      {%- assign percentage = book.progress | append: '%' -%}
-      {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-    {% endif %}
-    {% if book.description %}<div class="description">{{ book.description | normalize_whitespace | markdown | truncatewords: 50 }}</div>{% endif %}
-  </div>
-</article>
+    <div class="book-meta">
+      <a href="{{ book.url }}">
+        <p class="title"><strong>{{ book.title }}</strong></p>
+      </a>
+      {% if book.author %}
+        <p class="sub-meta">By {{ book.author }}</p>
+      {% endif %}
+      {% if book.progress %}
+        {%- assign percentage = book.progress | append: '%' -%}
+        {% render "partials/media/progress-bar.liquid", percentage:percentage %}
+      {% endif %}
+      {% if book.description %}<div class="description">{{ book.description | normalize_whitespace | markdown | truncatewords: 50 }}</div>{% endif %}
+    </div>
+  </article>
 {% endfor %}
--- a/src/pages/dynamic/music/artists/artist.html
+++ b/src/pages/dynamic/music/artists/artist.html
@ -24,21 +24,19 @@ schema: artist
  <div class="artist-display">
    <img
      srcset="
-        https://cdn.coryd.dev{{ artist.image }}?class=w200 200w,
-        https://cdn.coryd.dev{{ artist.image }}?class=w600 400w,
-        https://cdn.coryd.dev{{ artist.image }}?class=w800 800w,
-        https://cdn.coryd.dev{{ artist.image }}?class=w1600 1200w
+        https://cdn.coryd.dev{{ artist.image }}?class=w200&type=webp 200w,
+        https://cdn.coryd.dev{{ artist.image }}?class=w600&type=webp 400w,
+        https://cdn.coryd.dev{{ artist.image }}?class=w800&type=webp 800w
      "
      sizes="(max-width: 450px) 200px,
        (max-width: 850px) 400px,
-        (max-width: 1000px) 800px,
-        1200px"
-      src="https://cdn.coryd.dev{{ artist.image }}?class=w1600"
+        800px"
+      src="https://cdn.coryd.dev{{ artist.image }}?class=w200&type=webp"
      alt="{{ alt }}"
      loading="eager"
      decoding="async"
-      width="480"
-      height="480"
+      width="200"
+      height="200"
    />
    <div class="artist-meta">
      <p class="title"><strong>{{ artist.name }}</strong></p>
--- a/src/pages/dynamic/posts/post.html
+++ b/src/pages/dynamic/posts/post.html
@ -15,20 +15,22 @@ schema: blog
    {%- if post.image -%}
    <img
      srcset="
-        https://cdn.coryd.dev/{{ post.image }}?class=w200 200w,
-        https://cdn.coryd.dev/{{ post.image }}?class=w400 400w,
-        https://cdn.coryd.dev/{{ post.image }}?class=w800 800w,
-        https://cdn.coryd.dev/{{ post.image }}?class=w1600 1600w
+        https://cdn.coryd.dev/{{ post.image }}?class=w200&type=webp 200w,
+        https://cdn.coryd.dev/{{ post.image }}?class=w400&type=webp 400w,
+        https://cdn.coryd.dev/{{ post.image }}?class=w800&type=webp 800w,
+        https://cdn.coryd.dev/{{ post.image }}?class=w1600&type=webp 1600w
      "
      sizes="(max-width: 450px) 200px,
        (max-width: 850px) 400px,
        (max-width: 1000px) 800px,
-        1600px"
-      src="https://cdn.coryd.dev/{{ post.image }}?class=w1600"
+        1200px"
+      src="https://cdn.coryd.dev/{{ post.image }}?class=w200"
      alt="{{ post.image_alt }}"
      class="image-banner"
-      loading="lazy"
+      loading="eager"
      decoding="async"
+      width="200"
+      height="auto"
    />
    {%- endif -%}
    {{ post.content | markdown }}
--- a/src/pages/dynamic/watching/movie.html
+++ b/src/pages/dynamic/watching/movie.html
@ -14,22 +14,20 @@ schema: movie
 <article class="watching-focus">
  <img
    srcset="
-      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm 256w,
-      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd 512w,
-      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase 1024w,
-      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg 2048w
+      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm&type=webp 256w,
+      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd&type=webp 512w,
+      https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase&type=webp 1024w
    "
    sizes="(max-width: 450px) 256px,
      (max-width: 850px) 512px,
-      (max-width: 1000px) 1024px,
-      2048px"
-    src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg"
+      1024px"
+    src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm&type=webp"
    alt="{{ alt }}"
    class="image-banner"
    loading="eager"
    decoding="async"
-    width="1080"
-    height="720"
+    width="256"
+    height="180"
  />
  <div class="watching-meta">
    <p class="title"><strong>{{ movie.title }}</strong>{%- if movie.year and not movie.rating %} ({{ movie.year }}){%- endif -%}</p>
--- a/src/pages/dynamic/watching/show.html
+++ b/src/pages/dynamic/watching/show.html
@ -15,22 +15,20 @@ schema: show
 <article class="watching-focus">
  <img
    srcset="
-      https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm 256w,
-      https://cdn.coryd.dev{{ show.backdrop }}?class=bannermd 512w,
-      https://cdn.coryd.dev{{ show.backdrop }}?class=bannerbase 1024w,
-      https://cdn.coryd.dev{{ show.backdrop }}?class=bannerlg 2048w
+      https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm&type=webp 256w,
+      https://cdn.coryd.dev{{ show.backdrop }}?class=bannermd&type=webp 512w,
+      https://cdn.coryd.dev{{ show.backdrop }}?class=bannerbase&type=webp 1024w
    "
    sizes="(max-width: 450px) 256px,
      (max-width: 850px) 512px,
-      (max-width: 1000px) 1024px,
-      2048px"
-    src="https://cdn.coryd.dev/{{ show.backdrop }}?class=bannerlg"
+      1024px"
+    src="https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm&type=webp"
    alt="{{ alt }}"
    class="image-banner"
    loading="eager"
    decoding="async"
-    width="1080"
-    height="720"
+    width="256"
+    height="180"
  />
  <div class="watching-meta">
    <p class="title"><strong>{{ show.title }}</strong>{%- if show.year %} ({{ show.year }}){%- endif -%}</p>
--- a/src/pages/static/about.md
+++ b/src/pages/static/about.md
@ -8,25 +8,21 @@ permalink: /about.html
 {%- assign show = tv.recentlyWatched | first -%}
 <div class="avatar-wrapper flex-centered">
  <div class="interior">
-  {%- capture about_alt -%}{{ globals.site_name }} - image by @joel@fosstodon.org{%- endcapture -%}
-  <img
-    srcset="
-      https://cdn.coryd.dev/{{ globals.about }}?class=squaresm 200w,
-      https://cdn.coryd.dev/{{ globals.about }}?class=squaremd 400w,
-      https://cdn.coryd.dev/{{ globals.about }}?class=squarebase 800w,
-      https://cdn.coryd.dev/{{ globals.about }}?class=squarelg 1200w
-    "
-    sizes="(max-width: 450px) 200px,
-      (max-width: 850px) 400px,
-      (max-width: 1000px) 800px,
-      1200px"
-    src="https://cdn.coryd.dev/{{ globals.about }}?class=squarelg"
-    alt="{{ about_alt }}"
-    loading="eager"
-    decoding="async"
-    width="600"
-    height="600"
-  />
+    {%- capture about_alt -%}{{ globals.site_name }} - image by @joel@fosstodon.org{%- endcapture -%}
+    <img
+      srcset="
+        https://cdn.coryd.dev/{{ globals.about }}?class=squaresm&type=webp 200w,
+        https://cdn.coryd.dev/{{ globals.about }}?class=squaremd&type=webp 400w,
+        https://cdn.coryd.dev/{{ globals.about }}?class=squarebase&type=webp 800w
+      "
+      sizes="(max-width: 450px) 200px, (max-width: 850px) 400px, 800px"
+      src="https://cdn.coryd.dev/{{ globals.about }}?class=squaresm&type=webp"
+      alt="{{ about_alt }}"
+      loading="eager"
+      decoding="async"
+      width="200"
+      height="200"
+    />
  </div>
 </div>
 <h2 class="text-centered">Hi, I'm Cory</h2>