Next.js Image Optimization optimization guide with Custom Loader and Dynamic URLs
I'm experimenting with I'm migrating some code and Quick question that's been bugging me - I'm working on a personal project and I'm working with an scenario with image optimization in my Next.js application..... I'm using a custom image loader to fetch images from a third-party service, but the images are not being optimized as expected. Instead of serving the images in WebP format or resizing them according to the specified dimensions, they are served as-is, which is causing performance optimization. Here’s my implementation of the custom loader: ```javascript const myLoader = ({ src, width, quality }) => { return `https://my-image-service.com/${src}?w=${width}&q=${quality || 75}`; }; ``` And in my component, I’m using the `Image` component like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image loader={myLoader} src="example.jpg" alt="Example Image" width={500} height={300} /> ); }; ``` However, when I inspect the network requests, it seems that the images are not being transformed at all. The response headers do not include any directives for optimization like `Content-Type: image/webp` or similar. I’ve tried updating to Next.js version 13.2.0, and I’ve also checked that the `next/image` component is properly being used. My image service supports WebP format and dynamic resizing, so that shouldn't be the question. I also ensured that the loader is returning the correct URL by logging it in the console, which looks fine. Has anyone encountered a similar scenario? Is there something I'm missing in the configuration that prevents Next.js from optimizing images when using a custom loader? Any help would be greatly appreciated! Thanks in advance! I'm using Javascript LTS in this project. Thanks for your help in advance! My team is using Javascript for this web app. What's the correct way to implement this?