Hi @solid ravine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#First time view transitions between small and big images
twilit plinthBOT
Astro provides a powerful <Image /> component that optimizes your images and infers width and height based on the original aspect ratio to avoid Cumulative Layout Shift (CLS), which is an essential metric to optimize for website performance. This component works by inferring an explicit height and width for every image and including them in the generated <img> tag. With explicit dimensions, the image can’t shift the page layout as it loads onto the page.
Here is an example of how to use the <Image /> component:
<Image
src={myImage}
alt="A very cool penguin!"
style="height: 100%; width: 100%; object-fit: cover;"
/>
In your case, you can use the <Image /> component for both the thumbnail and the larger image on the product detail page. This will ensure that the larger image has its space reserved while it's loading, preventing the awkward transition you're experiencing.
However, if you're using the same image with different properties (like different sizes for the thumbnail and the detail page), there's a known issue where Astro doesn't deduplicate these images correctly. This can result in two identical images being generated. A workaround for this issue is to use the GetImage function for both instances of the image, which will correctly deduplicate them.
Sources:
- Astro Documentation: Images (https://docs.astro.build/en/guides/images/)
- Astro Blog: Better Images in Astro (https://astro.build/blog/images/)
- GitHub Issue: New astro assets images pipeline should deduplicate images with identical props (https://github.com/withastro/astro/issues/8047)