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'],
},
};
2
Answers
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.
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)