🔥 Implement sizes with Image component and webp loading with source

2021-10-13 23:33:07 +02:00
parent c45136beb0
commit 2ed411a94e
3 changed files with 77 additions and 15 deletions
--- a/src/components/molecules/PhotoCard.svelte
+++ b/src/components/molecules/PhotoCard.svelte
@@ -6,5 +6,14 @@
 </script>

 <div class="photo-card">
-    <Image id={id} alt={alt} width={864} height={576} />
+    <Image
+        id={id}
+        sizes={{
+            small: { width: 224 },
+            medium: { width: 464 },
+            large: { width: 864 },
+        }}
+        ratio={1.5}
+        alt={alt}
+    />
 </div>