Another Memory Leak in `next/image`

[jaunruh]

Verify canary release

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

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
Node: 19.0.1
npm: 9.2.0
Yarn: 1.22.19
pnpm: 7.21.0
Relevant packages:
next: 13.1.1
eslint-config-next: 13.1.1
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue

https://github.com/jaunruh/next-image-test

To Reproduce

Set up docker image:

• docker build --no-cache -t next-test .
• docker run -p 3000:3000 --name next-test next-test

Surf the app:

• open browser at localhost:3000
• scroll the home page and the project pages randomly
• use the Resource usage extension to monitor the memory usage
• see the memory only increase and never decrease

Describe the Bug

The apps memory usage only ever increases and never really decreases anymore. On docker I have easily managed to pass 1gb in memory usage.
The app was run on digitalocean as a bare nodejs app and as a docker container locally and in digitalocean.
The memory usage in digitalocean (1 CPU, 512mb memory) looks as follows, but can also be reproduced with docker:

In the provided repo there are also commented-out image tags. As soon as these are used the problem disappears.

Expected Behavior

No continuous memory increase.

Which browser are you using? (if relevant)

All major browsers

How are you deploying your application? (if relevant)

docker run and build

_NEXT-2023

[remvn]

I tested your repo and had no memory leak when running it as a bare node.js server. However, when I ran it on Docker (using WSL2 and Docker on Windows), I encountered a memory leak. It could be because of this issue: wsl 2 memory leak issue (I experienced a massive memory leak of around 11 GB).

Memory spike a little bit (your image is quite big and NextJS optimize image before send it to client)

Memory did decrease:

[jaunruh]

So as mentioned above I was using Digital Ocean Apps or Docker for deployment. The assumption that Digital Ocean Apps use docker to deploy bare nodejs repos should be a fair one. Locally on macOS there does not seem to be any memory leak. I have not tried this on any windows machine. I have updated the repo to use ubuntu instead of debian. But the issue persists. It does not seem to be distro specific.

[Mikroser]

Try setting this in next.config.js. I hope it solves the problem

Module.exports = {
images: {
unoptimized: true,
},
}

[jaunruh]

I have seen this option. I am going to try it in my repo. But even if it solves the memory leak problem, it creates the issue of unoptimized images. I can then just use a general <img/> tag instead. No need for next/image anymore.

[jaunruh]

Generally using unoptimized images seems to fix the memory leak. But well, the images are unoptimized... so I still think this is a bug that needs to be fixed.

[khoramshahy]

I have the same issue with using nextjs Image. I am using nextjs 13.1.1 and docker container will be killed.
my question is that if the solution is setting the images unoptimized, so is there still any benefit of using nextjs Image instead of usual Html img?

[jaunruh]

Persists in next 13.2.4.

[caprica]

I am seeing similar in 13.4.1.

Deployed a small website to Digital Ocean that uses RSC and Image. There's maybe 50 mid-size images total in this entire web-site.

In the screenshot, after the black line is after image optimisation disabled in config. The other dips in the graph before that point are due to server restarts.

As per a warning in the NextJS documentation I am using jemalloc in my deployment.

[swedpaul]

Persist in 13.4.7.

Three solutions worked:

1. add to next.config.js

images: {
 unoptimized: true
},

2. Change all next.js <Image> to <img>
3. Add to all next.js <Image> param unoptimized

[alan345]

Same issue for us.

We are using AWS Fargate (ECR, ECS). And yes it is using a docker image.

This solve it, but yes, the images are not optimized anymore.

images: {
 unoptimized: true
},

By reading your comments, I really think the issue is with Docker and next/image

[sergio-milu]

same issue here with NextJS 13.5.2, we are running out of memory in a docker with 1 GB of ram (usually ram usage is between 10%-20%)