From ed188186682580479adbc9c66c2b8e90d93036a1 Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Sat, 31 Oct 2026 11:37:16 -1000
Subject: [PATCH] images: emit intrinsic dimensions to prevent layout shift

---
 scripts/optimize-image-preprocessor.js  | 6 +++++-
 src/app.css                             | 1 +
 src/routes/shop/comma-four/+page.svelte | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/scripts/optimize-image-preprocessor.js b/scripts/optimize-image-preprocessor.js
index d324124a..214963c3 100644
--- a/scripts/optimize-image-preprocessor.js
+++ b/scripts/optimize-image-preprocessor.js
@@ -20,13 +20,17 @@ const processMarkup = async ({ content, filename }) => {
             .filter(Boolean)
             .join(' ');
 
+          const dimensions = node.attributes.some(attr => attr.name === 'width' || attr.name === 'height')
+            ? ''
+            : `width={(${srcValue}).img.w} height={(${srcValue}).img.h}`;
+
           const pictureHtml = `
             <picture>
               {#if typeof ${srcValue} === 'object' && (${srcValue}).sources}
                 {#each Object.entries((${srcValue}).sources) as [filetype, src]}
                   <source srcset={src.split(' ')[0]} type={'image/' + filetype} />
                 {/each}
-                <img src={(${srcValue}).img.src} ${otherAttributes} />
+                <img src={(${srcValue}).img.src} ${dimensions} ${otherAttributes} />
               {:else}
                 <img src={${srcValue}} ${otherAttributes} />
               {/if}
diff --git a/src/app.css b/src/app.css
index 2467138e..eda8c81f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -238,6 +238,7 @@ section.dark + section.dark {
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 hr {
diff --git a/src/routes/shop/comma-four/+page.svelte b/src/routes/shop/comma-four/+page.svelte
index aaae75c4..a1587632 100644
--- a/src/routes/shop/comma-four/+page.svelte
+++ b/src/routes/shop/comma-four/+page.svelte
@@ -392,6 +392,7 @@
         margin-bottom: 2rem;
 
         & img {
+          width: auto;
           max-height: 150px;
         }