skip to Main Content

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


  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.

    Login or Signup to reply.
  2. 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)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search