Are images in Next.js lazy loaded when visibility is set to hidden?

Question

Are images in Next.js lazy loaded when visibility is set to hidden? If that is not the case I would want to make them lazy load. I know I can use the priority prop but I want them to load in a specified viewport position.

Answer 1

All Images inside Image components in Next js are lazy loaded by default and it not going to change with visibility or other styling properties. Only priority prop will change the behavior.

Also for more confidence I recommend you analyze the Network tab and see the behavior of your images.