Issue with nextjs webp/avif image formats

Support
1

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?

2

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.

3

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:

local_webp
local_webp880Ɨ203 52.9 KB

Netlify Run:

netlify_jpeg
netlify_jpeg965Ɨ163 35 KB

4

Did you check this:

5

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?

6

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

7

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
8

@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, which in my case I donā€™t want to. Iā€™ve also added the NEXT_FORCE_EDGE_IMAGES variable and setted to true but nothing changes.

Is there a way to fix this? Thanks!

9

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!
10

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