diff --git a/eleventy.config.js b/eleventy.config.js
index 3cb5c6b..38b6912 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -6,7 +6,19 @@ import htmlminifier from 'html-minifier-terser';
import markdownIt from 'markdown-it';
const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
+
+const IMAGE_BASE_WIDTHS = [500, 750, 1000];
+const IMAGE_COMPUTED_WIDTHS = new Set(IMAGE_BASE_WIDTHS.flatMap((w) => [w * 1, w * 2, w * 3]));
+const IMAGE_ATTR_SIZES = [
+ { minw: '120em', size: '1000px' },
+ { minw: '64em', size: '750px' },
+ { minw: '40em', size: '700px' },
+ { minw: '35em', size: '500px' },
+ { minw: null, size: 'calc(100vw - 3rem)' }
+];
+
const IMAGE_TRANSFORM_OPTS = {
+ widths: [...IMAGE_COMPUTED_WIDTHS, 'auto'],
formats: ['avif', 'webp', 'auto'],
sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
sharpPngOptions: { compressionLevel: 9 },
@@ -15,7 +27,7 @@ const IMAGE_TRANSFORM_OPTS = {
defaultAttributes: {
loading: 'lazy',
decoding: 'async',
- sizes: '(min-width: 64em) 500px, (min-width: 50em) 420px, 375px'
+ sizes: IMAGE_ATTR_SIZES.map(({ minw, size }) => (minw ? `(min-width: ${minw}): ${size}` : size))
}
};
diff --git a/src/components/ref-img.webc b/src/components/ref-img.webc
index 018fbaf..640b6f4 100644
--- a/src/components/ref-img.webc
+++ b/src/components/ref-img.webc
@@ -4,16 +4,12 @@
:class="(dropshadow ? 'dropshadow' : '')"
:src="`src/img/${char}/${src}`"
:alt="`${alt} by ${artist}`"
- :width="width"
- sizes="1000px"
>
diff --git a/src/img/jarek/avatar.png b/src/img/jarek/avatar.png
index 7357c13..9d4ed6c 100644
Binary files a/src/img/jarek/avatar.png and b/src/img/jarek/avatar.png differ
diff --git a/src/img/sebin/ref-muscle-1.png b/src/img/sebin/ref-muscle-1.png
index 9953b17..30e5f42 100644
Binary files a/src/img/sebin/ref-muscle-1.png and b/src/img/sebin/ref-muscle-1.png differ
diff --git a/src/img/sebin/ref-muscle-3.png b/src/img/sebin/ref-muscle-3.png
index 0ecb72e..4ba1f43 100644
Binary files a/src/img/sebin/ref-muscle-3.png and b/src/img/sebin/ref-muscle-3.png differ
diff --git a/src/img/sebin/ref-muscle-4.png b/src/img/sebin/ref-muscle-4.png
index 48b2368..378680c 100644
Binary files a/src/img/sebin/ref-muscle-4.png and b/src/img/sebin/ref-muscle-4.png differ
diff --git a/src/img/sebin/ref-muscle-5.png b/src/img/sebin/ref-muscle-5.png
index 233c581..cd87ec0 100644
Binary files a/src/img/sebin/ref-muscle-5.png and b/src/img/sebin/ref-muscle-5.png differ
diff --git a/src/img/sebin/ref-muscle-6.png b/src/img/sebin/ref-muscle-6.png
index b3d026f..a16a0ed 100644
Binary files a/src/img/sebin/ref-muscle-6.png and b/src/img/sebin/ref-muscle-6.png differ
diff --git a/src/img/sebin/ref-muscle-7.png b/src/img/sebin/ref-muscle-7.png
index 0f9af53..9aea9ae 100644
Binary files a/src/img/sebin/ref-muscle-7.png and b/src/img/sebin/ref-muscle-7.png differ
diff --git a/src/img/sebin/ref-muscle-8.png b/src/img/sebin/ref-muscle-8.png
index fc5379b..fe50075 100644
Binary files a/src/img/sebin/ref-muscle-8.png and b/src/img/sebin/ref-muscle-8.png differ
diff --git a/src/img/sebin/ref-muscle-9.png b/src/img/sebin/ref-muscle-9.png
index 17ef783..ce70d4c 100644
Binary files a/src/img/sebin/ref-muscle-9.png and b/src/img/sebin/ref-muscle-9.png differ
diff --git a/src/img/sebin/ref-upper-body.png b/src/img/sebin/ref-upper-body.png
index 8d0dfbb..1670811 100644
Binary files a/src/img/sebin/ref-upper-body.png and b/src/img/sebin/ref-upper-body.png differ
diff --git a/src/img/viktor/avatar.png b/src/img/viktor/avatar.png
index 89fcc86..b149d98 100644
Binary files a/src/img/viktor/avatar.png and b/src/img/viktor/avatar.png differ
diff --git a/src/jarek/anatomy.md b/src/jarek/anatomy.md
index ad8dd01..4b56ed0 100644
--- a/src/jarek/anatomy.md
+++ b/src/jarek/anatomy.md
@@ -9,7 +9,6 @@ eleventyNavigation:
:@alt="'Jarek Ref'"
:@artist="'Alpha Moonlight'"
:@href="'https://bsky.app/profile/alphamoonlight.bsky.social'"
- :@width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
:@nsfw="true"
diff --git a/src/layouts/character.webc b/src/layouts/character.webc
index 960461c..7932c32 100644
--- a/src/layouts/character.webc
+++ b/src/layouts/character.webc
@@ -19,7 +19,8 @@ feedbackLink: https://cloud.sebin-nyshkim.net/apps/forms/s/eHjsosE9FB4fCpjBt4mbP
slot="avatar"
:src="`src/img/${firstName.toLowerCase()}/avatar.png`"
:alt="firstName + ' Avatar'"
- :width="[500, 1000]"
+ :width="[100, 200, 300, 400, 500, 600]"
+ sizes="(min-width: 120em) 250px, (min-width: 64em) 200px, 100px"
>
diff --git a/src/sebin/anatomy.md b/src/sebin/anatomy.md
index 5ca73dd..b34b3e2 100644
--- a/src/sebin/anatomy.md
+++ b/src/sebin/anatomy.md
@@ -9,7 +9,6 @@ eleventyNavigation:
:@alt="`Sebin Ref`"
:@artist="`draftgon`"
:@href="`https://bsky.app/profile/draftgon.bsky.social`"
- :@width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
:@nsfw="true"
@@ -38,7 +37,6 @@ Sebin has a muscular build that he keeps in shape with regular exercise, which h
:@alt="`Sebin Ref`"
:@artist="`draftgon`"
:@href="`https://bsky.app/profile/draftgon.bsky.social`"
- :@width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
:@nsfw="true"
@@ -61,7 +59,6 @@ While Sebin's wings can carry him short to medium distances, there are limitatio
:@alt="`Sebin's expressions`"
:@artist="`draftgon`"
:@href="`https://bsky.app/profile/draftgon.bsky.social`"
- :@width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
>
@@ -87,7 +84,6 @@ When threatened or enraged, Sebin can unleash a stream of fire from his mouth, w
:@alt="`Sebin's upper body closeup`"
:@artist="`Nidhogg`"
:@href="`https://bsky.app/profile/nidthedragon.bsky.social`"
- :@width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="true"
>
@@ -108,7 +104,6 @@ Sebin's drawn muscle anatomy can vary quite a bit. It can range from athletic to
diff --git a/src/sebin/clothing.md b/src/sebin/clothing.md
index 7b8c35c..657f87e 100644
--- a/src/sebin/clothing.md
+++ b/src/sebin/clothing.md
@@ -11,7 +11,6 @@ Sebin knows how to dress!
:@src="`ref-clothes-${ref + 1}.png`"
:@alt="$data.galleryClothing[ref].alt"
:@href="$data.galleryClothing[ref].href"
- :@width="[500, 1000]"
:@char="$data.firstName.toLowerCase()"
:@artist="$data.galleryClothing[ref].artist"
:@dropshadow="false"
diff --git a/src/sebin/overdrive.md b/src/sebin/overdrive.md
index f54d741..8def545 100644
--- a/src/sebin/overdrive.md
+++ b/src/sebin/overdrive.md
@@ -46,7 +46,6 @@ He needed answers. If he ever were to tap into this power again, he feared he co
:@alt="`Sebin Overdrive Ref`"
:@artist="`CVictorrosso`"
:@href="`https://bsky.app/profile/cvictorrosso.bsky.social`"
- :@width="[1000]"
:@char="$data.firstName.toLowerCase()"
:@dropshadow="false"
>