Next.js: `next/image` priority preloads the largest size

[Timer]

See this thread: https://twitter.com/AdrienHarnay/status/1323384957360918533?s=20

This isn't optimal for mobile devices.

[sebqq]

For me it always loads the largest size image (even without priority) and sizes attribute is not set on image (10.0.1-canary.6)

so for this component:

where width and height are set properly and layout is undefined I get this result:

And on every screen size the bigest size image is used for me.

-- ADD: Just for further analysys my image has width=2930 and height=2374 and I thought that these properties are used only in order to define aspect ratio of the image box (in order to prevent CLS). However, I've just noticed that if I use values width=613 and height=420 (which gives same final aspect ratio), then Image component knows better how to resize image. Isn't this behavior a little bit weird?

[adrienharnay]

Hey, I should add a precision here: next/image preloads the largest size when using layout="fill". I haven't tried other layout values.

[Timer]

This seems to be a bug in chrome when you resize the window. If you enable the device emulator or restart browser without resizing it works as expected, only one image is loaded!

[adrienharnay]

No so fast! Just tested on iOS Safari on https://adrien.harnay.me

https://gyazo.com/44c32106086c8126ededd15e2e38d4ec

Both https://adrien.harnay.me/_next/image?url=%2Fimages%2Flayouts%2Fmain-layout-cover.jpg&w=1920&q=85 and https://adrien.harnay.me/_next/image?url=%2Fimages%2Flayouts%2Fmain-layout-cover.jpg&w=1024&q=85 did load.

Code:

<Image
  src="/images/layouts/main-layout-cover.jpg"
  alt="sky full of stars"
  priority
  quality={85}
  layout="fill"
/>

No resizing or anything, just mobile browsing.

[Timer]

C'mon Safari! 😆

[adrienharnay]

Cross-browser compatibility right? May I ask why next/image isn't using <picture> behind the scenes?

[Timer]

AFAIK, <picture> doesn't support a feature here that'd fix this specific issue. Could you elaborate more?

[adrienharnay]

Sorry the question was more out of curiosity, I was wondering if you did consider picture, and if so what made you chose img. I don't believe picture would solve this either.

[Timer]

We chose <img /> so it'd be more of a drop-in equivalent. We didn't need any of the <picture> features and felt users may be more unfamiliar with the element.

[adrienharnay]

Ok thank you :+1: