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> <h1>{{ $route.meta.title }}</h1>
</section> </section>
<RefImage> <RefImage dropshadow>
<source <template v-if="$route.query.nsfw">
srcset=" <source
@/assets/viktor-ref-SFW-alpha.png?w=400;700;1000&avif&quality=75&srcset srcset="
" @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
type="image/avif" "
/> sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
<source type="image/avif"
srcset=" />
@/assets/viktor-ref-SFW-alpha.png?w=400;700;1000&webp&quality=100&srcset <source
" srcset="
type="image/webp" @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
/> "
<img sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
src="@/assets/viktor-ref-SFW-alpha.png?w=700&png" type="image/webp"
alt="Viktor Ref by sabertoofs" />
/> <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> <template #caption>
Viktor Ref &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a> Viktor Ref &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
@ -64,21 +97,74 @@ const colors = [
</p> </p>
</section> </section>
<RefImage> <RefImage dropshadow>
<source <template v-if="$route.query.nsfw">
srcset=" <source
@/assets/viktor-front-SFW-alpha.png?w=400;700;1000&avif&quality=75&srcset 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
/> "
<source sizes="(min-width: 64em) 710px,
srcset=" (min-width: 50em) 590px,
@/assets/viktor-front-SFW-alpha.png?w=400;700;1000&webp&quality=100&srcset (min-width: 27em) 530px,
" 430px"
/> type="image/avif"
<img />
src="@/assets/viktor-front-SFW-alpha.png?w=700&png" <source
alt="Viktor frontal shot by sabertoofs" 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> <template #caption>
Viktor frontal shot &copy; Viktor frontal shot &copy;