Image optimization not working for all images in standalone mode?

[siamahnaf]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro Binaries: Node: 16.17.0 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.2.6 eslint-config-next: 12.3.1 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Here the bug is very critical. I create one project and I deploy this project to vercel. Here I get all images are optimized. When I upload new image from my dashboard, it also optimized this image.

But I need to deploy my project to aws ec2 linux server. That's why I choose nextjs output tracing features. That's I build a standlone mode by helping of this documentation- https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files

After building, When I start my server by running node server.js. It starts successfully. Everything is okay. I can see all image optimized with webp format. But after some time by reloading my page, I can see image optimization not working. Then I can see some images come with optimization and some images come without optimization. Some images come with webp format, and some images come with jpeg, png format. After deploying to aws ec2. When I load my page first time, I can see all images are optmized. But after reloading my page or after some time the image optimization not working.

Also, When I upload new image from my dashboard, that new image isn't come with optimizations.

***Note: In terminal I not finding any sharp related error. Actually, I am not Geeting any error in my terminal.

I also try next js latest version- 12.3.1 and 12.3.2-canary.22

Here is my next.config.js-

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  disable: process.env.NODE_ENV === "development"
});

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: "standalone",
  images: {
    minimumCacheTTL: 2592000,
    domains: ["dzzoo94ozikw5.cloudfront.net", "lh3.googleusercontent.com", "platform-lookaside.fbsbx.com"]
  },
}

module.exports = withPWA(nextConfig)

In my package.json-

"@bradgarropy/next-google-analytics": "^1.0.2",
"@emotion/react": "^11.9.3",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.9.3",
"@fontsource/open-sans": "^4.5.10",
"@greatsumini/react-facebook-login": "^3.2.1",
"@iconify/react": "^3.2.2",
"@mui/lab": "^5.0.0-alpha.91",
"@mui/material": "^5.9.1",
"@mui/x-data-grid": "^5.17.2",
"@react-oauth/google": "^0.2.8",
"@react-pdf/renderer": "^3.0.0",
"@reduxjs/toolkit": "^1.8.5",
"@types/file-saver": "^2.0.5",
"@types/js-cookie": "^3.0.2",
"@types/react-image-magnify": "^2.7.1",
"@types/uniqid": "^5.3.2",
"axios": "^0.27.2",
"embla-carousel-autoplay": "^7.0.0-rc05",
"embla-carousel-react": "^7.0.0-rc05",
"file-saver": "^2.0.5",
"html-react-parser": "^3.0.4",
"js-cookie": "^3.0.1",
"keen-slider": "^6.7.0",
"next": "12.2.6",
"next-nprogress-emotion": "^2.0.0",
"next-pwa": "^5.6.0",
"next-redux-wrapper": "^7.0.5",
"qrcode.react": "^3.1.0",
"react": "18.2.0",
"react-aws-s3-typescript": "^1.1.4",
"react-country-region-selector": "^3.4.0",
"react-dom": "18.2.0",
"react-facebook-pixel": "^1.0.4",
"react-hook-form": "^7.33.1",
"react-image-magnify": "^2.7.4",
"react-images-uploading": "^3.1.7",
"react-otp-input": "^2.4.0",
"react-password-strength-bar": "^0.4.1",
"react-phone-input-2": "^2.15.1",
"react-player": "^2.10.1",
"react-redux": "^8.0.2",
"react-share": "^4.4.0",
"react-timer-hook": "^3.0.5",
"sharp": "^0.31.1",
"uniqid": "^5.4.0"

I use next/image component in this way in my project.

<Image src={process.env.NEXT_PUBLIC_IMAGE_PATH + brand.image} width={25} height={25} alt={brand.name} />

Expected Behavior

All images should come with webp format! Even all new images after building my app uploading from dashboard. My Next js project is fully SSR. Now I need all the images will be optimized even Api called images uploading from dashboard. It needs optimized. Please help me. How can I solve this problem.

Link to reproduction

https://www.nekmart.com

To Reproduce

Here is my link-

Standalone mode link- https://www.nekmart.com/ Vercel link- https://nekmart.vercel.app/

I need to work image optimization in standalone mode perfectly.

[balazsorban44]

Hi, could you please provide a minimal code example that I could use to reproduce the issue? Do you experience the issue with a local production build too (next build && next start) or only when deployed?

Do you have some specific images that behave unexpectedly? I would like to have a look at them to make sure we can properly detect the necessary information when optimizing them.

[siamahnaf]

Hello, Actually I am getting issue when I deploy this to the server. I am not getting the issue when I run my project in local. It only occurred on the server.

**Note, after 10 days investigation, I can understand some images come with WebP format and some images come without WebP format. Specially, those image that are uploaded via dashboard after deploying the site. Here I can see that, If I build my project again with npm run build and then I deploy the latest build, Here I can see the new images come with optimization, which image are not come with optimization in previous build.

I have some questions-

1. We know that vercel automatically install the essential package for image optimization and setup their server automatically. But in the other server (such as aws ec2, azure virtual machine) do not provide the essential environment for my next js project. My question is If there is any manual to setup and ready for next js to any other server like aws ec2, azure virtual machine, Then please provide proper information and docs.
2. Hence I am not getting image not optimization issue in the local, then if there have any special things to do my project to working all image optimization after deploying the site.

Here is my server spec-

1. Aws EC2 OS- ubuntu Type- t2 micro Memory- 1GB Storage- 30GB

2. Azure Virtual Machine- OS- ubuntu Type- 22_04-lts-gen2 Memory- 3.5 GB Storage- 20GB

   **In local I use windows 11 with 12 GB Ram and Core i5, 7 gen prossor as I say that in local image optimization works perfectly.

** I have not some specific images that behave unexpectedly. Actually, it changes by every load. I can see different different image on every load.

[siamahnaf]

@balazsorban44, any update please?

[siamahnaf]

Hello @balazsorban44, any updatw please...

[siamahnaf]

@balazsorban44, why you are not replying to me.

[siamahnaf]

@balazsorban44, please response me, please.

[siamahnaf]

@balazsorban44, this is githup code repository- https://github.com/nekmart/nekmart

[siamahnaf]

@balazsorban44, I give my guthub repository.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.