Next.js image is really slow on netlify

Hi!

Pretty happy with the next-on-netlify but I have an issue on my homepage.
Some images are really slow to load, for example:

https://next.makramonde.fr/_next/image?url=%2Fimages%2Fmakramonde-bijou.png&w=640&q=90

Here is the original file: makramonde-next/makramonde-bijou.png at develop · D0m3-/makramonde-next · GitHub

It always takes at least several seconds to load. How can this be fixed?

Here in the logs: Netlify App

image

Hey there, @D0m3 :wave:

Welcome to Netlify Forums! :netliconfetti: Thanks for reaching out!

First, I want to draw your attention to our newly released Next.js Essential Build Plugin! This link also contains Docs references and an open source repo that you can access :slight_smile:

Second, thanks for reaching out with this question! Currently, if you use Next.image on Netlify it can be slow because we make a Netlify function for each image that you use. Currently our team is working on this. In the interim, one of our Next.js experts recommends using Cloudinary. Should you be curious about next.image on Netlify, you can also check out this repo!

Thanks @hillary for your awesome answer.
I will host my images on my CMS for now :slight_smile:

1 Like

Hi Hillary,
I know this is an old question but I am still having an issue with the Next.js Image.
The loading of nextjs/image is much slower on Netlify than it is on Vercel. I have a project deployed to both Vercel and Netlify (from the same git repo and branch).

When I navigate between pages on Netlify deployment I see that the images do not load instantly (I am able to see the placeholders before the actual images are rendered) and this happens often even when I re-visit the same page again and again.

On Vercel I can also see the placeholders but for much shorter moment and this happens only on the first page visit.

Looking into the network tab on both Vercel and Netlify deployment I see that in case of Netlify, there are two requests per each Image tag.

One initiated by react-dom.production.min.js that returns 301 and the type text/plain / Redirect
And then there is another request initiated by the image and the latter one is of type png.
Please see the image I attached.

Vercel always makes only one request (no redirects) and sometimes it is 304 and then 200 if the cache age expired.

I have a grid of cards each has Image element loading an image that is stored externally (served from AWS Cloudfront CDN). And navigating back and forth to the page with this grid quite frequently renders a grid of cards with placeholders which looks pretty bad.

Do you have an idea what might be going on and what can I do to fix it?

Hey @aveprik,

The behaviour is expected to some extent. On Netlify, we send each request to AWS Lambda for Next Image component and there the images get processed and sent back to the browser. The problem with this implementation is that, the requests are always executed by US East server by default. The way to solve that would be to use simple image tags, or use a image CDN with Next Image.

Hi @hrishikesh,

Is it still the case that requests are always executed by US East servers by default?
I’m wondering if I should talk to my team about switching over to a CDN so that images load faster.

Yes, this is still true. Even if the region of the function is changed, it’s almost always going to be slower than a dedicated CDN that handles image rendering. So if that’s a possible option for you, please use that.