feat: add CMS image optimizer

package.json

@@ -24,6 +24,7 @@
     "@fortawesome/free-solid-svg-icons": "^7.3.1",
     "date-fns": "^4.4.0",
     "openapi-fetch": "^0.17.0",
+    "sharp": "0.35.4",
     "sweetalert2": "^11.26.25"
   },
   "devDependencies": {

src/lib/components/CmsImage.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { buildCmsImageAttributes } from '#lib/images/cmsImage.ts';
+
+    interface Props {
+        src: string;
+        width: number;
+        height: number;
+        alt: string;
+        quality?: 75 | 100;
+        loading?: 'eager' | 'lazy';
+        decoding?: 'async' | 'auto' | 'sync';
+        fetchpriority?: 'high' | 'low' | 'auto';
+        class?: string;
+        style?: string;
+    }
+
+    let {
+        src,
+        width,
+        height,
+        alt,
+        quality = 75,
+        loading,
+        decoding,
+        fetchpriority,
+        class: className,
+        style,
+    }: Props = $props();
+
+    let attrs = $derived(
+        buildCmsImageAttributes({
+            src,
+            width,
+            height,
+            alt,
+            quality,
+            loading,
+            decoding,
+            fetchpriority,
+            class: className,
+            style,
+        }),
+    );
+</script>
+
+<img
+    src={attrs.src}
+    srcset={attrs.srcset}
+    width={attrs.width}
+    height={attrs.height}
+    alt={attrs.alt}
+    loading={attrs.loading}
+    decoding={attrs.decoding}
+    fetchpriority={attrs.fetchpriority}
+    class={attrs.class}
+    style={attrs.style}
+/>

src/lib/images/cmsImage.ts

@@ -0,0 +1,90 @@
+const DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840] as const;
+const IMAGE_SIZES = [32, 48, 64, 96, 128, 256, 384] as const;
+
+export const NEXT_IMAGE_SIZES = [...IMAGE_SIZES, ...DEVICE_SIZES].sort(
+    (a, b) => a - b,
+);
+
+export interface CmsImageAttributesOptions {
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+    quality?: 75 | 100;
+    loading?: 'eager' | 'lazy';
+    decoding?: 'async' | 'auto' | 'sync';
+    fetchpriority?: 'high' | 'low' | 'auto';
+    class?: string;
+    style?: string;
+}
+
+export interface CmsImageAttributes {
+    src: string;
+    srcset: string;
+    width: number;
+    height: number;
+    alt: string;
+    loading?: 'eager' | 'lazy';
+    decoding?: 'async' | 'auto' | 'sync';
+    fetchpriority?: 'high' | 'low' | 'auto';
+    class?: string;
+    style?: string;
+}
+
+export function nextFixedWidths(width: number): number[] {
+    return [
+        ...new Set(
+            [width, width * 2].map(
+                (target) =>
+                    NEXT_IMAGE_SIZES.find((candidate) => candidate >= target) ??
+                    NEXT_IMAGE_SIZES[NEXT_IMAGE_SIZES.length - 1],
+            ),
+        ),
+    ];
+}
+
+export function buildOptimizerUrl(
+    src: string,
+    width: number,
+    quality = 75,
+): string {
+    const params = new URLSearchParams({
+        url: src,
+        w: width.toString(),
+        q: quality.toString(),
+    });
+
+    return `/_image?${params}`;
+}
+
+export function buildCmsImageAttributes({
+    src,
+    width,
+    height,
+    alt,
+    quality = 75,
+    loading,
+    decoding,
+    fetchpriority,
+    class: className,
+    style,
+}: CmsImageAttributesOptions): CmsImageAttributes {
+    const widths = nextFixedWidths(width);
+    const descriptors = widths.map(
+        (candidate, index) =>
+            `${buildOptimizerUrl(src, candidate, quality)} ${index + 1}x`,
+    );
+
+    return {
+        src: buildOptimizerUrl(src, widths[widths.length - 1], quality),
+        srcset: descriptors.join(', '),
+        width,
+        height,
+        alt,
+        loading,
+        decoding,
+        fetchpriority,
+        class: className,
+        style,
+    };
+}