SebinNyshkim/character-select
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add responsive image srcset

Browse source
This commit is contained in:
Sebin Nyshkim 2023-02-03 18:04:40 +01:00
parent 0f3c85a51b
commit 6b0875b19c
1 changed files with 60 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/App.vue
View file

@ -8,7 +8,26 @@ import CharacterItem from "@/components/CharacterItem.vue";
<CharacterList> <CharacterList>
<CharacterItem class="viktor" href="/viktor/"> <CharacterItem class="viktor" href="/viktor/">
<template #image> <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>
<template #name>Viktor Kraastav</template> <template #name>Viktor Kraastav</template>
@ -17,7 +36,26 @@ import CharacterItem from "@/components/CharacterItem.vue";
<CharacterItem class="sebin" href="/sebin/"> <CharacterItem class="sebin" href="/sebin/">
<template #image> <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>
<template #name>Sebin Nyshkim</template> <template #name>Sebin Nyshkim</template>
@ -26,7 +64,26 @@ import CharacterItem from "@/components/CharacterItem.vue";
<CharacterItem class="jarek" href="/jarek/"> <CharacterItem class="jarek" href="/jarek/">
<template #image> <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>
<template #name>Jarek Vakhtang</template> <template #name>Jarek Vakhtang</template>