Image Optimization in Next.js: Blurry Images When Using `next/image` with Custom Loader
I'm working on a project and hit a roadblock. I'm relatively new to this, so bear with me... I'm experiencing an scenario with image quality when using the `next/image` component in my Next.js application, specifically when implementing a custom loader function. I set up a custom loader to fetch images from an external CDN, but the images appear blurry and not sharp, even at higher resolutions. I’m using Next.js version 12.3.0 and the following loader configuration: ```javascript const myLoader = ({ src, width, quality }) => { return `https://mycdn.com/${src}?w=${width}&q=${quality || 75}`; }; ``` In my component, I'm using it like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image loader={myLoader} src="my-image.jpg" alt="Sample Image" width={800} height={600} quality={90} /> ); }; ``` Despite setting a high quality, the images that load look noticeably pixelated. I’ve tried adjusting the `quality` parameter and the `width` parameter in the loader function, but it doesn’t seem to improve the output quality. I also confirmed that the original images on the CDN are of high quality. I’ve checked the console for any errors but only see a warning that states: ``` Warning: Image with src "my-image.jpg" is using an unsupported image format. ``` However, the image format is JPG, which should be supported. Could this warning relate to the blurriness, or is there another underlying scenario with how I'm handling the image loading? Any suggestions on how to improve the image quality while still using a custom loader would be greatly appreciated! My development environment is Windows. Thanks in advance! The project is a CLI tool built with Javascript. Any feedback is welcome! The stack includes Javascript and several other technologies.