Having issue with nextjs webp/avif image formats when deployed to netlify. It seem to be working fine locally and also on Vercel. Do I need to add any additional configuration in netlify?
hi there, when you say “having issue” can you explain a bit more? what kind of issues? do you have a screenshot or some logging info? that will help us troubleshoot.
NextJs provides an option to format images to webp format using the following setting in next config file.
images: {formats: [“image/webp”] }
Looks like this is not working when deployed to netlify. I have attached screenshot of image load with Netlify and local run. You can see that it gets converted to webp format when I run locally but it’s still jpeg on netlify.
Local Run:
Netlify Run:
Did you check this:
Is there any update to this issue since the last reply by chance? I’m having this exact issue and I have Edge Functions, and my images are small, yet I can’t get netlify to convert them when the site is deployed. Anything else I’m missing?
Hi @jontewks
Thanks for reaching out. Have you enabled the edge function IPX handling as seen here:
To turn on Edge image handling for Next/Image, set the environment variable NEXT_FORCE_EDGE_IMAGES to true
Thanks very much Gualter, that is the one I needed. I missed the mention of that in the docs and thought it would work out of the box since I had edge functions available. I appreciate the help!
1 Like