From 7b946854515db225a856f44dc84ee0852acec000 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 23 Nov 2021 12:02:50 +0100
Subject: [PATCH] Manage Images sizes & srcset only if is set

---
 src/components/atoms/Image.svelte | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/atoms/Image.svelte b/src/components/atoms/Image.svelte
index 4fdf5fe..de0b9f4 100644
--- a/src/components/atoms/Image.svelte
+++ b/src/components/atoms/Image.svelte
@@ -48,16 +48,22 @@
     $: imgHeight = sizes && sizes.small ? sizes.small.height : height
     $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
     $: srcSet = {
-        webp: [
-            `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
-            sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : undefined,
-            sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : undefined,
-        ],
-        jpg: [
-            `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
-            sizes && sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : undefined,
-            sizes && sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : undefined,
-        ]
+        // WebP
+        webp:
+            sizes ? [
+                `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
+                sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
+                sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
+            ]
+            : [getAssetUrlKey(id, `${sizeKey}-webp`)],
+        // JPG
+        jpg:
+            sizes ? [
+                `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
+                sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
+                sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,
+            ]
+            : [getAssetUrlKey(id, `${sizeKey}-jpg`)]
     }
 </script>
 
@@ -68,7 +74,7 @@
     >
     <img
         src={imgSrc}
-        sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%"
+        sizes={sizes ? '(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%' : null}
         srcset={srcSet.jpg.join(', ').trim()}
         width={imgWidth}
         height={imgHeight}