From 4f5e6c2df3e80107c3e8836753777a148ccba2fd Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 18 Jan 2023 18:47:53 +0100
Subject: [PATCH] feat: optimize responsive images

---
 src/views/AnatomyView.vue | 150 ++++++++++++++++++++++++++++++--------
 1 file changed, 118 insertions(+), 32 deletions(-)

diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
index a9cd13e..bea5961 100644
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@@ -19,23 +19,56 @@ const colors = [
     <h1>{{ $route.meta.title }}</h1>
   </section>
 
-  <RefImage>
-    <source
-      srcset="
-        @/assets/viktor-ref-SFW-alpha.png?w=400;700;1000&avif&quality=75&srcset
-      "
-      type="image/avif"
-    />
-    <source
-      srcset="
-        @/assets/viktor-ref-SFW-alpha.png?w=400;700;1000&webp&quality=100&srcset
-      "
-      type="image/webp"
-    />
-    <img
-      src="@/assets/viktor-ref-SFW-alpha.png?w=700&png"
-      alt="Viktor Ref by sabertoofs"
-    />
+  <RefImage dropshadow>
+    <template v-if="$route.query.nsfw">
+      <source
+        srcset="
+          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+        type="image/avif"
+      />
+      <source
+        srcset="
+          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+        type="image/webp"
+      />
+      <img
+        srcset="
+          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+        alt="Viktor Ref by sabertoofs"
+        loading="lazy"
+      />
+    </template>
+
+    <template v-else>
+      <source
+        srcset="
+          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+        type="image/avif"
+      />
+      <source
+        srcset="
+          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+        type="image/webp"
+      />
+      <img
+        srcset="
+          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+        alt="Viktor Ref by sabertoofs"
+        loading="lazy"
+      />
+    </template>
 
     <template #caption>
       Viktor Ref &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
@@ -64,21 +97,74 @@ const colors = [
     </p>
   </section>
 
-  <RefImage>
-    <source
-      srcset="
-        @/assets/viktor-front-SFW-alpha.png?w=400;700;1000&avif&quality=75&srcset
-      "
-    />
-    <source
-      srcset="
-        @/assets/viktor-front-SFW-alpha.png?w=400;700;1000&webp&quality=100&srcset
-      "
-    />
-    <img
-      src="@/assets/viktor-front-SFW-alpha.png?w=700&png"
-      alt="Viktor frontal shot by sabertoofs"
-    />
+  <RefImage dropshadow>
+    <template v-if="$route.query.nsfw">
+      <source
+        srcset="
+          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 710px,
+               (min-width: 50em) 590px,
+               (min-width: 27em) 530px,
+               430px"
+        type="image/avif"
+      />
+      <source
+        srcset="
+          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 710px,
+               (min-width: 50em) 590px,
+               (min-width: 27em) 530px,
+               430px"
+        type="image/webp"
+      />
+      <img
+        srcset="
+          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 710px,
+               (min-width: 50em) 590px,
+               (min-width: 27em) 530px,
+               430px"
+        alt="Viktor frontal shot by sabertoofs"
+        loading="lazy"
+      />
+    </template>
+
+    <template v-else>
+      <source
+        srcset="
+          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 710px,
+               (min-width: 50em) 590px,
+               (min-width: 27em) 530px,
+               430px"
+        type="image/avif"
+      />
+      <source
+        srcset="
+          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 710px,
+               (min-width: 50em) 590px,
+               (min-width: 27em) 530px,
+               430px"
+        type="image/webp"
+      />
+      <img
+        srcset="
+          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
+        "
+        sizes="(min-width: 64em) 710px,
+               (min-width: 50em) 590px,
+               (min-width: 27em) 530px,
+               430px"
+        alt="Viktor frontal shot by sabertoofs"
+        loading="lazy"
+      />
+    </template>
 
     <template #caption>
       Viktor frontal shot &copy;