Lazy loading not getting added to image

[colbyfayock]

It appears that lazy loading isnt properly being applied to the image tag. As you can see here and on the docs size, I'm not seeing the loading attribute

Version

@nuxtjs/cloudinary 2.3.2
nuxt: ^3.5.0

Reproduction Link

Playground or https://cloudinary.nuxtjs.org/components/cldimage

Steps to reproduce

What is Expected?

loading="lazy" (or eager)

What is actually happening?

Attribute not applying

[Baroshem]

Hey Colby,

Thanks for reporting this issue. It is a bit strange because I tried to reproduce it even on stackblitz link and it works there

https://stackblitz.com/edit/github-cpyzpp?file=.stackblitz%2Fapp.vue

Could you try here and see if it works there?

[colbyfayock]

does that imply the loading attribute is only opt-in? i highly recommend that that's a default setting hence my confusion

the expectation is that works "out of the box" as most uses will benefit from not loading extra images on their page with the ability to configure the eager setting as needed for high priority images

unpic actually is intended to do this by default: https://github.com/ascorbic/unpic-img/blob/5b64a45a8e744ca09b80813cf2bd3901e1ea1fe0/packages/core/src/core.ts#L358

[Baroshem]

Yes, loading attribute should be added manually when needed (to avoid situations like lazy loading LCP's)

From my experience, attribute such as loading should not be added automatically as it can cause problems while manual adding it in places where it is actually needed is really straightforward.

This is how it works in Nuxt Image as well.

[colbyfayock]

the benefit of having a page full of images lazy loaded as opposed to not is more beneficial than a missed image without eager for LCP. you're producing additional network requests (potentially a lot) and using more bandwidth which is going to slow the page, especially with slower network speeds that have to download all of those requests

the tradeoffs are in favor of it as a default

while Nuxt doesnt do so by default, this is common across other frameworks as well, and i dont think this decision needs to conform to Nuxt Image

• Next.js: https://nextjs.org/docs/pages/api-reference/components/image#loading
• Angular: https://angular.io/guide/image-directive#disabling-image-lazy-loading
• Astro: https://github.com/withastro/astro/blob/7c67fa77b22bd877d9e96c825404ec02732b47fd/packages/integrations/vercel/src/image/build-service.ts#L38
• Gatsby: https://www.gatsbyjs.com/plugins/gatsby-image/#gatsby-image-props
• Unpic itself: https://github.com/ascorbic/unpic-img/blob/5b64a45a8e744ca09b80813cf2bd3901e1ea1fe0/packages/core/src/core.ts#L364
• Even WordPress in 2020: https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/

The goal of tools like this is to provide safe defaults that will be beneficial to the majority of use cases without the user having to think about it and provide options to solve the rest.

[Baroshem]

So if I get this correctly, you are suggesting to set lazy loading globally for all images and for things that should be LCP's on the pages use priority (fetchPriority) as a reference that would also change the value of underyling loading property from lazy to eager. Is that correct?

So for any normal image you would use:

  <CldImage
    src="cld-sample-5"
    width="987"
    height="987"
    alt="My Awesome Image"
  />

And they will be automatically lazy loaded.

While for LCP's you would use:

  <CldImage
    src="cld-sample-5"
    width="987"
    height="987"
    alt="My Awesome Image"
    fetchPriority="high"
  />

And it would set the loading="eager".

That sounds interesting. I can add it to the module, but we would need to specifically mention it in the documentation so that the users will understand how it works and what they should do to change it.

Let me know what you think about it :)

[colbyfayock]

looks like when using priority with unpic, it sets both fetchPriority="high" and loading="eager"

https://github.com/ascorbic/unpic-img/blob/5b64a45a8e744ca09b80813cf2bd3901e1ea1fe0/packages/core/src/core.ts#L360

the reason hes using priority as the unpic api may be because changing the loading value based on fetchPriority given fetchPriority is a native API may be unexpected. so it may make sense to replicate the same pattern as unpic, where both loading and fetchPriority can be set "as is" but priority would handle both

so my recommendation would be:

• default loading to lazy
• allow loading and fetchPriority to be configurable
• optionally, but could be useful, to persist priority like unpic which would set both

the priority prop seems to be a pattern others are taking, at least Next.js and Angular, so its not Unpic specific

edit: ive edited this a billion times lmao as ive researched this

[Baroshem]

Ok, I can implement it then this way. If you don't mind I will convert it into a feature request rather than a bug and work on it to release it with the next major version :)

[parag477]

Can you assign this issue to me

[Baroshem]

Sure, go on @parag477 🔥

Let me know if you need some help 😃