chore: image improvements
This commit is contained in:
parent
9c3d8e213a
commit
7dde72d1cb
15 changed files with 138 additions and 164 deletions
|
@ -2,16 +2,18 @@
|
|||
{%- for badge in badges limit: 8 -%}
|
||||
<a href="{{ badge.url }}">
|
||||
<img srcset="
|
||||
https://cdn.coryd.dev/{{ badge.image }}?class=w50 50w,
|
||||
https://cdn.coryd.dev/{{ badge.image }}?class=w100 100w,
|
||||
https://cdn.coryd.dev/{{ badge.image }}?class=w200 200w,
|
||||
https://cdn.coryd.dev/{{ badge.image }}?class=w50&type=webp 50w,
|
||||
https://cdn.coryd.dev/{{ badge.image }}?class=w100&type=webp 100w,
|
||||
https://cdn.coryd.dev/{{ badge.image }}?class=w200&type=webp 200w
|
||||
" sizes="(max-width: 450px) 88px,
|
||||
(max-width: 850px) 176px,
|
||||
(max-width: 1000px) 352px,
|
||||
704px" src="https://cdn.coryd.dev/{{ badge.image }}?class=w200" alt="{{ badge.image_alt }}" loading="lazy"
|
||||
200px"
|
||||
src="https://cdn.coryd.dev/{{ badge.image }}?class=w50&type=webp"
|
||||
alt="{{ badge.image_alt }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="88"
|
||||
height="31"
|
||||
width="50"
|
||||
height="18"
|
||||
/>
|
||||
</a>
|
||||
{%- endfor -%}
|
||||
|
|
|
@ -1,19 +1,17 @@
|
|||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev/{{ image }}?class=bannersm 256w,
|
||||
https://cdn.coryd.dev/{{ image }}?class=bannermd 512w,
|
||||
https://cdn.coryd.dev/{{ image }}?class=bannerbase 1024w,
|
||||
https://cdn.coryd.dev/{{ image }}?class=bannerlg 2048w
|
||||
https://cdn.coryd.dev/{{ image }}?class=bannersm&type=webp 256w,
|
||||
https://cdn.coryd.dev/{{ image }}?class=bannermd&type=webp 512w,
|
||||
https://cdn.coryd.dev/{{ image }}?class=bannerbase&type=webp 1024w
|
||||
"
|
||||
sizes="(max-width: 450px) 256px,
|
||||
(max-width: 850px) 512px,
|
||||
(max-width: 1000px) 1024px,
|
||||
2048px"
|
||||
src="https://cdn.coryd.dev/{{ image }}?class=bannerlg"
|
||||
(max-width: 850px) 512px
|
||||
1024px"
|
||||
src="https://cdn.coryd.dev/{{ image }}?class=bannersm&type=webp"
|
||||
alt="{{ alt }}"
|
||||
class="image-banner"
|
||||
loading="eager"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="1080"
|
||||
height="720"
|
||||
width="720"
|
||||
height="480"
|
||||
/>
|
|
@ -20,39 +20,31 @@
|
|||
{%- if shape == 'square' -%}
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ item.image }}?class=squaresm 200w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=squaremd 400w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=squarebase 800w
|
||||
https://cdn.coryd.dev{{ item.image }}?class=squaresm&type=webp 200w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=squaremd&type=webp 400w
|
||||
"
|
||||
sizes="(max-width: 450px) 200px,
|
||||
(max-width: 850px) 400px,
|
||||
(max-width: 1000px) 800px,
|
||||
800px"
|
||||
src="https://cdn.coryd.dev{{ item.image }}?class=squarebase"
|
||||
alt="{{ alt }}"
|
||||
loading="{{ loadingStrategy }}"
|
||||
decoding="async"
|
||||
width="240"
|
||||
height="240"
|
||||
/>
|
||||
{%- else -%}
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ item.image }}?class=verticalsm 200w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=verticalmd 400w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=verticalbase 800w
|
||||
"
|
||||
sizes="(max-width: 450px) 200px,
|
||||
(max-width: 850px) 400px,
|
||||
(max-width: 1000px) 800px,
|
||||
800px"
|
||||
src="https://cdn.coryd.dev{{ item.image }}?class=verticalbase"
|
||||
sizes="(max-width: 450px) 200px, 400px"
|
||||
src="https://cdn.coryd.dev{{ item.image }}?class=squaresm&type=webp"
|
||||
alt="{{ alt }}"
|
||||
loading="{{ loadingStrategy }}"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="307"
|
||||
height="200"
|
||||
/>
|
||||
{%- else -%}
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ item.image }}?class=verticalsm&type=webp 200w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=verticalmd&type=webp 400w
|
||||
"
|
||||
sizes="(max-width: 450px) 200px, 400px"
|
||||
src="https://cdn.coryd.dev{{ item.image }}?class=verticalsm&type=webp"
|
||||
alt="{{ alt }}"
|
||||
loading="{{ loadingStrategy }}"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="307"
|
||||
/>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
@ -5,12 +5,11 @@
|
|||
<div class="meta">
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ item.image }}?class=w50 50w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=w100 100w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=w200 200w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=w50&type=webp 50w,
|
||||
https://cdn.coryd.dev{{ item.image }}?class=w100&type=webp 100w
|
||||
"
|
||||
sizes="(max-width: 1000px) 50px, 100px, 200px"
|
||||
src="https://cdn.coryd.dev{{ item.image }}?class=w200"
|
||||
sizes="(max-width: 450px) 50px, 100px"
|
||||
src="https://cdn.coryd.dev{{ item.image }}?class=w50&type=webp"
|
||||
alt="{{ alt }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
|
|
|
@ -22,15 +22,11 @@
|
|||
{%- assign loadingStrategy = loading | default: 'lazy' -%}
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm 256w,
|
||||
https://cdn.coryd.dev{{ item.backdrop }}?class=bannermd 512w,
|
||||
https://cdn.coryd.dev{{ item.backdrop }}?class=bannerbase 1024w
|
||||
https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm&type=webp 256w,
|
||||
https://cdn.coryd.dev{{ item.backdrop }}?class=bannermd&type=webp 512w
|
||||
"
|
||||
sizes="(max-width: 450px) 256px,
|
||||
(max-width: 850px) 512px,
|
||||
(max-width: 1000px) 1024px,
|
||||
1024px"
|
||||
src="https://cdn.coryd.dev{{ item.backdrop }}?class=bannerbase"
|
||||
sizes="(max-width: 450px) 256px, 512px"
|
||||
src="https://cdn.coryd.dev{{ item.backdrop }}?class=bannersm&type=webp"
|
||||
alt="{{ alt }}"
|
||||
loading="{{ loadingStrategy }}"
|
||||
decoding="async"
|
||||
|
|
Reference in a new issue