From 32e3e3310ee4da121efc18cf3b2a11e1b405212b Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 12 Apr 2024 06:17:54 +0200
Subject: [PATCH] experimented with different image sizes

---
 webclient/components/DetailsInfoSection.vue | 2 ++
 webclient/pages/[view]/[id].vue             | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/webclient/components/DetailsInfoSection.vue b/webclient/components/DetailsInfoSection.vue
index dc6672021..9c7149a05 100644
--- a/webclient/components/DetailsInfoSection.vue
+++ b/webclient/components/DetailsInfoSection.vue
@@ -31,6 +31,8 @@ const runtimeConfig = useRuntimeConfig();
           class="bg-zinc-100 block h-auto w-full max-w-full rounded-t-lg"
           preload
           placeholder
+          sizes="500px sm:200px md:300px md:400px"
+          densities="x1 x2"
         />
       </button>
       <div class="px-5 py-3">
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index 902f130e8..ccebde2ae 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -135,10 +135,11 @@ onMounted(() => {
         height="105"
         :alt="t('image_alt')"
         :src="`${runtimeConfig.public.cdnURL}/cdn/lg/${data.imgs[0].name}`"
-        densities="x1 x2 x3 x4"
+        sizes="1024px sm:256px md:512px"
+        densities="x1 x2"
         class="block w-full"
         preload
-        placeholder
+        :placeholder="[256, 105]"
       />
     </button>