Next/Image is loading slow or throw 504 error.

[itwillrain]

Summary

Since updating to Next.js 14.2.4, we’ve been experiencing significant delays when serving some images from the public/ directory using next/image.

Problem

• When CloudFront returns a Refresh Hit, the image takes about 1.5 minutes to appear.
• When it’s a Miss, it often results in a 504 Gateway Timeout.
• The image file itself is just around 300KB, so this seems excessive.

This issue did not occur in Next.js 13.5.6, which served images normally under the same environment.

Our Environment

• Hosting: AWS ECS (Fargate)
• Base Image: Alpine Linux (Docker)
• Next.js: 14.2.4
• sharp: 0.32.6
• CDN: AWS CloudFront

Related

This behavior seems very similar to the issue described here on StackOverflow, where others reported long delays or timeouts during image optimization in production.

Request

If anyone has faced similar issues after upgrading to Next.js 14, or has suggestions for how to mitigate this (e.g. base image, config settings, sharp version), I’d really appreciate your input.

Thanks in advance!

Additional information

it seems even if v15 latest. (not 100% sure)

Example

No response

[xabierlameiro]

Hi! I understand your frustration with the image optimization performance issues after upgrading to Next.js 14.2.4. This is indeed a known issue that affects many developers, especially when using CloudFront or other CDNs with containers.

Root Cause Analysis

Based on your description and the current Next.js codebase, the problem stems from several factors:

1. Memory Management Issues: There's a well-documented memory usage problem with Next.js image optimization (tracked in issue #54482) where optimized images accumulate in memory and aren't properly garbage collected.

2. Default Timeout Configuration: The image optimizer has a 7-second timeout by default for processing operations, but this can be insufficient for larger images or when memory pressure slows down processing.

3. Alpine Linux + Docker + CloudFront: This combination is particularly problematic because:

   • Alpine Linux has more aggressive memory constraints
   • Container environments limit available memory
   • CloudFront cache behaviors can trigger multiple simultaneous optimization requests

Proven Solutions

1. Increase Image Optimization Timeout (Recommended)

Add this to your next.config.js:

module.exports = {
  experimental: {
    imgOptTimeoutInSeconds: 30, // Increase from default 7 seconds
  },
  images: {
    minimumCacheTTL: 86400, // 24 hours to reduce reprocessing
  },
}

2. Reduce Sharp Concurrency for Memory Management

module.exports = {
  experimental: {
    imgOptConcurrency: 1, // Reduce concurrent image processing
    imgOptMaxInputPixels: 50000000, // Limit max input pixels to reduce memory usage
  },
  images: {
    minimumCacheTTL: 86400,
  },
}

3. Alternative: Disable Optimization for Problematic Cases

If the above doesn't resolve it completely:

module.exports = {
  images: {
    unoptimized: true, // Disables image optimization entirely
  },
}

4. Implement External Image Optimization (Production Solution)

For production environments with high image loads, consider offloading to external services:

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my-image-loader.js',
  },
}

Why This Happens Specifically in 14.2.4+

The issue became more pronounced in Next.js 14.2.4 due to:

• Changes in Sharp library memory management
• Modified caching strategies for optimized images
• Enhanced CloudFront integration that triggers more concurrent requests

Verification Steps

1. Monitor memory usage: docker stats while serving images
2. Check CloudFront logs for request patterns
3. Test with a single image to isolate the issue

References

• Next.js Image Optimization Configuration
• Memory Usage Investigation #54482
• Next.js Image Config Documentation

The imgOptTimeoutInSeconds configuration should resolve your 504 timeouts, while the increased minimumCacheTTL will prevent repeated processing of the same images.

Let me know if you need help implementing any of these solutions!

[itwillrain]

@xabierlameiro

Thanks for the detailed explanation!
I'll try switching from Alpine Linux to Debian Slim and see if that improves the situation.
Also, I’ll go ahead and test the first solution you suggested — increasing imgOptTimeoutInSeconds and setting minimumCacheTTL.

Will report back with the results. Appreciate the help!