🔍 Better image size

src/lib/components/Picture.svelte

@@ -2,17 +2,71 @@
 	import type { Picture } from '$lib/types/Picture';
 
 	export let picture: Picture | undefined;
-	export let minStorage = 0;
+
+	let className = '';
+	export { className as class };
+	export let style = '';
+
+	let matchedWidth: number | null = null;
+	let matchedHeight: number | null = null;
+
+	$: if (/(\s|^)w-(\d+)(\s|$)/.test(className)) {
+		matchedWidth = parseInt(className.match(/(\s|^)w-(\d+)(\s|$)/)![2]) * 4;
+	} else {
+		matchedWidth = null;
+	}
+
+	$: if (/(\s|^)h-(\d+)(\s|$)/.test(className)) {
+		matchedHeight = parseInt(className.match(/(\s|^)h-(\d+)(\s|$)/)![2]) * 4;
+	} else {
+		matchedHeight = null;
+	}
+
+	let computedWidth: number | null = null;
+	let computedHeight: number | null = null;
+
+	$: {
+		if (matchedWidth !== null) {
+			computedWidth = null;
+		} else if (matchedHeight !== null && picture) {
+			computedWidth = Math.round(
+				(matchedHeight / picture.storage[0].height) * picture.storage[0].width
+			);
+		} else {
+			computedWidth = null;
+		}
+	}
+
+	$: {
+		if (matchedHeight !== null) {
+			computedHeight = null;
+		} else if (matchedWidth !== null && picture) {
+			computedHeight = Math.round(
+				(matchedWidth / picture.storage[0].width) * picture.storage[0].height
+			);
+		} else {
+			computedHeight = null;
+		}
+	}
+
+	$: computedStyle = `${computedWidth !== null ? `width: ${computedWidth}px;` : ''} ${
+		computedHeight !== null ? `height: ${computedHeight}px;` : ''
+	} ${style}`;
 </script>
 
 {#if picture}
 	<img
 		alt={picture.name}
 		srcset={picture.storage
-			.slice(minStorage)
 			.map((format) => `/photos/raw/${format._id} ${format.width}w`)
 			.join(', ')}
+		sizes={matchedWidth ?? computedWidth !== null ? `${matchedWidth ?? computedWidth}px` : `100vw`}
+		class={className}
+		style={computedStyle}
 		{...$$restProps}
+		on:keydown
+		on:keypress
+		on:keyup
 		on:click
 		on:load
 	/>

src/lib/server/photo.ts

@@ -26,7 +26,7 @@ export async function generatePicture(
 		});
 	}
 
-	for (const size of [2048, 1024, 512]) {
+	for (const size of [2048, 1024, 512, 256, 128]) {
 		if (width > size || height > size) {
 			const buffer = await image
 				.resize(width > height ? { width: size } : { height: size })

src/routes/+page.svelte

@@ -91,6 +91,7 @@
 					picture={pic}
 					class="rounded-3xl object-contain"
 					style="max-width: 100%; max-height: 100%"
+					sizes="(min-width: 650px) 50vw, 95vw"
 				/>
 			</div>
 		{/each}
@@ -101,6 +102,7 @@
 	<section class="h-xl rounded-3xl bg-oxford overflow-hidden flex mb-12">
 		<Picture
 			class="w-2/6 h-full object-cover"
+			sizes="(min-width: 1200px) 400px, 33vw"
 			picture={pictures.find((p) => p._id === pageData.pictures['e-shop'])}
 		/>
 		<div class="w-4/6 h-full px-6 py-12 text-white flex flex-col box-border">

src/routes/admin/photos/+page.svelte

@@ -13,7 +13,7 @@
 	{#each data.photos as photo}
 		<div class="flex flex-col text-center">
 			<a href="/admin/photos/{photo._id}" class="flex flex-col items-center">
-				<Picture picture={photo} class="h-36 block" style="object-fit: scale-down;" />
+				<Picture picture={photo} class="h-36 block" />
 				<span>{photo.name}</span>
 			</a>
 		</div>

src/routes/admin/produits/+page.svelte

@@ -13,7 +13,7 @@
 	{#each data.products as product}
 		<div class="flex flex-col text-center">
 			<a href="/admin/produits/{product._id}" class="flex flex-col items-center">
-				<Picture picture={product.photos[0]} class="h-36 block" style="object-fit: scale-down;" />
+				<Picture picture={product.photos[0]} class="h-36 block" />
 				<span class="mt-2">{product.name}</span>
 			</a>
 		</div>

src/routes/tissus-et-finitions/+page.svelte

@@ -19,7 +19,7 @@
 				data-title={picture.name}
 			>
 				<Picture
-					minStorage={1}
+					sizes="(min-width: 1024px) 33vw, (min-width: 675px) 50vw, 100vw"
 					{picture}
 					class="max-w-full {picture.loaded ? 'loaded' : ''}"
 					loading="lazy"

src/routes/vente/+page.svelte

@@ -16,6 +16,7 @@
 <div class="h-full-without-banner w-full relative">
 	<Picture
 		picture={pictures.find((p) => p._id === pageData.pictures.background)}
+		sizes="100vw"
 		class="h-full w-full object-cover absolute top-0 bottom-0 left-0 right-0 bg-brunswick text-white"
 		style="z-index: -1"
 	/>
@@ -45,7 +46,7 @@
 					{/if}
 					<Picture
 						picture={product.photos[0]}
-						minStorage={1}
+						sizes="(min-width: 1024px) 33vw, (min-width: 675px) 50vw, 100vw"
 						class="picture mx-auto max-w-full h-full hover-zoom rounded"
 					/>
 				</div>
@@ -69,7 +70,7 @@
 				<div class="overflow-hidden rounded relative">
 					<Picture
 						picture={product.photos[0]}
-						minStorage={1}
+						sizes="(min-width: 1024px) 33vw, (min-width: 675px) 50vw, 100vw"
 						class="picture mx-auto max-w-full h-full hover-zoom rounded"
 					/>
 				</div>

src/routes/vente/[id]/+page.svelte

@@ -24,6 +24,7 @@
 			<a href="/photos/raw/{product.photos[photoIndex].storage[0]._id}" target="_blank">
 				<Picture
 					picture={product.photos[photoIndex]}
+					sizes="(min-width: 1152px) 576px, (max-width: 1024px) 100vw, 50vw"
 					title="Cliquez pour voir la photo entière"
 					class="max-w-full max-h-md lg:max-h-xl rounded-3xl"
 				/>