Why my Nextjs component renders as jpg instead of Webp or Avif?

Diposting pada

Why my Nextjs <Image> component renders as jpg instead of Webp or Avif?

With Nextjs the expected outcome is to see the Image component rendered as .WebP or .AVIF but it remains jpg

Answer

Below is my next.config.js
/** @type {import(‘next’).NextConfig} */
module.exports = {
images: {
domains: [‘cdn.sanity.io’],
formats: [‘image/avif’, ‘image/webp’],
},
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: [{ loader: ‘@svgr/webpack’, options: { icon: true } }],
});
return config;
}, };
The following is the next/image component:
<Image
className=”kitchen-img”
loader={myLoader}
loading=”lazy”
layout=”fill”
objectFit=”cover”
src={urlFor(kitchen.mainImage).url()!}
alt={kitchen.title}
/>
Any idea why the it doesn’t come up as avif/webp? What am I missing?
const myLoader = ({ src, width, quality }: any) => {
return `${src}?w=${width}&q=${quality || 85}` };

Answer
In your case, you are using a loader that will trigger the images directly from your CDN, and will not be stored in next cache folder.
To be 100% sure, try to remove the loader={myLoader} and check the network 🙂 again. (test with next dev, and check if your image has webp extension)
If you still want to use webp, check if you can send the extension via your CDN.
const myLoader = ({ src, width, quality }: any) => {
return `${src}?w=${width}&q=${quality || 85}&?fm=webp`
};
Keep in mind, that some browsers don’t https://caniuse.com/webp

 71 total views,  3 views today

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *