build: 🔧 use externally hosted image service

Build time increases exponentially with more images pulled in by the eleventy-image plugin. This keeps build times low and shifts computational load to an external image hosting service.

eleventy.config.js

@@ -22,9 +22,24 @@ import markdownItDeflist from 'markdown-it-deflist';
 import markdownItFootnote from 'markdown-it-footnote';
 import markdownItImageFigures from 'markdown-it-image-figures';
 
-const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
 Image.concurrency = 4;
 
+const urlFormat = ({ src, width, format }) => {
+  const baseUrl = `https://img.sebin-nyshkim.net/i`;
+  const imgUuid = src.match(/\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\.(\w{3,})/);
+  const imgFormat = format === 'jpeg' ? 'jpg' : format;
+
+  return `${baseUrl}/${imgUuid[1]}.${imgFormat}?width=${width}`;
+};
+
+const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
+const ELEVENTY_IMAGE_DEFAULTS = {
+  formats: ['webp', 'auto'],
+  urlPath: '/img/',
+  outputDir: './public/img/',
+  urlFormat
+};
+
 export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('./src/css/prism.css');
   eleventyConfig.addWatchTarget('./src/css/');
@@ -32,9 +47,6 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('./src/fonts/');
   eleventyConfig.addWatchTarget('./src/fonts/');
 
-  eleventyConfig.addPassthroughCopy('./src/img/sebin.png');
-  eleventyConfig.addWatchTarget('./src/img/sebin.png');
-
   eleventyConfig.addCollection('posts', (collection) =>
     process.env.ELEVENTY_PRODUCTION
       ? collection.getFilteredByGlob('./src/posts/*.md')
@@ -90,13 +102,9 @@ export default async function (eleventyConfig) {
     }
   });
   eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+    ...ELEVENTY_IMAGE_DEFAULTS,
     extensions: 'html',
-    formats: ['avif', 'webp', 'auto'],
     widths: [640, 800, 1280, 1920, 2560, 3840, 'auto'],
