Sharp: red color becomes darker after transform png to webp

[sophister]

I'm using sharp to transform images, such as from png to webp format.

some red text in the final webp image, is darker than how it is in the origin png image.

I can't find any config or arguments to fix this.

following is my code:

sharp( imageAbsolutePath )
        .webp({ quality : 100, alphaQuality : 100 })
        .toFile( webpAbsolutePath )
        .then( function( info ){
            info.webpPath = webpAbsolutePath;
            return info;
        });

This is the origin png image:

and this is the webp version:

[lovell]

Hello, did you see the webp lossless option, which is more suitable for this kind of image.

I believe a lossy WebP image at "100% quality" will still discard some chroma information, which is what I think is occurring here.

[sophister]

@lovell Thx.

lossless : true solves this.

[janwerkhoven]

Lossless indeed fixes the red colour issue, but using lossless: true also makes those images big!

My images are now 3MB instead of 189KB.

Causes red colour issue:

cwebp -q 90 -resize 2000 0 "$png_path" -o "$webp_path";

Causes big file issue:

cwebp -lossless -resize $size 0 "$png_path" -o "$webp_path";

How to compress + fix red colour issue?

[janwerkhoven]

Here's an example:

• Original PNG on the right
• WEBP on the left

Note how the blue colours are fine, but the red ones are way too dark...

[lovell]

There are a couple of other WebP options to experiment with for a given input, namely nearLossless and smartSubsample.

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

[janwerkhoven]

Thanks :)
Sharp looks interesting...
I'm currently converting 20,000+ files using Bash scripts, not using Node (yet) for this task.
Do you know the cwebp command equivalent of smartSubsample?
https://developers.google.com/speed/webp/docs/cwebp

[lovell]

cwebp -sharp_yuv is the equivalent of smartSubsample.

[janwerkhoven]

Thanks, I've tried -sharp_yuv but without avail...
This feature was added in v0.6.0 and I'm using cwebp v1.1.0.
Related:
https://bugs.chromium.org/p/webp/issues/detail?id=232
https://bugs.chromium.org/p/webp/issues/detail?id=340
I think I need to report this as a bug. I tried all cwebp options and combinations...

[janwerkhoven]

🎉

I've found the solution: normalise the colour profile before converting to WEBP.

convert "image.png" -profile "./sRGB_v4_ICC_preference.icc" "normalised.png"

cwebp "normalised.png" -o "image.webp"

Converting PNGs exported by Capture One to WEBP resulted in dark red WEBPs. PNGS exported by Sketch however, resulted in correctly coloured WEBPs. The difference is the colour profiles they use.

I used ImageMagick for converting the colour profile. Below is the ICC file that worked for me:

sRGB_v4_ICC_preference.icc.zip