eleventy.config.js

@@ -6,19 +6,7 @@ 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 },
@@ -27,7 +15,7 @@ const IMAGE_TRANSFORM_OPTS = {
   defaultAttributes: {
     loading: 'lazy',
     decoding: 'async',
-    sizes: IMAGE_ATTR_SIZES.map(({ minw, size }) => (minw ? `(min-width: ${minw}): ${size}` : size))
+    sizes: '(min-width: 64em) 500px, (min-width: 50em) 420px, 375px'
   }
 };
 

src/components/ref-img.webc

@@ -4,12 +4,16 @@
     :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,6 +9,7 @@ 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,8 +19,7 @@ feedbackLink: https://cloud.sebin-nyshkim.net/apps/forms/s/eHjsosE9FB4fCpjBt4mbP
       slot="avatar"
       :src="`src/img/${firstName.toLowerCase()}/avatar.png`"
       :alt="firstName + ' Avatar'"
-      :width="[100, 200, 300, 400, 500, 600]"
-      sizes="(min-width: 120em) 250px, (min-width: 64em) 200px, 100px"
+      :width="[500, 1000]"
     ></eleventy-image>
     <template webc:nokeep slot="name" @text="fullName"></template>
     <template webc:nokeep slot="species" @text="species"></template>

src/sebin/anatomy.md

@@ -9,6 +9,7 @@ eleventyNavigation:
     :@alt="`Sebin Ref`"
     :@artist="`draftgon`"
     :@href="`https://bsky.app/profile/draftgon.bsky.social`"
+    :@width="[1000]"
     :@char="$data.firstName.toLowerCase()"
     :@dropshadow="true"
     :@nsfw="true"
@@ -37,6 +38,7 @@ 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"
@@ -59,6 +61,7 @@ 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>
@@ -84,6 +87,7 @@ 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>
@@ -104,6 +108,7 @@ 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()"
@@ -126,6 +131,7 @@ 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,6 +11,7 @@ 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,6 +46,7 @@ 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>