From b91769ce5bc483355558ce8990b6c0fc4173aeeb Mon Sep 17 00:00:00 2001 From: Steven Date: Wed, 20 Nov 2024 23:16:03 -0500 Subject: [PATCH 1/3] fix(next/image): avif chroma subsampling --- packages/next/src/server/image-optimizer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/next/src/server/image-optimizer.ts b/packages/next/src/server/image-optimizer.ts index a7cb884dc5927..b71e51ac9c696 100644 --- a/packages/next/src/server/image-optimizer.ts +++ b/packages/next/src/server/image-optimizer.ts @@ -549,6 +549,7 @@ export async function optimizeImage({ const avifQuality = quality - 20 transformer.avif({ quality: Math.max(avifQuality, 1), + chromaSubsampling: '4:2:0', // same as webp }) } else if (contentType === WEBP) { transformer.webp({ quality }) From 9c4e5c6ca1c223abfcb73826b3653b2d23f7fc51 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 21 Nov 2024 15:25:49 -0500 Subject: [PATCH 2/3] bump quality back up --- packages/next/src/server/image-optimizer.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/next/src/server/image-optimizer.ts b/packages/next/src/server/image-optimizer.ts index b71e51ac9c696..920fe7d2ade9b 100644 --- a/packages/next/src/server/image-optimizer.ts +++ b/packages/next/src/server/image-optimizer.ts @@ -546,9 +546,8 @@ export async function optimizeImage({ } if (contentType === AVIF) { - const avifQuality = quality - 20 transformer.avif({ - quality: Math.max(avifQuality, 1), + quality: Math.max(quality - 15, 1), chromaSubsampling: '4:2:0', // same as webp }) } else if (contentType === WEBP) { From 8674ba7ea65ac7ebe30c9ff4596d84072e7df004 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 21 Nov 2024 16:00:00 -0500 Subject: [PATCH 3/3] lower effort to `3` --- packages/next/src/server/image-optimizer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/src/server/image-optimizer.ts b/packages/next/src/server/image-optimizer.ts index 920fe7d2ade9b..607bd9636b8dd 100644 --- a/packages/next/src/server/image-optimizer.ts +++ b/packages/next/src/server/image-optimizer.ts @@ -547,8 +547,8 @@ export async function optimizeImage({ if (contentType === AVIF) { transformer.avif({ - quality: Math.max(quality - 15, 1), - chromaSubsampling: '4:2:0', // same as webp + quality: Math.max(quality - 20, 1), + effort: 3, }) } else if (contentType === WEBP) { transformer.webp({ quality })