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%)

[rusakovic]

One year passed. Still open. Have the same image memory leak but for opengraph

[styfle]

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc).

I don't see the memory leak when using the the recommended node:18-alpine base image (musl).

This is likely related to sharp and documented here:

• Docs: https://sharp.pixelplumbing.com/install#linux-memory-allocator
• Related issue Leak on Linux? lovell/sharp#955

[rusakovic]

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc).

I don't see the memory leak when using the the recommended node:18-alpine base image (musl).

This is likely related to sharp and documented here:

• Docs: https://sharp.pixelplumbing.com/install#linux-memory-allocator
• Related issue Leak on Linux? lovell/sharp#955

Thank you for your response!
I don't use Docker preset in my project. But I use coolify coolify.io that uses Docker, for sure.
My project started on Node 20.
This instruction is also was done: https://sharp.pixelplumbing.com/install#linux-memory-allocator

Maybe I should try standalone distribution with DOcker, if I self-hosted

[CeamKrier]

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc).

I don't see the memory leak when using the the recommended node:18-alpine base image (musl).

This is likely related to sharp and documented here:

• Docs: https://sharp.pixelplumbing.com/install#linux-memory-allocator
• Related issue Leak on Linux? lovell/sharp#955

downgrading the node to 18-alpine resolved the issue for me. Thanks!

[Zeddnyx]

same here, i try downgrade from 20 to 18-alpine and is work

[art-alexeyenko]

The memory leak persists on node 18 alpine, here's the scenario for new nextjs app:

1. Create nextjs-latest app
2. Take a large image (~10MB for my case) and put it into public folder
3. Render that image with next/image on home page
4. deploy this to docker with node:18.20-alpine
5. Open home page - this will cause a memory spike to ~2GB. After a bit it will fall to ~1GB and stay there
6. Open the page in incognito tab and keep refreshing the main tab and the incognito - this will cause a second memory spike and memory usage will remain that way.
   A handy demo in case it's needed:
   https://github.com/art-alexeyenko/next-image-oom

And some memory usage trends from my local tests with Docker Desktop:

[styfle]

That repo is missing sharp.

You need to run “npm install sharp” for production.

[Innei]

@styfle Maybe it has nothing to do with sharp, I'm using standalone build and I have sharp installed on my system and also defined the path to sharp in env.

But I monitored that the memory is still rising continuously, then suddenly in a few seconds, the system lost response, at this time through the cloud platform monitoring observed that the CPU 100%, memory 100%, IO Read 100%. But the system didn't trigger the OOM killer which is very strange.

node -v
v22.0.0

[Innei]

Hi there, I just dumped a memory dump file. Here's what the memory stack looks like after it's been running for a while.

This was shortly after launch.

As you can see from the following dump, it's the ImageResponse-related modules that are leaking memory.

[Innei]

ImageResponse and FigmaImageResponse that means @vercel/og causes memory leak?

[Six6pounder]

The memory leak seems to only be present when running in ubuntu:jammy base image (glibc).
I don't see the memory leak when using the the recommended node:18-alpine base image (musl).
This is likely related to sharp and documented here:

• Docs: https://sharp.pixelplumbing.com/install#linux-memory-allocator
• Related issue Leak on Linux? lovell/sharp#955

Thank you for your response! I don't use Docker preset in my project. But I use coolify coolify.io that uses Docker, for sure. My project started on Node 20. This instruction is also was done: https://sharp.pixelplumbing.com/install#linux-memory-allocator

Maybe I should try standalone distribution with DOcker, if I self-hosted

Did you find a solution for coolify? The issue is still present today

[chipcop106]

Here is our memory chart when using the Next 14.2.3. I confirmed it has a memory leak issue with open graph-image and twitter-image. From 27/6, we disable this function, and this chart becomes normal.

Solution

Try not to use dynamically generated metadata images using tsx,js,ts.