Gatsby: Native loading="lazy" lacks dimensions inside gatsby-image.

[eriktiekstra]

Description

I am using the fluid queries within gatsby-image. When using the default loading="lazy", I get the following warning inside the console:

[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323

I tried to search for this issue, but only found 2 unanswered questions on spectrum. I am using gatsby 2.15.11 and gatsby-image 2.2.17. As far as I can see the native lazy-loading has been introduced in gatsby-image 2.1.0.

It also appears on https://using-gatsby-image.gatsbyjs.org/

[ascorbic]

I think the problem here is that fluid images by their nature can't have their size set in the HTML, because they're supposed to resize to fit their container. I'm not sure if there's a way around this (or if it's actually a problem).

[wardpeet]

I've created an upstream issue on chromium https://bugs.chromium.org/p/chromium/issues/detail?id=1002455. Seems like chrome doens't detect fluid containers and mark images without dimensions as faulty. You shouldn't worry about it.

[eriktiekstra]

@ascorbic
It is a warning, so nothing breaks the site. I just like to keep my console clean, so I thought to make people aware of it.

@wardpeet Thanks for creating an issue on chromium, I actually didn't think of that it could be an issue in the browser. It makes sense though.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[jimmyandrade]

👀

[olee]

This issue is still relevant and should be reopened I think

[michaelCaleyWhaley]

Still an issue. Even with it being fluid we should be able to pass in attributes

[hlolli]

This causes chrome not to lazy load at all, and the lighthouse/audit rankings are down the drain because of this.

[fabiomrbarbosa]

I'd also like to see this being addressed. Adding attributes to images, even when fluid, is slowly becoming a new best practice.

[AntoineBourin]

We can’t use fluid images for now. I’m using only fixed images without the possibility to set attributes on fluid images...

[christophcar]

I am facing this issue as well, would be great if this could be adressed any time soon.

[benyou1969]

Still facing this issue

[forwinder15]

Still a thing

[Z11]

Still an issue 😿

[renguer0]

Still an issue here too (blazy in css backgrounds).

[TovlyDeutsch]

Looks like the removal of this console warning was just merged into Chromium: https://chromium-review.googlesource.com/c/chromium/src/+/2159142. Not sure when it will appear in Chrome, perhaps after the next major release (mid-May I believe)?

[waynehaffenden]

As of 1st June using the latest release build of Chrome (Version 83.0.4103.61) this is still an issue.

[gokaiorg]

Still no changes about this issue.

[Z11]

checking back, still seeing this issue.

[RubenNijhuis]

Still an issue

[suraneti]

Still an issue

Chrome: version 83.0.4103.116 (Official Build) (64-bit)

[Nnaji-Victor]

Still an Issue as of today!

[E-PL]

I've just updated Chrome to Version 84.0.4147.89 (Official Build) (64 bit) and I'm not getting the console warning anymore, I suppose that the removal of the warning message was merged into Chrome stable 🎉

[mxstbr]

Closing as this was a Chrome issue that has apparently been resolved as per @E-PL!