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})/);
+  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, {
-      widths: [1920, 2560, 3840],
+      ...ELEVENTY_IMAGE_DEFAULTS,
-      sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
+      widths: [1920, 2560, 3840]
-      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

@@ -15,8 +15,8 @@
         twitter_card_type = twitter.cardType,
         name              = author.name,
         generator         = eleventy.generator,
-        preconnect        = ['https://cdn.sebin-nyshkim.net'],
+        preconnect        = ['https://img.sebin-nyshkim.net'],
-        dns_prefetch      = ['https://cdn.sebin-nyshkim.net'],
+        dns_prefetch      = ['https://img.sebin-nyshkim.net'],
         css               = ['/fonts/tilt-warp/tilt-warp.css',
                              '/fonts/encode-sans/encode-sans.css',
                              '/fonts/m-plus-1-code/m-plus-1-code.css',
@@ -28,14 +28,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
@@ -57,7 +57,7 @@ The PicoShare `README.md` doesn't use volumes in its compose file example, but i
 
 So after a quick `docker compose up -d` PicoShare should be up and running in no time and visiting `http://localhost:4001` should give your its greeting page.
 
-![PicoShare greeting page](https://cdn.sebin-nyshkim.net/-BGWx72DQ4u)
+![PicoShare greeting page](https://img.sebin-nyshkim.net/i/6df54a9e-e42f-4c6d-bd2d-105ff4e1cc16)
 
 From there you can log in with the passphrase you set in the `docker-compose.yml` and start uploading some files. By default, PicoShare sets an expiration period of 30 days on every upload. If you plan on using it for blog post images, that's probably not what you want, so you may want to disable that in the settings.
 

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
@@ -130,7 +130,7 @@ Apple remains the undisputed leader of the tablet market with the iPad. They don
 
 But I don't think that's why they're doing it. As mentioned in the beginning, the iPad mini has been equipped with an A17 Pro, the same chip as in the iPhone 15 Pro. If you've been keeping up with news in the IT space lately, you've probably noticed a very specific trend getting mentioned quite often: "AI"
 
-![Two girls in school uniforms. One girl is standing with her back to the wall (caption: me). The other girl (caption: every company) points a giant tuba at her (caption: AI), covering her head](https://cdn.sebin-nyshkim.net/-bDpftkDQLP)
+![Two girls in school uniforms. One girl is standing with her back to the wall (caption: me). The other girl (caption: every company) points a giant tuba at her (caption: AI), covering her head](https://img.sebin-nyshkim.net/i/4c62d067-970a-4c4e-b0fe-e71d1865fe28)
 
 Apple has been very hesitant to jump on this bandwagon, but in the end, they are also following Silicon Valley's Hail Mary moment and calling it "Apple Intelligence". The fact is that "AI" calculations are very computationally intensive and require special compute units (NPUs) in processors to be able to come up with results in a reasonable amount of time without draining the battery.
 

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
@@ -109,7 +109,7 @@ It's not that people love corporate social media so much. It is highly likely th
 
 The barrier to entry for Mastodon is high, nobody they know is there and if you stay long enough the vibe is extremely off.
 
-![Condolence card reading: With Sympathy on your new Bluesky/Threads account. Our deepest condolences on the inevitability painful realization that your expectations were not informed by past evidence.](https://cdn.sebin-nyshkim.net/-WgVbSeHyaD "The \"Condolences\" Mastodon users expressed for people joining Bluesky and Threads instead of Mastodon")
+![Condolence card reading: With Sympathy on your new Bluesky/Threads account. Our deepest condolences on the inevitability painful realization that your expectations were not informed by past evidence.](https://img.sebin-nyshkim.net/i/e7711e31-0d82-406c-9d4d-74ecff3c7582 "The \"Condolences\" Mastodon users expressed for people joining Bluesky and Threads instead of Mastodon")
 
 The way anything remotely corporate is not only frowned upon, but actively despised. The way users of other platforms are constantly ridiculed and made the target of spite begs the question if the average user base on Mastodon has the emotional intelligence and self-awareness of a sponge[^mastodig]. I hate what the internet has become under the corporate leadership of pump & dump scheme Silicon Valley as much as the next guy, but to imply that people are "too brainwashed" to make a "better informed" decision so it gives the invested Mastodon user a reason to pout to make them feel better makes them look like an immature child that didn't get the birthday present it wanted. But point that out to the larger group and be expected to be tarred and feathered by an angry mob because you dared question the sanctity of Mastodon's noble principles.
 
@@ -137,7 +137,7 @@ I need both of these parties to understand something very basic: Given the choic
 
 You won't sell people on merits that aren't important in their day to day.
 
-![Simpsons bus driver meme. He taps a sign that reads: You won't sell people on merits that aren't important in their day to day](https://cdn.sebin-nyshkim.net/-dM6mv9N5MT "Maybe it will stick better as a meme?")
+![Simpsons bus driver meme. He taps a sign that reads: You won't sell people on merits that aren't important in their day to day](https://img.sebin-nyshkim.net/i/798f8d11-d8da-42fc-b71e-9f80adfc48d2 "Maybe it will stick better as a meme?")
 
 For the same reason we've still not arrived at end-to-end encryption being a standard in our daily communication, Mastodon is not the standard for social media. It offers a worse experience without offering a clear and concise reason how that is better than the thing that serves people's means of self-actualization right now.
 

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
@@ -50,7 +50,7 @@ After a few days of running [Linux Mint](https://linuxmint.com) on my machine, i
 I thought I was going crazy. How could a change in OS be the solution to this seemingly unsolvable mess?! But it was and it allowed me to use my machine again. That was all that really mattered to me and so I started to adapt to my new situation.
 
 +++ Side Note
-![Screenshot of SuSE Linux 9.0 running KDE 3.1 with a few applications opened](https://cdn.sebin-nyshkim.net/-B88C5jFVA7 "This was my first introduction to Linux on the desktop in 2004")
+![Screenshot of SuSE Linux 9.0 running KDE 3.1 with a few applications opened](https://img.sebin-nyshkim.net/i/f2f08400-7db1-4ad7-8e98-0fd56c87b9b4 "This was my first introduction to Linux on the desktop in 2004")
 
 The first time I tried getting into Linux was during my teens in secondary school, starting with SuSE Linux 9.0 around 2004, included on a CD in a magazine with an installation guide. I was fascinated about the little things open source software did differently from what I was used to, e.g. tabs in the file manager, installing any software in a centralized software center, customizing the look and feel by just downloading files from the internet, copy them somewhere and BOOM new theme! I even held presentations in school showcasing how similar Linux and Windows were in terms of day to day use-cases, like listening to music, watching videos, writing documents and surfing the web.
 
@@ -59,7 +59,7 @@ I tried other Linux distributions as well, like Debian and eventually Ubuntu. Th
 I even played games on Linux back then, like Doom 3 and Neverwinter Nights (these actually had official Linux versions readily available). But the majority of games I played were exclusive to Windows and unworkable with the version of Wine that was available at the time. So I was missing a reason to stay on Linux for longer because for most of the things I did with a computer, I still needed to boot back into Windows. Alas.
 +++
 
-![Linux Mint 18 with its flagship Cinnamon desktop](https://cdn.sebin-nyshkim.net/-Bx5pkSihhX "Since I've heard a lot of good things about Linux Mint I was giving that a shot and it served me well for many years")
+![Linux Mint 18 with its flagship Cinnamon desktop](https://img.sebin-nyshkim.net/i/a6f466d8-8648-4b68-9532-72d40c548bee "Since I've heard a lot of good things about Linux Mint I was giving that a shot and it served me well for many years")
 
 I was still very "Windows pilled", in that I avoided doing things via the terminal like the plague. Luckily, Linux Mint being very beginner focused allowed me to avoid it for most stuff. I only updated core system packages with `apt`, the rest of my apps I took from somewhere else as a `*.deb` package or I went to the software store app that came with Linux Mint.
 
@@ -85,7 +85,7 @@ Lucky for me, I noticed a certain distribution climb the ranks on [distrowatch.c
 
 I looked further into it and learned it was *Arch-based*. I've never heard of any distro being based on anything else other than Debian or Ubuntu. It presented itself as both bleeding edge and user friendly and I was gonna give it a shot, if that meant I would also get to do more tinkering.
 
-![Screenshot of Manjaro KDE with the file manager and terminal open, next to a couple system monitor desktop widgets. The wallpaper has a milk glass appearance behind open windows.](https://cdn.sebin-nyshkim.net/-BFoUGXUFLb "My customized Manjaro KDE desktop at the time. I'm such a sucker for glassy interfaces 😩💦")
+![Screenshot of Manjaro KDE with the file manager and terminal open, next to a couple system monitor desktop widgets. The wallpaper has a milk glass appearance behind open windows.](https://img.sebin-nyshkim.net/i/c28b5e66-6b7f-4392-89ba-2dc62f43a38d "My customized Manjaro KDE desktop at the time. I'm such a sucker for glassy interfaces 😩💦")
 
 And for the most part, I pretty much got what I expected. I was able to enjoy very recent software, on a rolling release basis, without the frills of having to manage everything myself. Also, I learned of a neat little thing called the [AUR](https://aur.archlinux.org/), with tons of more great software that was just waiting for me to install it. I was very excited of the possibilities! Also, Manjaro being a rolling-release disto, just like Arch, meant I did not have to deal with major distribution release cycles, receiving updates to the latest versions when they become available. I was always up to date, as long as I just kept installing periodic system updates. What a concept!
 

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"