From 40b2d406ae2fddf2864d47b49e6d7919a3f5a694 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Tue, 28 Apr 2026 13:20:59 +0200
Subject: [PATCH] fix(rusty-image): derive arValue from arString for layout
 match
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`arValue` (height computation) and `arString` (URL `ar=` param) used
to read from different sources, so the URL could request a different
aspect than the `<img>` element reserved — caused a visible flicker
when the transformed image loaded. Both now derive from `arString`.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/lib/components/RustyImage.svelte | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/RustyImage.svelte b/src/lib/components/RustyImage.svelte
index cddb9e2..c81646c 100644
--- a/src/lib/components/RustyImage.svelte
+++ b/src/lib/components/RustyImage.svelte
@@ -71,14 +71,18 @@
     return w / h;
   }
 
-  const arValue = $derived(parseAr(aspect));
-  const computedHeight = $derived(
-    height ?? (arValue ? Math.round(width / arValue) : undefined),
-  );
+  // Derive aspect from either the explicit `aspect` prop or the width/height pair.
+  // Both `arString` (URL `ar=` param) and `arValue` (height-derivation) must read
+  // from the SAME source — otherwise the URL requests a different shape than the
+  // `<img>` reserves and the image flickers when it loads.
   const arString = $derived(
     aspect ??
       (height && width ? `${width}/${height}` : undefined),
   );
+  const arValue = $derived(parseAr(arString));
+  const computedHeight = $derived(
+    height ?? (arValue ? Math.round(width / arValue) : undefined),
+  );
   const sizesAttr = $derived(sizes ?? `${width}px`);
 
   function baseParams(format: "avif" | "webp" | "jpeg", w: number): RustyImageTransformParams {