Next.js Image Component scenarios to Optimize Large JPEGs with Custom Loader
I'm dealing with I'm prototyping a solution and After trying multiple solutions online, I still can't figure this out. Hey everyone, I'm running into an issue that's driving me crazy. I'm currently working on a Next.js application (version 12.2.0) and I've run into an scenario with the Image component when trying to optimize large JPEG images (around 5MB). I have a custom loader set up for images that fetches the images from an external API. The question arises when I try to load these large JPEGs; they take an exceptionally long time to appear on the page, and I see the following behavior in the console: ``` behavior: Could not convert image to WebP. ``` I've tried adjusting the quality parameter in my loader, but it doesn't seem to help with the loading times. Here's the custom loader function I implemented: ```javascript const customLoader = ({ src, width, quality }) => { return `${src}?w=${width}&q=${quality || 75}`; }; ``` And I'm using the Image component like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image loader={customLoader} src="https://example.com/image.jpg" alt="Example Image" width={800} height={600} quality={90} /> ); }; ``` I also confirmed that the image loads properly when accessed directly via its URL, but it seems like the optimization step is causing the slowdown. I've checked the network tab, and the request for the optimized image takes a lot longer than expected. Is there a known scenario with the Next.js Image component handling large JPEG files with custom loaders, or could this be related to the external API's response time? Any suggestions on how to improve the loading performance would be greatly appreciated! Any examples would be super helpful. Hoping someone can shed some light on this. This is part of a larger mobile app I'm building. Is there a better approach?