chore: image improvements

This commit is contained in:
Cory Dransfeldt 2024-09-12 17:28:09 -07:00
parent 9c3d8e213a
commit 7dde72d1cb
No known key found for this signature in database
15 changed files with 138 additions and 164 deletions

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "coryd.dev",
"version": "24.7.22",
"version": "24.8.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "24.7.22",
"version": "24.8.0",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.5.0",
@ -1743,9 +1743,9 @@
"license": "MIT"
},
"node_modules/electron-to-chromium": {
"version": "1.5.20",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.20.tgz",
"integrity": "sha512-74mdl6Fs1HHzK9SUX4CKFxAtAe3nUns48y79TskHNAG6fGOlLfyKA4j855x+0b5u8rWJIrlaG9tcTPstMlwjIw==",
"version": "1.5.21",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.21.tgz",
"integrity": "sha512-+rBAerCpQvFSPyAO677i5gJuWGO2WFsoujENdcMzsrpP7Ebcc3pmpERgU8CV4fFF10a5haP4ivnFQ/AmLICBVg==",
"dev": true,
"license": "ISC"
},

View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "24.7.22",
"version": "24.8.0",
"description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module",
"scripts": {

View file

@ -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 -%}

View file

@ -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"
/>

View file

@ -20,33 +20,25 @@
{%- 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"
sizes="(max-width: 450px) 200px, 400px"
src="https://cdn.coryd.dev{{ item.image }}?class=squaresm&type=webp"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="240"
height="240"
width="200"
height="200"
/>
{%- 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
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,
(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=verticalsm&type=webp"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"

View file

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

View file

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

View file

@ -2,16 +2,16 @@
<div class="flex-centered justify-centered">
<img
srcset="
https://cdn.coryd.dev/{{ logo }}?class=w200 200w,
https://cdn.coryd.dev/{{ logo }}?class=w400 400w,
https://cdn.coryd.dev/{{ logo }}?class=w800 800w,
https://cdn.coryd.dev/{{ logo }}?class=w1600 1600w
https://cdn.coryd.dev/{{ logo }}?class=w200&type=webp 200w,
https://cdn.coryd.dev/{{ logo }}?class=w400&type=webp 400w,
https://cdn.coryd.dev/{{ logo }}?class=w800&type=webp 800w,
https://cdn.coryd.dev/{{ logo }}?class=w1600&type=webp 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://cdn.coryd.dev/{{ logo }}?class=1600"
1200px"
src="https://cdn.coryd.dev/{{ logo }}?class=w200&type=webp"
alt="The Claw Webring"
loading="lazy"
decoding="async"

View file

@ -16,18 +16,17 @@ schema: book
<div class="book-display">
<img
srcset="
https://cdn.coryd.dev{{ book.image }}?class=verticalsm 200w,
https://cdn.coryd.dev{{ book.image }}?class=verticalmd 400w,
https://cdn.coryd.dev{{ book.image }}?class=verticalbase 800w,
https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w
https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp 200w,
https://cdn.coryd.dev{{ book.image }}?class=verticalmd&type=webp 400w,
https://cdn.coryd.dev{{ book.image }}?class=verticalbase&type=webp 800w
"
sizes="(max-width: 450px) 203px,
(max-width: 850px) 406px,
(max-width: 1000px) 812px,
1624px"
src="https://cdn.coryd.dev{{ book.image }}?class=verticallg"
812px"
src="https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp"
alt="{{ alt }}"
loading="eager"
loading="lazy"
decoding="async"
width="200"
height="307"

View file

@ -19,18 +19,14 @@ schema: books
<a href="{{ book.url }}">
<img
srcset="
https://cdn.coryd.dev{{ book.image }}?class=verticalsm 200w,
https://cdn.coryd.dev{{ book.image }}?class=verticalmd 400w,
https://cdn.coryd.dev{{ book.image }}?class=verticalbase 800w,
https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w
https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp 200w,
https://cdn.coryd.dev{{ book.image }}?class=verticalmd&type=webp 400w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://cdn.coryd.dev{{ book.image }}?class=verticallg 1200w"
400px"
src="https://cdn.coryd.dev{{ book.image }}?class=verticalsm&type=webp"
alt="{{ alt }}"
loading="eager"
loading="lazy"
decoding="async"
width="200"
height="307"

View file

@ -24,21 +24,19 @@ schema: artist
<div class="artist-display">
<img
srcset="
https://cdn.coryd.dev{{ artist.image }}?class=w200 200w,
https://cdn.coryd.dev{{ artist.image }}?class=w600 400w,
https://cdn.coryd.dev{{ artist.image }}?class=w800 800w,
https://cdn.coryd.dev{{ artist.image }}?class=w1600 1200w
https://cdn.coryd.dev{{ artist.image }}?class=w200&type=webp 200w,
https://cdn.coryd.dev{{ artist.image }}?class=w600&type=webp 400w,
https://cdn.coryd.dev{{ artist.image }}?class=w800&type=webp 800w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://cdn.coryd.dev{{ artist.image }}?class=w1600"
800px"
src="https://cdn.coryd.dev{{ artist.image }}?class=w200&type=webp"
alt="{{ alt }}"
loading="eager"
decoding="async"
width="480"
height="480"
width="200"
height="200"
/>
<div class="artist-meta">
<p class="title"><strong>{{ artist.name }}</strong></p>

View file

@ -15,20 +15,22 @@ schema: blog
{%- if post.image -%}
<img
srcset="
https://cdn.coryd.dev/{{ post.image }}?class=w200 200w,
https://cdn.coryd.dev/{{ post.image }}?class=w400 400w,
https://cdn.coryd.dev/{{ post.image }}?class=w800 800w,
https://cdn.coryd.dev/{{ post.image }}?class=w1600 1600w
https://cdn.coryd.dev/{{ post.image }}?class=w200&type=webp 200w,
https://cdn.coryd.dev/{{ post.image }}?class=w400&type=webp 400w,
https://cdn.coryd.dev/{{ post.image }}?class=w800&type=webp 800w,
https://cdn.coryd.dev/{{ post.image }}?class=w1600&type=webp 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://cdn.coryd.dev/{{ post.image }}?class=w1600"
1200px"
src="https://cdn.coryd.dev/{{ post.image }}?class=w200"
alt="{{ post.image_alt }}"
class="image-banner"
loading="lazy"
loading="eager"
decoding="async"
width="200"
height="auto"
/>
{%- endif -%}
{{ post.content | markdown }}

View file

@ -14,22 +14,20 @@ schema: movie
<article class="watching-focus">
<img
srcset="
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm 256w,
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd 512w,
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase 1024w,
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg 2048w
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm&type=webp 256w,
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannermd&type=webp 512w,
https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerbase&type=webp 1024w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannerlg"
1024px"
src="https://cdn.coryd.dev{{ movie.backdrop }}?class=bannersm&type=webp"
alt="{{ alt }}"
class="image-banner"
loading="eager"
decoding="async"
width="1080"
height="720"
width="256"
height="180"
/>
<div class="watching-meta">
<p class="title"><strong>{{ movie.title }}</strong>{%- if movie.year and not movie.rating %} ({{ movie.year }}){%- endif -%}</p>

View file

@ -15,22 +15,20 @@ schema: show
<article class="watching-focus">
<img
srcset="
https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm 256w,
https://cdn.coryd.dev{{ show.backdrop }}?class=bannermd 512w,
https://cdn.coryd.dev{{ show.backdrop }}?class=bannerbase 1024w,
https://cdn.coryd.dev{{ show.backdrop }}?class=bannerlg 2048w
https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm&type=webp 256w,
https://cdn.coryd.dev{{ show.backdrop }}?class=bannermd&type=webp 512w,
https://cdn.coryd.dev{{ show.backdrop }}?class=bannerbase&type=webp 1024w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://cdn.coryd.dev/{{ show.backdrop }}?class=bannerlg"
1024px"
src="https://cdn.coryd.dev{{ show.backdrop }}?class=bannersm&type=webp"
alt="{{ alt }}"
class="image-banner"
loading="eager"
decoding="async"
width="1080"
height="720"
width="256"
height="180"
/>
<div class="watching-meta">
<p class="title"><strong>{{ show.title }}</strong>{%- if show.year %} ({{ show.year }}){%- endif -%}</p>

View file

@ -11,21 +11,17 @@ permalink: /about.html
{%- capture about_alt -%}{{ globals.site_name }} - image by @joel@fosstodon.org{%- endcapture -%}
<img
srcset="
https://cdn.coryd.dev/{{ globals.about }}?class=squaresm 200w,
https://cdn.coryd.dev/{{ globals.about }}?class=squaremd 400w,
https://cdn.coryd.dev/{{ globals.about }}?class=squarebase 800w,
https://cdn.coryd.dev/{{ globals.about }}?class=squarelg 1200w
https://cdn.coryd.dev/{{ globals.about }}?class=squaresm&type=webp 200w,
https://cdn.coryd.dev/{{ globals.about }}?class=squaremd&type=webp 400w,
https://cdn.coryd.dev/{{ globals.about }}?class=squarebase&type=webp 800w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://cdn.coryd.dev/{{ globals.about }}?class=squarelg"
sizes="(max-width: 450px) 200px, (max-width: 850px) 400px, 800px"
src="https://cdn.coryd.dev/{{ globals.about }}?class=squaresm&type=webp"
alt="{{ about_alt }}"
loading="eager"
decoding="async"
width="600"
height="600"
width="200"
height="200"
/>
</div>
</div>