From d984651fc894757860436de0225a9341910cff8a Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 21 Jul 2023 15:40:33 +0200
Subject: [PATCH] feat: update responsive image srcsets, genereate fewer images

---
 src/views/AbilitiesView.vue |  24 ++++----
 src/views/AnatomyView.vue   |  92 ++++++++++++++--------------
 src/views/ClothingView.vue  | 119 +++++++++++++++---------------------
 3 files changed, 108 insertions(+), 127 deletions(-)

diff --git a/src/views/AbilitiesView.vue b/src/views/AbilitiesView.vue
index 7afdc30..654d962 100644
--- a/src/views/AbilitiesView.vue
+++ b/src/views/AbilitiesView.vue
@@ -24,21 +24,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Fire Breath"
@@ -61,21 +61,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Fire Breath"
@@ -98,21 +98,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Kindled Fist"
@@ -134,21 +134,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Burning Twister"
diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
index 66fe1d8..1fb3485 100644
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@@ -315,27 +315,27 @@ const showModal = inject<Function>(showModalKey, Function)
     </p>
   </section>
 
-  <RefFigure id="sebin-upper-body-ref" polaroidBorder>
+  <RefFigure id="sebin-upper-body-ref" cornerText>
     <!-- max 3617px -->
     <template #img>
       <picture>
         <source
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           type="image/avif"
         />
         <source
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           type="image/webp"
         />
         <img
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;500;600;700;800;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           alt="Sebin's upper body closeup"
@@ -362,27 +362,27 @@ const showModal = inject<Function>(showModalKey, Function)
   </section>
 
   <RefGallery>
-    <RefFigure id="sebin-muscle-ref12" polaroidBorder>
+    <RefFigure id="sebin-muscle-ref12" cornerText>
       <!-- max 1964px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;640;770;900;580;1280;1540;1800;870;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             alt="Sebin flexing"
@@ -395,27 +395,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref1" polaroidBorder nsfw>
+    <RefFigure id="sebin-muscle-ref1" cornerText nsfw>
       <!-- max 2480px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin beckons"
@@ -428,27 +428,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://twitter.com/GrisserArt">Grisser</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref2" polaroidBorder>
+    <RefFigure id="sebin-muscle-ref2" cornerText>
       <!-- max 2953px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;750;875;1250;1500;1750;1875;2250;2625&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             alt="Sebin jamming out to some tunes"
@@ -461,27 +461,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref3" polaroidBorder>
+    <RefFigure id="sebin-muscle-ref3" cornerText>
       <!-- max 4961px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin flexing"
@@ -494,27 +494,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://www.furaffinity.net/user/Marsel-Defender"> Marsel-Defender </a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref4" polaroidBorder nsfw>
+    <RefFigure id="sebin-muscle-ref4" cornerText nsfw>
       <!-- max 3000px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;700;840;980;800;1400;1680;1960;1200;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             alt="Sebin soaping up"
@@ -527,27 +527,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://twitter.com/O_reowoof">(o)reo</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref5" polaroidBorder nsfw>
+    <RefFigure id="sebin-muscle-ref5" cornerText nsfw>
       <!-- max 2000px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;525;630;735;830;1050;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             alt="Sebin bulging out"
@@ -560,27 +560,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://www.furaffinity.net/user/sexmuffin">SexMuffin</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref6" polaroidBorder nsfw>
+    <RefFigure id="sebin-muscle-ref6" cornerText nsfw>
       <!-- max 1500px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;545;655;765;800;1090;1310;1200;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             alt="Sebin showing you his rings"
@@ -593,7 +593,7 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref7" polaroidBorder>
+    <RefFigure id="sebin-muscle-ref7" cornerText>
       <!-- max 1240px -->
       <template #img>
         <picture>
@@ -626,7 +626,7 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref8" polaroidBorder>
+    <RefFigure id="sebin-muscle-ref8" cornerText>
       <!-- max 1245px -->
       <template #img>
         <picture>
@@ -659,27 +659,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://twitter.com/UsurpThem">Usurp</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref9" polaroidBorder>
+    <RefFigure id="sebin-muscle-ref9" cornerText>
       <!-- max 2550px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;880;1120;800;1470;1760;2240;1200;2205;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             alt="Sebin getting out of the pool"
@@ -692,27 +692,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref10" polaroidBorder nsfw>
+    <RefFigure id="sebin-muscle-ref10" cornerText nsfw>
       <!-- max 2421px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;425;510;600;760;850;1020;1200;1140;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             alt="Sebin getting frisky on the train"
@@ -725,27 +725,27 @@ const showModal = inject<Function>(showModalKey, Function)
         <a href="https://twitter.com/Wintech3112">Winty</a>
       </template>
     </RefFigure>
-    <RefFigure id="sebin-muscle-ref11" polaroidBorder>
+    <RefFigure id="sebin-muscle-ref11" cornerText>
       <!-- max 3184px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;545;655;765;800;1090;1210;1530;1200;1635;1965;2295&png&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&png&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             alt="Sebin getting ready to lift"
diff --git a/src/views/ClothingView.vue b/src/views/ClothingView.vue
index 22dcdc2..e258353 100644
--- a/src/views/ClothingView.vue
+++ b/src/views/ClothingView.vue
@@ -9,27 +9,27 @@ import RefGallery from '@/components/RefGallery.vue'
   </section>
 
   <RefGallery>
-    <RefFigure id="casual-outfit" polaroidBorder>
+    <RefFigure id="casual-outfit" cornerText>
       <!-- max 1876px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;650;780;910;800;1300;1560;1820;1200;0&png&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&png&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             alt="Sebin in his casual outfit"
