4

I have a little issue with Image component in Next.js. I am using next 11.0.1 version, and I did not find any problems during development and local environment. The images are being optimized and everything is working fine. However, team and I find out that the images are not being optimized when the site is deployed on production. We are using Amazon services to do that.

Here is the proof of what I mean by this:

Local environment:

On wide-screen (1024px width)
Rendered size:  50 x 50 px
File size:  1.3 kB

Production environment:

On wide-screen (1024px width)
Rendered size:  512 x 512 px
File size:  41.5 kB

Of course, this is not a huge difference, but still I want to know how to fix this issue on production environment. I also added sharp dependency on the project itself, as I know that it will boost the performance of loading the images on the page. Can the problem be with Amazon not being set up properly?

Next.config.js

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['avatars.slack-edge.com'],
  },
};
Samke11
  • 385
  • 5
  • 17

2 Answers2

1

Next.js image optimization requires sharp npm package as dependency. (https://nextjs.org/docs/messages/install-sharp)

Make sure the sharp npm package is properly installed on the production environment.

Rinoy R K
  • 21
  • 2
1

Are you using the correct legacy package for Next.js < v13 next/legacy/image?

"Starting with Next.js 13, the next/image component was rewritten to improve both the performance and developer experience. In order to provide a backwards compatible upgrade solution, the old next/image was renamed to next/legacy/image."

https://nextjs.org/docs/api-reference/next/legacy/image

I'm not asking if you tested with the same device prod/dev, because you know that on smaller devices you get smaller images (image always optimized for target device)

faebster
  • 727
  • 7
  • 13