feat: update responsive image srcsets, genereate fewer images
This commit is contained in:
Sebin Nyshkim
parent
9a529b62fb
commit
d984651fc8
3 changed files with 108 additions and 127 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue