From 8d487e0ef70677453b2601240fcc1581e920722c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 16:50:24 +0100
Subject: [PATCH] Use a picture element for Location illustration

Probably better for performances
---
 src/routes/[country]/[location]/index.svelte | 23 +++++++++++---------
 src/style/pages/_location.scss               | 17 +++++----------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index dca910f..9bc1273 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -249,16 +249,19 @@
             </div>
         </div>
 
-        <div class="location-page__illustration"
-            style="
-                --illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
-                --illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
-                --illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
-                --parallax-y: {illustrationOffsetY}px;
-            "
-        >
-            <div />
-        </div>
+        {#if location.illustration_mobile && location.illustration_desktop && location.illustration_desktop_2x}
+            <picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;">
+                <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
+                <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
+                <img
+                    src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
+                    width={320}
+                    height={824}
+                    alt="Illustration for {location.name}"
+                    loading="lazy"
+                />
+            </picture>
+        {/if}
     </section>
 
     {#if photos.length}
diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss
index e527afc..21a08f4 100644
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -161,21 +161,16 @@
         overflow: hidden;
         transform-origin: top center;
 
-        div {
+        img {
+            display: block;
             width: 100%;
-            height: 100%;
-            background: 0 0 var(--illus-mobile) no-repeat;
-            background-size: 100% auto;
+            height: auto;
+            object-fit: contain;
+            pointer-events: none;
+            user-select: none;
             transform: translate3d(0, var(--parallax-y), 0);
             transition: transform 0.7s var(--ease-quart);
             will-change: transform, opacity;
-
-            @include bp (sm) {
-                background-image: var(--illus-desktop);
-            }
-            @include bp (xl) {
-                background-image: var(--illus-desktop-2x);
-            }
         }
     }