Next.js Image Component scenarios to Optimize GIFs from Public Directory with Custom Loader
Can someone help me understand I'm having trouble with the Next.js Image component while trying to optimize GIFs stored in the `public` directory. My setup is using Next.js v12.1.0, and I have a custom loader that should fetch images from an external CDN. However, when I use the Image component with a GIF file, it doesn't seem to optimize the GIF, resulting in a very large file size being sent to the client. I have tried the following code: ```javascript import Image from 'next/image'; const CustomLoader = ({ src }) => { return `https://my-cdn.com/${src}`; }; const MyComponent = () => { return ( <Image loader={CustomLoader} src="my-animation.gif" alt="My GIF Animation" width={500} height={300} quality={75} /> ); }; ``` When I inspect the network request, the GIF is being served without any optimization, and I can see it’s significantly larger than expected. The server returns it as `Content-Type: image/gif`. I also tried setting the `unoptimized` prop to `true`, but that didn’t help either. I've looked through the documentation and tried toggling the quality settings, but the GIFs remain unoptimized. Has anyone faced such an scenario? What can I do to ensure that my GIFs are optimized when using the Next.js Image component? Any insights would be greatly appreciated. I'm working in a Windows 11 environment. I'm coming from a different tech stack and learning Javascript. Thanks, I really appreciate it! I'm on Linux using the latest version of Javascript. I appreciate any insights!