diff --git a/src/lib/components/ImageTile.svelte b/src/lib/components/ImageTile.svelte index 3f8ac13..dfe8c74 100644 --- a/src/lib/components/ImageTile.svelte +++ b/src/lib/components/ImageTile.svelte @@ -12,16 +12,36 @@ const placeholder = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxyZWN0IGZpbGw9IiMzMzMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4='; let imageSrc = $derived(src || placeholder); + + // Generate srcset for optimized images from our proxy + let srcset = $derived.by(() => { + if (!src || !src.startsWith('/assets/')) return undefined; + + const widths = [400, 800, 1200, 1600]; + const sets = widths.map(w => `${src}${src.includes('?') ? '&' : '?'}w=${w} ${w}w`); + + // Add original as fallback + sets.push(`${src} 2000w`); + + return sets.join(', '); + }); + + const sizes = "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw";