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 + // `` 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 {