From 9c3f848fa80cdf9c7f946f3d7595005137a73b64 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Sun, 24 Jul 2022 08:51:00 -0500
Subject: [PATCH] Use Webp for album thumbnail

---
 web/src/lib/components/album-page/album-card.svelte | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index bfc92d5f38..4a6fd52e5a 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -13,7 +13,9 @@
 			return '/no-thumbnail.png';
 		}
 
-		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, { responseType: 'blob' });
+		const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, {
+			responseType: 'blob'
+		});
 		if (data instanceof Blob) {
 			imageData = URL.createObjectURL(data);
 			return imageData;
@@ -21,10 +23,15 @@
 	};
 </script>
 
-<div class="h-[339px] w-[275px] hover:cursor-pointer mt-4" on:click={() => dispatch('click', album)}>
+<div
+	class="h-[339px] w-[275px] hover:cursor-pointer mt-4"
+	on:click={() => dispatch('click', album)}
+>
 	<div class={`h-[275px] w-[275px]`}>
 		{#await loadImageData(album.albumThumbnailAssetId)}
-			<div class={`bg-immich-primary/10 w-full h-full  flex place-items-center place-content-center rounded-xl`}>
+			<div
+				class={`bg-immich-primary/10 w-full h-full  flex place-items-center place-content-center rounded-xl`}
+			>
 				...
 			</div>
 		{:then imageData}