feat: add vite-imagetools

src/lib/components/CatImage.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { ImageMetadata } from '$lib/utils/types';
+	export let metadata: ImageMetadata[];
+	export let sizes: string;
+
+	const fallback = metadata[metadata.length - 1];
+	const _metadata = metadata.slice(0, metadata.length - 1);
+
+	const srcset = _metadata
+		.map(({ href, width }) => `https://cats.daichendt.one/${href} ${width}w`)
+		.join(',');
+</script>
+
+{#if !fallback && !metadata}
+	No metadata supplied
+{:else}
+	<img {srcset} class="image" alt="A cute kitty" {sizes} loading="lazy" />
+{/if}
+
+<style>
+	.image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+</style>

src/lib/components/Image.svelte

@@ -1,24 +1,165 @@
 <script lang="ts">
-	import type { ImageMetadata } from '$lib/utils/types';
-	export let metadata: ImageMetadata[];
-	export let sizes: string;
+	/**
+	 * the output of a vite-imagetools import, using the `meta` query for output
+	 * format
+	 *
+	 * full type:
+	 * [code](https://github.com/JonasKruckenberg/imagetools/blob/main/packages/core/src/output-formats.ts),
+	 * [docs](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/guide/getting-started.md#metadata)
+	 */
+	export let meta: { src: string; width: number; format: string }[];
+	// if there is only one, vite-imagetools won't wrap the object in an array
+	if (!(meta instanceof Array)) meta = [meta];
 
-	const fallback = metadata[metadata.length - 1];
-	const _metadata = metadata.slice(0, metadata.length - 1);
+	// all images by format
+	let sources = new Map<string, typeof meta>();
+	meta.map((m) => sources.set(m.format, []));
+	meta.map((m) => sources.get(m.format).push(m));
 
-	const srcset = _metadata
-		.map(({ href, width }) => `https://cats.daichendt.one/${href} ${width}w`)
-		.join(',');
+	// fallback image: first resolution of last format
+	let image = sources.get([...sources.keys()].slice(-1)[0])[0];
+
+	/**
+	 * `source` attribute. default: width of the first resolution specified in the
+	 * import.
+	 */
+	export let sizes = '100vw';
+
+	/** `img` attribute */
+	export let alt: string;
+
+	/** `img` attribute */
+	export let loading: string = undefined;
 </script>
 
-{#if !fallback && !metadata}
-	No metadata supplied
-{:else}
-	<img {srcset} class="image" alt="A cute kitty" {sizes} loading="lazy" />
-{/if}
+<!--
+    @component
+    takes the output of a vite-imagetools import (using the `meta` output format)
+    and generates a `<picture>` with `<source>` tags and an `<img>`.
+  
+    usage
+  
+    - in `global.d.ts`
+      ```typescript
+      declare module "*&imagetools" {
+        const out;
+        export default out;
+      }
+      ```
+    - in svelte file
+      - typescript
+        ```typescript
+        import Image from "$lib/Image.svelte";
+        import me from "$lib/assets/me.jpg?w=200;400&format=webp;png&meta&imagetools";
+        ```
+      - html
+        ```html
+        <span><Image meta="{me}" alt="me" /></span>
+        ```
+        - it's not necessary to wrap it in a `<span>`, but i like to avoid unnested
+          `:global()` selectors in svelte css
+      - scss
+        ```scss
+        span :global(img) {
+          border-radius: 50%;
+        }
+        ```
+  
+    example generated `<picture>`
+  
+    ```html
+    <picture>
+      <source
+        sizes="200px"
+        type="image/webp"
+        srcset="
+          /_app/assets/me-3cfc7c5f.webp 200w,
+          /_app/assets/me-ab564f98.webp 400w
+        "
+      />
+      <source
+        sizes="200px"
+        type="image/png"
+        srcset="
+          /_app/assets/me-2bc09a6d.png 200w,
+          /_app/assets/me-6f16cc18.png 400w
+        "
+      />
+      <img src="/_app/assets/me-2bc09a6d.png" alt="me" />
+    </picture>
+    ```
+  
+    notes
+  
+    - from the documentation for
+      [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes),
+  
+      > The selected source size affects the intrinsic size of the image (the
+      > image’s display size if no CSS styling is applied). If the srcset
+      > attribute is absent, or contains no values with a width descriptor, then
+      > the sizes attribute has no effect.
+  
+      there are other things that may also affect the intrinsic (and separately,
+      display) size of the image, but this is all we set here.
+  
+    - the `&imagetools` in the usage above is to make typescript happy. there are
+      other workarounds, if you'd prefer a differnet one
+      https://github.com/JonasKruckenberg/imagetools/issues/160
+    - it'd be nice if we could just use a plain `<img>` tag, but in my bit of
+      testing that didn't seem to allow for multiple formats. i was also tempted
+      to just use png, but in my bit of testing the webp file was only ~10% (!)
+      the size of the png.
+  
+    assumptions
+  
+    - this counts on vite-imagetools returning metadata objects in the same order
+      as the query values are specified
+      - e.g. for `?width=100;200&format=webp;png&meta` we expect the source with
+        `width=100` to come before the one with `width=200`, and likewise for
+        `webp` and `png`
+      - i don't think this is guaranteed, so hopefully it doesn't change. looks
+        like it depends on this bit of code
+        https://github.com/JonasKruckenberg/imagetools/blob/main/packages/core/src/lib/resolve-configs.ts#L17
+  
+    references
+  
+    - responsive images
+      - mdn https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+      - css-tricks https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/
+    - web
+      - html
+        - picture https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
+        - source https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
+        - img https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+      - js
+        - Map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
+      - ts
+        - wildcard module declarations https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
+    - docs
+      - vite-imagetools https://github.com/JonasKruckenberg/imagetools/tree/main/docs
+    - other
+      - how to generate srcset https://github.com/JonasKruckenberg/imagetools/blob/main/packages/core/src/output-formats.ts
+      - `Map` preserves insertion order https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
+      - you don't set elements on `Map` objects the way you do on regular objects
+        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
+        (this was really hard to figure out lol)
+      - vite-imagetools extensions (to make the import query string shorter)
+        - docs https://github.com/JonasKruckenberg/imagetools/blob/main/docs/guide/extending.md
+        - code (options) https://github.com/JonasKruckenberg/imagetools/blob/main/packages/vite/src/types.ts
+  -->
+<picture>
+	{#each [...sources.entries()] as [format, meta]}
+		<source
+			{sizes}
+			type="image/{format}"
+			srcset={meta.map((m) => `${m.src} ${m.width}w`).join(', ')}
+		/>
+	{/each}
+	<img src={image.src} {alt} {loading} />
+</picture>
 
 <style>
-	.image {
+	img {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;

src/routes/blog/ondemand-image-optimization-catapi/index.md

@@ -0,0 +1,65 @@
+---
+created: '2022-08-04'
+title: 'Free, on-demand image optimizations with Cloudflare'
+description: ''
+keywords:
+  - image optimization
+  - docker
+  - sveltekit
+  - svelte
+hidden: true
+---
+
+<script context="module" lang="ts">
+	export async function load() {
+		return {
+			stuff: {
+				title,
+				description,
+        keywords,
+			},
+		};
+	}
+</script>
+
+<script>
+import architecture from "./_architecture.png?width=360;720;1280;1920&webp&metadata"
+import Image from "$components/Image.svelte"
+</script>
+
+I wanted to use responsive images for my small page of cute [cats](/cat). Since
+one of the design goals is to give my significant other, who by the way loves
+cats a lot more than me, the option to add cats on the fly and also consume the
+cat pictures in other services, I require dynamic image optimization.
+
+Requirements:
+
+- On demand addition of new images
+- Optimization for different width and webp / progressive JPEG
+- Served from the edge for lowest latencies
+
+Since I've been working a lot with Cloudflare, I of course checked out their
+[Image](https://developers.cloudflare.com/images/cloudflare-images/) offering.
+While the service would exactly fulfill my requirements, it costs 5€/m, which I
+currently can not afford. I thought, this was a good opportunity to build my own
+little image optimization service, that I could maybe even use in the future for
+other image-related projects.
+
+## Infrastructure overview
+
+I rely on Cloudflare services to serve the optimized images. On pages, this
+Svelte website is hosted. For our API endpoints that this website is querying, I
+utilize Cloudflare workers. The optimized images are stored on the new
+Cloudflare R2 storage and an index is created on KV. Finally, I host the image
+optimization program on a Raspberry Pi at my place. It is connected with a
+Cloudflare tunnel to the internet. Any other device that has computing power and
+is accessible via the internet is alright.
+
+<Image meta={architecture} />
+
+- **(1)**: a user uploads a new image, for example via this site
+- **(2)**: the worker processes forwards the image to the image optimization server
+- **(3)**: the optimization server does its thing and serves the optimized
+  images in a folder. The worker is notified where the optimized images can be found.
+- **(4)**: the worker fetches the images and stores them with a consistent naming scheme in
+- **(5)**: an object containing metadata to the optimized image (location in R2) are inserted into KV

src/routes/cat/index.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <script lang="ts">
-	import Image from '$lib/components/Image.svelte';
+	import Image from '$lib/components/CatImage.svelte';
 	import type { ImageMetadata } from '$lib/utils/types';
 	import Link from '$lib/components/Link.svelte';