@astrojs/image dinged on Google Lighthouse for no width/height...

[agile otter]

I have a large image in the header of a client's site. I am using @astrojs/image's <Picture> component to serve avif, webp.... Although I am setting a aspectRatio on the <Picture> , Google Lighthouse is saying the image has no height/width on it, giving a fair hit to my performance score.

GitHub code — https://github.com/frankstallone/loumarc-astro/blob/main/astro/src/pages/index.astro#L35

Code used

      <Picture
        src={headerImg}
        widths={[520, 700, 2000]}
        aspectRatio={2000 / 631}
        alt="Amazon trusts Loumarc Signs to create their signs"
        loading="eager"
        quality={80}
        format="avif"
      />

This particular image needs to be responsive. I'll add that the only real difference between this and other uses of <Picture> on this page is the added loading="earger" since it's relevant for this image.

What do I need to do to get Google Lighthouse to be okay with the width and height of this image?

[cold pasture]

You should be able to set width/height on the Picture component I think.

(These can just be your numbers from the aspect ratio: width="2000" height="631")

[agile otter]

If I add a height/width it smooshes the image. It's no longer responsive.

Then, if I have width and height and add CSS

object-fit: contain;

The photo no longer sticks to the bottom of this container. The image, effectively takes up the whole space but only shows in the middle...

[cold pasture]

This combo should keep it stuck to the bottom of the container:

object-fit: contain;
object-position: bottom;

[agile otter]

Moar CSS?! 🤣

Let me give that a shot...

That works @cold pasture thank you very much. Looking forward to Assets having <Picture> and associated functionality so I can move it all to that! Debating whether to migrate the Sanity images but I might hold off.

[agile otter]

Performance is looking good! 🔥

[agile otter]

Found a bug with this solution on mobile. Because it's height is so tall it pushes the font up. On an actual iPhone it also pushes the sign off the viewport, too. bummer.

Here's what it should look like. This is without the width, height and the classes that add the object-fit and object-position.

[cold pasture]

Oh yeah — you probably also need height: auto 😅

Actually suspect that can replace object-position.

So just

object-fit: contain;
height: auto;

[agile otter]

Height auto did fix it before. I mentioned this in a previous support thread but wondered if that was technically the right way. 😇