Why do the images that I display using the Image component take much longer to load than those that I display using the img tag? My images are in webp format. In the screenshot https://ibb.co/jLsnLd4, the two links at the bottom are just an img tag, then some waiting and next/image loads the images. Maybe it's because the lazy loading functionality is implemented this way? The Image component uses hook useIntersection: https://github.com/vercel/next.js/blob/52139a41e90b668aa7e393c18990f1d1f5db9e22/packages/next/client/image.tsx#L10 Then this hook uses IntersectionObserver: https://github.com/vercel/next.js/blob/0af3b526408bae26d6b3f8cab75c4229998bf7cb/packages/next/client/use-intersection.tsx#L89 Or maybe the reason is that the Image img component always has decoding="async"? https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding Can this affect the download speed in any way? Do you have any suggestions?
Asked
Active
Viewed 1,846 times
1
-
2Nope Image components lazy load on default and save the initial load time. If you want to preload the image then read this https://nextjs.org/docs/api-reference/next/image#priority – Siddharth Varangaonkar Nov 24 '21 at 11:32
-
Thank you, but I know about what you wrote. I have read all the documentation. I want to understand why the Image Component in general has a long loading of the image. It's not about lazy loading, it seems to me. – NikolayDavidof Nov 24 '21 at 14:16
-
@NikolayDavidof It is about lazy loading, that's why the images get loaded at a later point with `next/image`. – juliomalves Nov 24 '21 at 20:06