[next/image] Repeated images rerender on every page switch.

[DaniHv]

Bug report

Repeated [Next/Image] included images rerenders when switching between pages even if has been already used in components like layout/header.

Describe the bug

When including an image using next/image, in every page switch it rerender even if was rendered before, like a Header component with logo.

If we see the network tab in developer tooks, we can confirm that isn't a "thing" related to network/cache because the image/assets isn't downloaded multiple times.

Personally, actually don't know how exactly next/image works, but with the Gatsby equivalent (gatsby-image) it didn't happen using a similar "repeated component" approach.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'https://mhhk5.sse.codesandbox.io/'
2. Click on 'Go to first page / Go to second page'
3. Repeat multiple times step 2 quickly

Expected behavior

The image shouldn't rerender, and works like a normal .

System information

Not necessary, because was tested on Vercel, Codesandbox and my own PC

• OS: Windows 10
• Browser: Edge/Chrome Last version
• Version of Next.js: 10.0.1 / 10.0.2-canary.8 (Tested in both, same result)
• Version of Node.js: 14.7.0

PD: Sorry if my english isn't good enough.

[DaniHv]

UPDATE: After some tests found a 'solution', using priority attribute enabled it works normally (10.0.1 and last canary).

Correct me if i'm bad, but i still think is a bug because the Image component should have the same behavior like a normal html img by default. If this is caused by a responsive image (srcset) even in normal html only, please someone tell me to close to issue :)

[Timer]

This is the intentional behavior because images are lazy loaded by default. Even if the image is already in cache, we still don't display it immediately for performance reasons (it can be CPU expensive for a browser to draw an image).

We could maybe explore detecting if the image is both in cache and in viewport to skip the lazy phase, thus eliminating any flash.

[bbigras]

Is it a bad idea to use <Image /> to display the website logo?

[skoshy]

In case anyone reached here trying to animate <Image />s with Framer Motion's AnimateSharedLayout component, as detailed in this post, setting loading="eager" on the Image as @Timer mentioned fixes the white flashes/image re-renders when animating between two pages.