Next.js Image Component Not Lazy Loading Images on Mobile Devices
I've looked through the documentation and I'm still confused about I'm collaborating on a project where I need some guidance on I'm experiencing an scenario where the Next.js Image component does not seem to lazy load images on mobile devices..... My current setup is using Next.js version 13.1.0, and I've followed the standard implementation for lazy loading. However, on mobile devices, all images are loaded at once instead of loading them as they come into the viewport, which is leading to performance optimization. My implementation looks something like this: ```javascript import Image from 'next/image'; export default function MyComponent() { return ( <div> <Image src="/path/to/image.jpg" alt="Sample Image" width={600} height={400} priority={false} loading="lazy" /> </div> ); } ``` I've set the `loading` attribute to `lazy`, but the images still appear to be loading all at once when I inspect the network activity on mobile. I've tried testing on both iOS and Android devices, and the scenario continues. I also checked my network throttling settings in Chrome DevTools to simulate mobile conditions, but it didn’t help. Does anyone have insights on why this could be happening? Are there specific configurations I need to consider for mobile devices with the Next.js Image component? I would greatly appreciate any advice or best practices to ensure lazy loading works effectively on mobile. How would you solve this? I'm coming from a different tech stack and learning Javascript.