I’ve noticed that webp format seems to suffer (the colours look washed out most noticeable with greys and white) when processed (Fit, Resize etc.) is this a known issue.
The image appears in multiple places at different sizes and I’d also like to create an src-set using Resize. Its not essential for this project as I can preprocess the images rather than use $image.Resize but it would be useful to know for future reference so any feedback/insight would be greatly appreciated.
Not completely convinced with webp yet.
Thanks
Preprocessed image at 1600x900 colours are crisp
Image processed with Hugo image a 3200x1600 image is resized to 1600x900 and quality is set to 100 with q100
bep
July 16, 2022, 10:06am
2
There’s a known issue when decoding webp images, but that does not fit into your description (I assume your source is not webp).
Maybe this issue?
opened 04:49AM - 04 Mar 21 UTC
Bug
While working on updating my site, I put together some test pages to make sure t… he content I was showing was rendering the way I expected it to. When doing so, I noticed that resized versions of images looked more muted than I expected, and so I pulled down several wide-gamut test images.
It turns out that Hugo discards the color profile when resizing images. This wouldn't be _all_ bad if the color profile was read, and out-of-gamut colors were clipped (essentially doing a color correct conversion to sRGB), however the color profile is _discarded_ which means that any non-sRGB image that gets resized will appear overly muted and faded when compared to the original in the same browser.
Here is an example of a test image getting resized by hugo. Because of the color shift, it means the color profile was discarded:
| Original | Resized (Incorrect) |
| --- | --- |
|  |  |
Here's what happens to a normal DCI-P3 image when it gets resized (Notice the fading)
| Original | Resized (Incorrect) |
| --- | --- |
|  |  |
I've done a little bit of digging, but I could not find any open issues on this for Hugo, nor for https://github.com/disintegration/gift which appears to be the image processing library that Hugo uses.
If you're building a site there are really only two ways to work around this right now:
1. Never use wide gamut images.
2. Never resize images you display.
However, these aren't ideal for anyone using Hugo for photography that wants to give the best possible experience for devices that support wide gamut content (Such as almost all Apple devices, and many modern cell phones). Many many templates have gallery or thumbnail views of images that would be affected by this. If it helps, I put together a set of wide-gamut test images a while ago along with a bunch of documentation if it helps reproducing this bug: https://github.com/codelogic/wide-gamut-tests
Thanks!
### What version of Hugo are you using (`hugo version`)?
<pre>
$ hugo version
hugo v0.81.0+extended linux/amd64 BuildDate=unknown
</pre>
### Does this issue reproduce with the latest release?
Yes
The source is a webp thats why I was slightly confused as all I was trying with image is a resize no change in format. I will look at the test page and dig into the docs more. Thank you
bep
July 16, 2022, 12:15pm
4
Yes, then that’s a known and unfortunate issue. We use a native Webp encoder (libwebp), but Go’s native decoder, which has this issue:
opened 10:31AM - 11 Aug 21 UTC
Bug
Upstream
Image Processing works well when the source image is a png or a jpg, but when it… 's a webp, blacks and whites appear toned down. At first I wondered if it was a problem similar to #8298, but that issue has to do with non-sRGB images, which is not the case here. My webp is sRGB (unless `cwebp` is fooling me) and the problem only appears with webp images.
### What version of Hugo are you using (`hugo version`)?
<pre>
hugo v0.87.0-B0C541E4+extended windows/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio
</pre>
### Example
Here's a sRGB webp image I want to process. You can clearly see the deep blacks in the trees and the bright clouds.
(How I created this image: I first exported it as a sRGB PNG in Adobe Lightroom then converted it with `cwebp`. The problem would have been the same if I directly exported the webp with, say, GIMP)
You can download the original [here](https://aureliendossantos.github.io/randonnees/7-villages-vallee-d-aspe/66.webp).
Here's the image processed by Hugo with `.Resize`. No matter the targeted format (webp, png, jpg) or the targeted size, it will always have these muted blacks and whites.
This is `66_hu491b7a84666ef3266e0bfb2f80fb050e_290232_1600x0_resize_q75_h2_linear_2.webp` (converted in png so I could upload it on GitHub)
I have done some pretty extensive testing on Hugo’s webp support and I would say that it works pretty goo, assuming
your source is not webp
and, if JPEG, you save it as sRGB (which I suspect is the default for most image editing software) and not some exotic color profile
2 Likes
Ah OK, thanks for the clarification. That’s interesting.
