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

feat: optimize responsive images

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-18 18:47:53 +01:00
parent e29a98f06d
commit 4f5e6c2df3
1 changed files with 118 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

150
src/views/AnatomyView.vue
View file

@ -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;