Next.js site not behaving normal

Dear Netlify team. We are working on a Next.js site hooked up to Contentful. We have deployed the site using the guides here on Netlify. So far so good. But the performance especially with images are not that good. The URL is https://natural-colors-dev.netlify.app/ and if you view it on a big screen the hero image cannot even load as payload is too big.

If I try the image on a direct URL: https://natural-colors-dev.netlify.app/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fv9fghxna4yaf%2F3SwsYXFC58frjrFYCXPOKg%2Fde9af5f1412585dee2883e40e1b6f0b2%2FNCOrange.png&w=3840&q=75

With a big screen I actually get

{
errorType: “Function.ResponseSizeTooLarge”,
errorMessage: “Response payload size (6819210 bytes) exceeded maximum allowed payload size (6291556 bytes).”
}

But the image in Contentful is not that big (about 1.7mb)

We have deployed the exact same site (the same branch from Github) to Vercel (https://natural-colors-next-js.vercel.app/), and do not have any issues on that platform. Is there something we could have misconfigured?

When I try to load that image, I get various error messages saying there is no such asset available. When I download the “orange” image from your Vercel site, I can see

  1. it can be reduced in size by 22.9%, and
  2. you seem to be resizing it explicitly to much larger than the original.

How certain are you that your code is valid?

The version on Netlify is the exact same as the one on Vercel, as it is the same branch in Git both platforms links to when doing a deploy. Whenever our branch changes a new deploy is done in both environments.

Hey there, @Morten_Ljungberg :wave:

Thanks for your patience while I spoke with a teammate about this! After looking at the issue you are encountering, we recommend not using next/image for images from Contentful API. Essentially you are double processing your images, causing your functions to run multiple times. This should help moving forward!