Next.js Discord

Discord Forum

Omit or scale down width and height in <Image/> output

Unanswered
Alaska pollock posted this in #help-forum
Open in Discord
Alaska pollockOP
I'm encountering a weird issue with animated <Image/> components. The optimization and resizing gives me properly sized images depending on device sizes.

However, I noticed that leaving the intrinsic width and height fields in the img tag made animations extremely sluggish.

The issue doesn't appear with <img/> tags with undefined width and height.
For reference, the intrinsic width and height of the image is around 5k (pixels). This gives <Image width="5000" height="5000" .../> with a 1080 pixel wide output image on my laptop.

Rendering <Image width="5000" height="5000" ... [with a 1080px wide img]/> is way slower than <img [with a 1080px wide img]/>

I'm using static imports. I don't want to scale down the raw local image, as I'd like to leave this to the optimization. Is there a way to keep width and height in sync with the resized image?

I'll update the thread with a sandbox.

3 Replies

Alaska pollockOP
Currently, I'm setting width and height again after the img loads:
onLoad: (e) => {
          setWidth(e.currentTarget.naturalWidth);
        setHeight(e.currentTarget.naturalHeight);
        }


This feels like a workaround. Is there a better way to do this?
Alaska pollockOP
Update: added the same width and height to the <img/> element, it still renders faster than <Image/>, disabled placeholder and kept all other styles the same
Alaska pollockOP
I figured it out, for anyone reading this:
The reason why <Image/> is slightly slower:
1. It sets no-store, must-revalidate on cache header when unoptimized's true, this causes all img requests to be revalidated
2. Browsers default to eager loading I believe. After setting it to eager it loads as fast as the default <img/> tag