feat(frontend): ImageVariant component and WASM encoder workers

Add client-side multi-format image encoding via Web Workers using @jsquash and @discourse/jxl libraries. ImageVariant Svelte component renders <picture> elements with format-aware fallback. Vite configured for WASM asset inclusion and encoder dependency exclusion. Portfolio page updated to use multi-format URLs.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/lib/workers/avif-encoder.ts

@@ -0,0 +1,11 @@
+import { init, default as encode } from '@jsquash/avif/encode.js';
+
+self.onmessage = async (e: MessageEvent<{ imageData: ImageData; quality: number }>) => {
+	try {
+		await init({ locateFile: (path: string) => `/${path}` });
+		const encoded = await encode(e.data.imageData, { quality: e.data.quality });
+		self.postMessage({ encoded, format: 'avif' }, { transfer: [encoded as Transferable] });
+	} catch (err) {
+		self.postMessage({ error: (err as Error).message, format: 'avif' });
+	}
+};

frontend/src/lib/workers/jpeg-encoder.ts

@@ -0,0 +1,11 @@
+import { init, default as encode } from '@jsquash/jpeg/encode.js';
+
+self.onmessage = async (e: MessageEvent<{ imageData: ImageData; quality: number }>) => {
+	try {
+		await init({ locateFile: (path: string) => `/${path}` });
+		const encoded = await encode(e.data.imageData, { quality: e.data.quality });
+		self.postMessage({ encoded, format: 'jpg' }, { transfer: [encoded as Transferable] });
+	} catch (err) {
+		self.postMessage({ error: (err as Error).message, format: 'jpg' });
+	}
+};

frontend/src/lib/workers/jxl-encoder.ts

@@ -0,0 +1,11 @@
+import { init, default as encode } from '@discourse/jxl/encode.js';
+
+self.onmessage = async (e: MessageEvent<{ imageData: ImageData; quality: number }>) => {
+	try {
+		await init({ locateFile: (path: string) => `/${path}` });
+		const encoded = await encode(e.data.imageData, { effort: 4, quality: e.data.quality });
+		self.postMessage({ encoded, format: 'jxl' }, { transfer: [encoded as Transferable] });
+	} catch (err) {
+		self.postMessage({ error: (err as Error).message, format: 'jxl' });
+	}
+};

frontend/src/lib/workers/webp-encoder.ts

@@ -0,0 +1,11 @@
+import { init, default as encode } from '@jsquash/webp/encode.js';
+
+self.onmessage = async (e: MessageEvent<{ imageData: ImageData; quality: number }>) => {
+	try {
+		await init({ locateFile: (path: string) => `/${path}` });
+		const encoded = await encode(e.data.imageData, { quality: e.data.quality });
+		self.postMessage({ encoded, format: 'webp' }, { transfer: [encoded as Transferable] });
+	} catch (err) {
+		self.postMessage({ error: (err as Error).message, format: 'webp' });
+	}
+};