Skip to content

Commit

Permalink
fix(next/image): reduce avif sharp effort from 4 to 3 for faster enco…
Browse files Browse the repository at this point in the history
…ding (#73030)

## History
In a previous PR #65846 the chroma
subsampling setting was removed for AVIF images. This caused the default
of `4:4:4` to be used which increased the image size and CPU a lot.

I considered switching back to `4:2:0` but found that reducing the
`effort: 3` actually yielded significantly better performance with only
a slight difference in size.

## Benchmark

For example, take this PNG that has a width of 1805.

```
curl -JO https://images.bookroo.com/site/landing/homepage/book-collection.png
```

Using `w=1850` and `q=75`:
```
Current: 2_778ms and 153_364 bytes
 Chroma: 2_214ms and 132_927 bytes
This PR: 1_265ms and 158_862 bytes
```

Using `w=1500` and `q=75`:
```
Current: 625ms and 95_810 bytes
 Chroma: 524ms and 89_500 bytes
This PR: 185ms and 99_127 bytes
```

Using `w=1200` and `q=75`:
```
Current: 506ms and 74_738 bytes
 Chroma: 407ms and 68_998 bytes
This PR: 144ms and 77_955 bytes
```

For this particular image, the size will increase a bit but there are
other images I tested where the size was actually smaller. So its a big
improve in CPU usage compared to reverting to the chroma subsampling
setting.

We also are keeping AVIF smaller than WebP which is the expected
behavior.

## Learn More
[Chroma subsampling](https://en.wikipedia.org/wiki/Chroma_subsampling)
is the practice of encoding images by implementing less resolution for
[chroma](https://en.wikipedia.org/wiki/Chrominance)
[information](https://en.wikipedia.org/wiki/Information) than for
[luma](https://en.wikipedia.org/wiki/Luma_(video)) information, taking
advantage of the human visual system's lower acuity for color
differences than for luminance

Image compression deep-dive video:
https://www.youtube.com/watch?v=F1kYBnY6mwg

Sharp Options: https://sharp.pixelplumbing.com/api-output#avif
  • Loading branch information
styfle authored Nov 22, 2024
1 parent d07422f commit d27182c
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/next/src/server/image-optimizer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -546,9 +546,9 @@ export async function optimizeImage({
}

if (contentType === AVIF) {
const avifQuality = quality - 20
transformer.avif({
quality: Math.max(avifQuality, 1),
quality: Math.max(quality - 20, 1),
effort: 3,
})
} else if (contentType === WEBP) {
transformer.webp({ quality })
Expand Down

0 comments on commit d27182c

Please sign in to comment.