Images with `display: none` are still being fetched

[madebyfabian]

I have some images that are only specifically displayed on mobile/desktop. With the regular <img /> tag, setting them to display: none will not load any images. But with <NuxtImg />, the image also gets fetched, even though it's never displayed. This costs some unnecessary bandwith for mobile users.

Reproduction

https://stackblitz.com/edit/github-p3cr3h?file=nuxt.config.ts,app.vue

Workarounds

1. Doing a v-if and listening to the screen size in JavaScript. That would not be good for initial loading and SEO.
2. Adding loading="lazy" which will also not be good since the images are in the first loading viewport (in my case)

[Baroshem]

So if I get it right, we should abort fetching image that has this css property, correct?

[madebyfabian]

@Baroshem This was what I expected, since that's the browsers's behaviour on image. If they are not rendered, they are not loaded. Not sure if that's the right thing to do.

[Baroshem]

Hmm, under the hood, NuxtImg is still an image tag but it does not work the same way as you mentioned.

Do you maybe have an idea how it could be implemented? I checked the img docs but I have not found anything built in that could help here. And there are also multiple ways how the display: 'none' can be achieved (v-show, style, css class, etc) - so it would need to probably support several cases - unless there is a solution that I don't see now.

[madebyfabian]

@Baroshem Maybe I thought of something like checkVisibility() which sounds perfect – or detecting it via an intersection observer (might be more resource intensive?). This way it would work not only with v-if or v-show, but also with external css hiding the image (for example with a media query). Because as soon as the element or a parent would not appear by either display: none, visibility: hidden or opacity: 0 or something from Vue, it would detect the visibility to be false.