@@ -38,35 +38,32 @@ import RefGallery from '@/components/RefGallery.vue'
         </picture>
       </template>
 
-      <template #caption>
-        <p>Sebin in his casual outfit</p>
-        <p>Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers</p>
-      </template>
+      <template #caption>Sebin in his casual outfit</template>
 
       <template #copyright>
         <a href="https://twitter.com/coffeerelated">coffeerelated</a>
       </template>
     </RefFigure>
 
-    <RefFigure id="sebin-winter-outfit" polaroidBorder>
+    <RefFigure id="sebin-winter-outfit" cornerText>
       <!-- max 1470px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;655;785;915;800;1310;1200;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&jpg&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
             alt="Sebin in his cold weather outfit"
@@ -75,35 +72,32 @@ import RefGallery from '@/components/RefGallery.vue'
         </picture>
       </template>
 
-      <template #caption>
-        <p>Sebin in his cold weather outfit</p>
-        <p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
-      </template>
+      <template #caption>Sebin in his cold weather outfit</template>
 
       <template #copyright>
         <a href="https://twitter.com/lara_belem_">Lara Belém</a>
       </template>
     </RefFigure>
 
-    <RefFigure id="sebin-workout-outfit-fullbody" polaroidBorder>
+    <RefFigure id="sebin-workout-outfit-fullbody" cornerText>
       <!-- max 1758px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;535;640;745;800;1070;1280;1490;1200;1605;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&jpg&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
             alt="Sebin in his workout outfit (fullbody)"
@@ -112,37 +106,32 @@ import RefGallery from '@/components/RefGallery.vue'
         </picture>
       </template>
 
-      <template #caption>
-        <p>Sebin in his workout outfit</p>
-        <p>
-          <strong>Full body:</strong> Snapback hat, tank top, fingerless gloves, shorts, sneakers
-        </p>
-      </template>
+      <template #caption>Sebin in his workout outfit (full body)</template>
 
       <template #copyright>
         <a href="https://twitter.com/turquoize_art">Atlas</a>
       </template>
     </RefFigure>
 
-    <RefFigure id="sebin-workout-outfit-close" polaroidBorder>
+    <RefFigure id="sebin-workout-outfit-close" cornerText>
       <!-- max 2480px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&avif&quality=75&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500x, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&webp&quality=100&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;500;600;700;800;1000;1200;1400;1500;1800;2100&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&jpg&withoutEnlargement&srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin in his workout outfit (close-up)"
@@ -151,91 +140,83 @@ import RefGallery from '@/components/RefGallery.vue'
         </picture>
       </template>
 
-      <template #caption>
-        <p>Sebin in his workout outfit</p>
-        <p>
-          <strong>Close-up:</strong> Snapback hat, headphones, tank top, fingerless gloves, shorts,
-          smartwatch
-        </p>
-      </template>
+      <template #caption>Sebin in his workout outfit (close-up)</template>
 
       <template #copyright>
         <a href="https://twitter.com/purpledragonrei">Rei</a>
       </template>
     </RefFigure>
 
-    <RefFigure id="sebin-tracksuit-pants" polaroidBorder>
-      <!-- max 961px -->
+    <RefFigure id="sebin-tracksuit-pants" nsfw cornerText>
+      <!-- max 1656px -->
       <template #img>
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&avif&quality=75&withoutEnlargement&srcset
             "
-            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&webp&quality=100&withoutEnlargement&srcset
             "
-            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/lazy/pants.jpg?w=400;500;600;700;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&jpg&quality=95&withoutEnlargement&srcset
             "
-            sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
+            sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             alt="Tracksuit pants"
             loading="lazy"
           />
         </picture>
       </template>
 
-      <template #caption>
-        <p>Tracksuit pants</p>
-        <p>
-          Sebin likes to wear comfortable clothes at home when he doesn't need to leave the house or
-          is enjoying some leisure time after work or on weekends.
-        </p>
-      </template>
+      <template #caption>Sebin in leisure tracksuit pants</template>
 
-      <!-- <template #copyright></template> -->
+      <template #copyright>
+        <a href="https://twitter.com/leolynx86">Leolynx</a>
+      </template>
     </RefFigure>
 
-    <RefFigure id="sebin-topless" polaroidBorder>
-      <!-- max 333px -->
+    <RefFigure id="sebin-topless" cornerText>
+      <!-- max 2119px -->
       <template #img>
         <picture>
           <source
-            srcset="@/assets/refs/clothes/lazy/undies.jpg?w=0&avif&withoutEnlargement&srcset"
-            sizes="333px"
+            srcset="
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&avif&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/avif"
           />
           <source
-            srcset="@/assets/refs/clothes/lazy/undies.jpg?w=0&webp&withoutEnlargement&srcset"
-            sizes="333px"
+            srcset="
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&webp&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/webp"
           />
           <img
-            srcset="@/assets/refs/clothes/lazy/undies.jpg?w=0&withoutEnlargement&srcset"
-            sizes="333px"
+            srcset="
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&withoutEnlargement&srcset
+            "
+            sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             alt="Shorts"
             loading="lazy"
           />
         </picture>
       </template>
 
-      <template #caption>
-        <p>Topless w/ jockstrap/boxer briefs</p>
-        <p>
-          For even more comfort, Sebin tends to forgoe pants completely and save on laundry by only
-          wearing the absolute necessary.
-        </p>
-      </template>
+      <template #caption>Sebin in his favorite boxers</template>
 
-      <!-- <template #copyright></template> -->
+      <template #copyright>
+        <a href="https://twitter.com/Retroslime69">Retroslime69</a>
+      </template>
     </RefFigure>
   </RefGallery>
 </template>