-    sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
-    sharpPngOptions: { compressionLevel: 9 },
-    urlPath: '/img/',
-    outputDir: './public/img/',
     defaultAttributes: {
       loading: 'lazy',
       decoding: 'async',
@@ -138,12 +146,8 @@ export default async function (eleventyConfig) {
   eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
   eleventyConfig.addShortcode('bgimgset', async (src) => {
     const imgset = await Image(src, {
+      ...ELEVENTY_IMAGE_DEFAULTS,
       widths: [1920, 2560, 3840],
-      sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
-      sharpPngOptions: { compressionLevel: 9 },
-      formats: ['avif', 'webp', 'auto'],
-      urlPath: '/img/',
-      outputDir: './public/img/'
     });
 
     const getSets = ({ url, sourceType }, i) => `url(${url}) type('${sourceType}') ${i + 1}x`;

src/404.md

@@ -6,7 +6,7 @@ permalink: /404.html
 
 # Here be no dragons
 
-![Sebin is unhappy with the content on his phone](/img/sebin-sticker-phone.png)
+![Sebin is unhappy with the content on his phone](https://img.sebin-nyshkim.net/i/00372308-6677-4e84-8344-2630b58f6651)
 
 The page you were looking for does not exist!
 

src/about.md

@@ -8,7 +8,7 @@ eleventyNavigation:
 
 # {{ title }}
 
-![Sebin does a think](/img/sebin-sticker-think.png)
+![Sebin does a think](https://img.sebin-nyshkim.net/i/35da87be-0734-4738-9503-07d52c64c905)
 
 | Key       | Value             |
 | --------- | ----------------- |

src/drafts/drafts.json

@@ -6,7 +6,7 @@
   "author": {
     "name": "Sebin Nyshkim",
     "href": "https://blog.sebin-nyshkim.net",
-    "image": "https://cdn.sebin-nyshkim.net/-o3c3fVEgEx"
+    "image": "https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454"
   },
   "twitter": {
     "cardType": "summary_large_image",

src/index.md

@@ -7,7 +7,7 @@ eleventyNavigation:
 
 # Rawr there! 👋🏻
 
-![Sebin says hello](/img/sebin-sticker-hello.png)
+![Sebin says hello](https://img.sebin-nyshkim.net/i/928fab95-ac55-4b66-b876-1c31b5924db6)
 
 Welcome to my little corner of the internet! This is where I pour out my thoughts whenever I have them :3
 

src/layouts/base.njk

@@ -29,14 +29,14 @@
       <meta name="fediverse:creator" content="{{ mastodon.fediverseCreator }}" />
     {% endif %}
     <link rel="alternate" href="/feed.xml" title="Sebin's Blog" type="application/atom+xml">
-    <link rel="shortcut icon" href="/img/sebin.png" type="image/png">
+    <link rel="shortcut icon" href="https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454.png" type="image/png">
     <link rel="me" href="https://meow.social/@SebinNyshkim">
   </head>
   <body class="bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
     <header class="absolute z-10 left-0 right-0 top-0 sm:px-safe-offset-4 md:px-safe-offset-6">
       <div class="flex min-h-16 max-w-(--breakpoint-xl) items-center justify-center bg-sky-600 shadow-xl sm:m-4 sm:mx-auto  sm:justify-between sm:rounded-xl dark:bg-sky-950">
         <div class="hidden sm:flex sm:items-center">
-          <img src="/img/sebin.png" alt="" class="m-4 max-w-12 rounded-full border-4 border-white shadow-2xl lg:m-5 lg:max-w-14">
+          <img src="https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454" alt="" class="m-4 max-w-12 rounded-full border-4 border-white shadow-2xl lg:m-5 lg:max-w-14">
           <h1 class="text-2xl text-white lg:text-3xl">Sebin's Blog</h1>
         </div>
         <nav class="eleventy-navigation" aria-label="Main">

src/posts/2024-10-19_building-a-blog-with-eleventy.md

@@ -1,7 +1,7 @@
 ---
 title: Building a Blog with Eleventy (blind, any%)
 image:
-  src: https://cdn.sebin-nyshkim.net/-QMvyHZfXru
+  src: https://img.sebin-nyshkim.net/i/3163c7b0-4657-40bb-b08a-462a06d1fdd5
   alt: Close-up of SVG code on a computer screen
   credit: Photo by Paico Oficial on Unsplash
   width: 1200

src/posts/2024-10-22_responsive-images-with-self-hosted-image-service-for-your-eleventy-blog.md

@@ -1,7 +1,7 @@
 ---
 title: Responsive, Self-hosted Images for Your Eleventy Blog
 image:
-  src: https://cdn.sebin-nyshkim.net/-iTHSLFBdpY
+  src: https://img.sebin-nyshkim.net/i/f33879d8-3f98-4c8e-a1b3-08edf6f174ac
   alt: Close-up of SVG code on a computer screen
   credit: Photo by Florian Olivo on Unsplash
   width: 1200

src/posts/2024-10-24_apple-clueless-about-ipad.md

@@ -1,7 +1,7 @@
 ---
 title: Apple has no idea what to do with the iPad
 image:
-  src: https://cdn.sebin-nyshkim.net/-rtKd7CgZ6g
+  src: https://img.sebin-nyshkim.net/i/e634e666-bdd0-4694-bd59-929ada1cd30a
   alt: iOS face with swirly eyes emoji surrounded by a word cloud of Apple marketing jargon on red background with jagged lines
   credit: Made with GIMP
   width: 1200

src/posts/2024-10-26_opengraph-data.md

@@ -1,7 +1,7 @@
 ---
 title: Open Graph Metadata and Images in Eleventy Made Easy
 image:
-  src: https://cdn.sebin-nyshkim.net/-asGarKBdVZ
+  src: https://img.sebin-nyshkim.net/i/28d944cf-3630-4db8-bc4e-469769c83d00
   alt: The Open Graph protocol logo sourrounded by the logos of Twitter, Mastodon, Telegram, Discord and the Fediverse
   credit: Made with GIMP, logos © their respective owners
   width: 1200

src/posts/2024-11-14_twitter-exit.md

@@ -1,7 +1,7 @@
 ---
 title: Screw the Bird
 image:
-  src: https://cdn.sebin-nyshkim.net/-6V4ELaxuR6
+  src: https://img.sebin-nyshkim.net/i/b884ca38-6d3c-4ecc-940c-a4137fa79cba
   alt: Person throwing the blue Twitter logo into a trash can
   credit: Made with GIMP
   width: 1200

src/posts/2024-12-08_mastodon-vs-bluesky.md

@@ -1,7 +1,7 @@
 ---
 title: Why Bluesky is running circles around Mastodon
 image:
-  src: https://cdn.sebin-nyshkim.net/-ot2jxWCtxH
+  src: https://img.sebin-nyshkim.net/i/4cc7b20e-6a50-4674-af98-2db254c7737e
   alt: An upset Mastodon logo next to a group of people talking, with one person jumping out from the group with a Bluesky logo on its head giving the Mastodon logo a big, indifferent thumbs up
   credit: Made with GIMP
   width: 1200

src/posts/2025-02-02_start-using-linux.md

@@ -1,7 +1,7 @@
 ---
 title: How I stopped worrying and ended up using Linux instead
 image:
-  src: https://cdn.sebin-nyshkim.net/-bCnLXhZpYp
+  src: https://img.sebin-nyshkim.net/i/b9fd20eb-e4c5-4f76-ae8a-b57773c3acc9
   alt: Photo of a penguin flapping its wings
   credit: Photo by Sander Crombach on Unsplash
   width: 1200

src/posts/2025-04-20_mario-kart-stickershock.md

@@ -1,7 +1,7 @@
 ---
 title: Mario Kart World costing $80 is not the issue
 image:
-  src: https://cdn.sebin-nyshkim.net/-uKSq8Wscus
+  src: https://img.sebin-nyshkim.net/i/273d250e-177c-4054-a20b-f9f3e83bb7b2
   alt: Mario Kart World Key Art
   credit: © Nintendo
   width: 1200

src/posts/posts.json

@@ -6,7 +6,7 @@
   "author": {
     "name": "Sebin Nyshkim",
     "href": "https://blog.sebin-nyshkim.net",
-    "image": "https://cdn.sebin-nyshkim.net/-o3c3fVEgEx"
+    "image": "https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454"
   },
   "twitter": {
     "cardType": "summary_large_image",