AVIF images get green tint after upgrading Next.js (prod only) – sharp already installed

[adarshswaminath]

Summary

Hi everyone 👋

After upgrading a Next.js version

{
  "next": "^16.1.1",
  "react": "^19.2.3",
  "sharp": "^0.34.5"
}

AVIF images rendered with next/image show a green tint in production (AWS).

• Works fine in local development
• Issue happens only in production
• Only affects AVIF format
• Disabling image optimization (unoptimized or excluding AVIF from images.formats) fixes the issue
• sharp is already installed

What is the recommended solution for this?

When I tried to find resources explaining how next/image optimization works internally, I couldn’t find any clear or helpful documentation. Can someone please share a good resource or explanation?

Additional information

{
  "next": "^16.1.1",
  "react": "^19.2.3",
  "sharp": "^0.34.5"
}

Example

[mr-adonis-jimenez]

This green tint issue with AVIF images in production is a libvips color profile handling bug that affects specific sharp/libvips version combinations on certain platforms.

Root Cause

The issue stems from:

1. libvips color space conversion - When sharp (which uses libvips) converts AVIF images, it may incorrectly handle ICC color profiles
2. Platform-specific binaries - Your AWS production environment has different libvips binaries than your local machine
3. Missing or incompatible libheif - The AVIF decoder (libheif) version in production may not match the one locally

Solutions

Solution 1: Pin Sharp Version (Recommended)

Downgrade to a known-working sharp version:

{
  "dependencies": {
    "sharp": "0.33.5"
  },
  "overrides": {
    "sharp": "0.33.5"
  }
}

Then:

rm -rf node_modules package-lock.json
npm install

Solution 2: Force Rebuild Sharp in Production

Ensure sharp uses platform-specific binaries:

Option A - Using npm scripts:

{
  "scripts": {
    "build": "npm rebuild sharp && next build"
  }
}

Option B - In your Dockerfile (if using Docker):

FROM node:20-alpine

# Install libvips dependencies
RUN apk add --no-cache \
    libvips-dev \
    build-base \
    python3

WORKDIR /app
COPY package*.json ./
RUN npm ci
RUN npm rebuild sharp

COPY . .
RUN npm run build

Solution 3: Disable AVIF in next.config.js

Temporary workaround - use WebP instead:

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    formats: ['image/webp'], // Remove AVIF
  },
};

Solution 4: Force Specific Sharp Config

Create a custom image loader that handles color spaces explicitly:

// next.config.js
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
};

// imageLoader.js
export default function imageLoader({ src, width, quality }) {
  return `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
}

Solution 5: Update Environment Variables

Set these in your AWS deployment:

SHARP_IGNORE_GLOBAL_LIBVIPS=1
SHARP_FORCE_GLOBAL_LIBVIPS=0

This forces sharp to use its bundled libvips rather than system-installed versions.

Best Practice Fix

For AWS Lambda/Serverless:

{
  "dependencies": {
    "sharp": "0.33.5"
  },
  "devDependencies": {
    "@img/sharp-linux-x64": "0.33.5"
  }
}

For AWS EC2/ECS:
Add this to your build process:

npm install --platform=linux --arch=x64 sharp

Why This Happens

Next.js 16.1.1 updated its image optimization dependencies, which changed how sharp/libvips handles AVIF color spaces. The green tint specifically indicates YUV to RGB conversion issues where the chroma channels are misinterpreted.

Debugging Steps

1. Check sharp version in production:

node -e "console.log(require('sharp').versions)"

2. Compare local vs production:

# Local
node -e "console.log(process.platform, process.arch)"

# Should match your production environment

Related Issues

• Next.js Issue #58601
• Sharp Issue #3750

The Next.js team is aware of this and working on better cross-platform compatibility for image optimization.