Preview image and loaded image have different aspect ratio

[esseb]

I'm noticing a small layout shift when the image finishes loading and the preview image is swapped out with the real image.

The real image is 1128x600px (an aspect ratio of 1.88), but the preview image has an size of 20x10px (an aspect ratio of 2). When the preview image is shown, Chrome uses the aspect ratio from the preview image's intrinsic size and ignores the width/height attributes.

I'm hacking around this on my end by doing this:

style={{ "--inherent-aspect-ratio": `${image.width} / ${image.height}` }}

:where(.image[data-lqip="true"]) {
  aspect-ratio: var(--inherent-aspect-ratio);
}

This is made a bit more cumbersome by the fact that ImageWithPreview.tsx overrides the style object that hides the loading style when I send in a style prop so I had to duplicate the styles that hide the loading image as well.

I think the preview image should set an aspect-ratio prop based on the given width/height and not assume the preview image has the same aspect ratio.

[coreyward]

Thanks for the detailed issue. I'll give this some more thought, including your suggestion.

I wonder if aspect-ratio will work for all cases, especially for cases where the full image is not shown (e.g. with object-fit: cover).

For what it's worth, I’m also intending/hoping to replace the need for a second img for previews altogether by applying the blurHash value as a CSS gradient background on the img, which might render this obsolete anyways. It's a balancing act, though—the less SanityImage does to style things, the easier it is to understand and adopt.

[dennis-adamczyk]

I noticed that this problem only occurs when you give the preview image height: auto, otherwise the height attribute seems to take effect. I also considered using background instead of the preview img, however then you see the image build up from top to bottom when loading, while the rest still shows the blurred background. Also, in that case you have to take care of removing the background once the image is loaded, especially if it is a transparent (png) image, because otherwise the lqip background could still be visible.