feat: 🏗️ improve global responsive image defaults

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))
   }
 };
 

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"
   ></eleventy-image>
   <eleventy-image
     class="image nsfw"
     :class="(dropshadow ? 'dropshadow' : '')"
     :src="`src/img/${char}/${src.replace(/^(.*?)(\.[^.]+)$/, '$1-nsfw$2')}`"
     :alt="`${alt} by ${artist}`"
-    :width="width"
-    sizes="1000px"
     webc:if="nsfw"
   ></eleventy-image>
   <figcaption class="caption">

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"

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"
     ></eleventy-image>
     <template webc:nokeep slot="name" @text="fullName"></template>
     <template webc:nokeep slot="species" @text="species"></template>

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"
 ></ref-img>
@@ -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"
 ></ref-img>
@@ -108,7 +104,6 @@ Sebin's drawn muscle anatomy can vary quite a bit. It can range from athletic to
   <ref-img webc:for="ref of [...Array(9).keys()]"
     :@src="`ref-muscle-${ref + 1}.png`"
     :@alt="$data.galleryMuscle[ref].alt"
-    :@width="[500, 1000]"
     :@href="$data.galleryMuscle[ref].href"
     :@artist="$data.galleryMuscle[ref].artist"
     :@char="$data.firstName.toLowerCase()"
@@ -131,7 +126,6 @@ There's still one piece of anatomy you *haven't* seen yet! 👀💦
     :@alt="`Sebin's manly parts`"
     :@artist="`draftgon`"
     :@href="`https://bsky.app/profile/draftgon.bsky.social`"
-    :@width="[500, 1000]"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
 ></ref-img>

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"

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"
 ></ref-img>