🔥 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/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -253,7 +253,16 @@
                    {#each photos as { image, slug, location }}
                        <div class="photo shadow-photo">
                            <a href="/{location.country.slug}/{location.slug}/{slug}">
-                                <Image id={image.id} width={1200} height={800} alt={image.title} />
+                                <Image
+                                    id={image.id}
+                                    sizes={{
+                                        small: { width: 500 },
+                                        medium: { width: 900 },
+                                        large: { width: 1440 },
+                                    }}
+                                    ratio={1.5}
+                                    alt={image.title}
+                                />
                                <PostCard />
                            </a>
                        </div>