next/image should not force async decoding, as it can slow down the overall page load and cause flashes

[cristianlivella]

Goals

1. allow developers to have more control over image loading optimization
2. make smoother websites

Non-Goals

No response

Background

I'm not actually sure about why decoding="async" is forced for next/image, but I think it should be possibile to override it, because in some cases it isn't the best choice, as it slow down the overall page load and the user can perceives flashes due to the images being shown later than the other content.

For example, check exallievi-new.itispaleocapa.it, and you can see the effect I'm talking about. You can even easily spot it with PageSpeed Insights:

Here you can see the same website, but without decoding="async" on the images: exallievi.itispaleocapa.it.

Proposal

Here move the line decoding="async" before {...rest}.

[quarxpl]

We are encountering a similar issue, which appears to be specific to Chromium-based browsers. It primarily affects large images, which load at a considerably slow pace when decoding is set to async. Small images seem unaffected. Our current makeshift solution is a reimplementation of the component, used selectively for some images. This, however, is far from being an ideal solution.

[adardesign]

Hi, any update on this?
#49772

[UPSxACE]

Workaround I am using for now:
#49772 (comment)