Next.js 11 - 图像优化不适用于生产环境

Question

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'],
  },
};

Answer 1

Can you check your image source URL length. Because I had same issue in one of my project and when I optimized the url it worked. You can check the documentation as there is a limit for maximum of string length of 4,096 in redirect.