Enhancement: control AVIF subsampling to reduce blockiness on high contrast edges

[thomkrupa]

Are you using the latest version? Is the version currently in use as reported by npm ls sharp the same as the latest version as reported by npm view sharp dist-tags.latest?

Yes, I'm using sharp@0.27.1

What are the steps to reproduce?

1. Download image:
   

2. Convert to AVIF

What is the expected behaviour?

AVIF created by sharp has very bad quality compared to AVIF created by avif.io - I'm not sure what they use under the hood, but the output is much much better.

Are you able to provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem?

sharp("photo.png")
  .avif({
    quality: 100,
    lossless: false,
  })
  .toFile("photo.avif", (err, info) => {});

Are you able to provide a sample image that helps explain the problem?

The big difference is in hair.

What is the output of running npx envinfo --binaries --system?

  System:
    OS: macOS 11.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 336.93 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 10.23.2 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm

[lovell]

Have you tried altering the speed and chromaSubsampling options? The former might equate to "effort" and the latter can reduce the blockiness, especially of high contrast edges such as this.

https://sharp.pixelplumbing.com/api-output#avif

[thomkrupa]

I tested the different speed and chromaSubsampling options, here are the results:

Avif.io version still seems to be the best, I'm not able to get anything close to it

[lovell]

Thanks, I can confirm this relates to chromaSubsampling.

options.chromaSubsampling string set to '4:4:4' to prevent chroma subsampling otherwise defaults to '4:2:0' chroma subsampling, requires libvips v8.11.0 (optional, default '4:2:0')
https://sharp.pixelplumbing.com/api-output#avif

This new setting will only be available in sharp when using it with the forthcoming libvips v8.11.0 (the latest prebuilt binaries contain libvips v8.10.5) - see libvips/libvips#1961

The avif.io site doesn't offer control over subsampling and would appear to always use 4:4:4. Given it works in the browser, my best guess would be that it's using something like rav1e compiled to WASM under the hood.

[tomByrer]

options.chromaSubsampling string set to '4:4:4'

Thanks! Yes looks like that's what squoosh does also.
Still no v8.11.0 release yet, so I guess I'll have to build.

[lovell]

v0.29.0 now available, defaulting to 4:4:4 for AVIF.