#Using the <Image /> Component above the "fold"

4 messages · Page 1 of 1 (latest)

deft turtle
#

I'm sure this is probably a silly question, but I'm currently working on a website that includes an image. When using an <img> tag I notice that the Astro helper recommends using the <Image> component instead, which I'm currently using. However, I noticed that when I first run my server, the initial page load will have the image load in later. To prevent this I've tried a handful of things like adding loading="eager" and fetchPriority="high". Is there a recommendation on how to handle this "correctly" per se?

Also, I noticed that when using just an <img> tag is used with the same attributes, that I don't have any issue with the image loading after the text loads. I'll share both snippets below.

In my random google searching I also noticed that View Transitions can possibly contribute to this happening (if I read that correctly?) so I wanted to also flag that I do have <ClientRouter /> in my Layout.astro file.

<img> tag -

import modernHouse from '../assets/modern-house.webp';

<img class="mx-auto object-cover size-full max-h-[50rem] px-8 lg:px-16" src={modernHouse.src} alt="A Modern House" decoding="sync" loading="eager" fetchpriority="high" height={modernHouse.height} width={modernHouse.width} />

<Image> component -

import modernHouse from '../assets/modern-house.webp';

<Image
  class="mx-auto object-cover size-full max-h-[50rem] px-8 lg:px-16"
  src={blockHouse}
  loading="eager"
  fetchpriority="high" // should this be auto?
  decoding="sync" // should this be async?
  height={moreModernHome.height}
  width={moreModernHome.width}
  alt="A Modern House"
/>
topaz yacht
deft turtle
topaz yacht