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 conve…

Did you check this: [image] Nextjs images 502 responses Support Hey @hughrawlinson , The without edge function is expected behaviour. You’ll always get a JPG without Edge Functions because we don’t support content-negotiation without Edge Functions. About the…

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: [image] GitHub - netlify/next-runtime: The Next.js Runtime allows Next.js to run on... The Next.js Runtime allows Next.js to run on Netlify with zero configuration - GitHub - netlify/nex…

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!

@jontewks Hi! Since this thread is related I’ll ask here (in case let me know and I’ll move the question to a separated thread). I think there’s a problem with Nextjs runtime and image formats. In my nextjs I’ve specified I only wants formats: [‘image/webp’], but in Chrome I always get avif images, …

What’s the issue with AVIF? It is smaller in size than WebP, but anyways, if you can solve this by adding the following to a _redirects file in the public folder: /_next/image url=:url w=:width q=:quality /.netlify/images?fm=webp&url=:url&w=:width&q=:quality 200!

Yes they’re smaller but slower during decoding which can increase the LCP. I’ll try that, thanks for the info!

Issue with nextjs webp/avif image formats

Support

hrishikesh July 3, 2022, 11:47am 4

Did you check this:

Topic		Replies	Views
Don't work image optimization in nextjs project. Locally it works Support building , nextjs	5	951	June 26, 2022
Does Netlfy support `next/future/image` image optimizations with Next.js? Support asset-optimization , nextjs , edge_functions	1	1001	September 25, 2022
11ty image only generating Webp and AVIF locally, failing on Netlify Support building , netlify-cms	1	579	July 2, 2023
next/Image not working when deployed manually through netlify cli Support nextjs	3	380	January 12, 2023
Animated webp images Support building , nextjs	6	557	July 7, 2025

Issue with nextjs webp/avif image formats

Related topics