From 6b0875b19ca4061b1e17b374c9224c607856df05 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 3 Feb 2023 18:04:40 +0100
Subject: [PATCH] feat: add responsive image srcset

---
 src/App.vue | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 43b7acd..5a09789 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,26 @@ import CharacterItem from "@/components/CharacterItem.vue";
     <CharacterList>
       <CharacterItem class="viktor" href="/viktor/">
         <template #image>
-          <img src="@/assets/viktor-portrait.png" alt="Viktor Portrait" />
+          <picture>
+            <source
+              srcset="
+                @/assets/viktor-portrait.png?w=250;500&avif&quality=75&srcset
+              "
+              type="image/avif"
+              sizes="(min-width: 70em) 500px, 250px"
+            />
+            <source
+              srcset="
+                @/assets/viktor-portrait.png?w=250;500&webp&quality=100&srcset
+              "
+              type="image/webp"
+              sizes="(min-width: 70em) 500px, 250px"
+            />
+            <img
+              srcset="@/assets/viktor-portrait.png?w=250;500&png&srcset"
+              alt="Viktor Portrait"
+            />
+          </picture>
         </template>
 
         <template #name>Viktor Kraastav</template>
@@ -17,7 +36,26 @@ import CharacterItem from "@/components/CharacterItem.vue";
 
       <CharacterItem class="sebin" href="/sebin/">
         <template #image>
-          <img src="@/assets/sebin-portrait.png" alt="Sebin Portrait" />
+          <picture>
+            <source
+              srcset="
+                @/assets/sebin-portrait.png?w=250;500&avif&quality=75&srcset
+              "
+              type="image/avif"
+              sizes="(min-width: 70em) 500px, 250px"
+            />
+            <source
+              srcset="
+                @/assets/sebin-portrait.png?w=250;500&webp&quality=100&srcset
+              "
+              type="image/webp"
+              sizes="(min-width: 70em) 500px, 250px"
+            />
+            <img
+              srcset="@/assets/sebin-portrait.png?w=250;500&png&srcset"
+              alt="Sebin Portrait"
+            />
+          </picture>
         </template>
 
         <template #name>Sebin Nyshkim</template>
@@ -26,7 +64,26 @@ import CharacterItem from "@/components/CharacterItem.vue";
 
       <CharacterItem class="jarek" href="/jarek/">
         <template #image>
-          <img src="@/assets/jarek-portrait.png" alt="Jarek Portrait" />
+          <picture>
+            <source
+              srcset="
+                @/assets/jarek-portrait.png?w=250;500&avif&quality=75&srcset
+              "
+              type="image/avif"
+              sizes="(min-width: 70em) 500px, 250px"
+            />
+            <source
+              srcset="
+                @/assets/jarek-portrait.png?w=250;500&webp&quality=100&srcset
+              "
+              type="image/webp"
+              sizes="(min-width: 70em) 500px, 250px"
+            />
+            <img
+              srcset="@/assets/jarek-portrait.png?w=250;500&png&srcset"
+              alt="Jarek Portrait"
+            />
+          </picture>
         </template>
 
         <template #name>Jarek Vakhtang</template>