If your NextJS Image component is not converting images to webp, there are a few possible reasons:
1. You have not added the following config to your next.config.js file:
images: {
domains: ['http://localhost:3000'],
},
This config tells NextJS to allow image optimization for images from the specified domains.
2. You have added unoptimied: true to your next.config file:
images: {
unoptimized: true,
},
This config tells NextJS to not optimize images, which will prevent them from being converted to webp.
3. You are using an old version of NextJS:
Image optimization was introduced in NextJS 9.3.0, so if you are using an older version, you will need to update to the latest version to take advantage of this feature.