WebP contrast issues

[nicokaiser]

Due to a bug in the WebP library used in Hugo (as of version 0.139) black and white levels in WebP images are not handled correctly, which makes the images look more dull/muted.

There seems to be no workaround other than either the bug to be fixed or Hugo moving to another WebP library, so my recommendation is not to use WebP images in Hugo.

• Hugo Discourse discussion
• Hugo: Muted black and white levels when resizing WebP images gohugoio/hugo#8879
• Go: x/image/webp: WebP decode contrast issue golang/go#40173

[nicokaiser]

A (very dirty) workaround, if you really need to use WebP images:

--- a/layouts/partials/gallery.html
+++ b/layouts/partials/gallery.html
@@ -25,6 +25,7 @@
         "Date" $date
         "image" $image
         "Params" $image.Params
+        "MediaType" $image.MediaType
         )
       }}
     {{ end }}
@@ -32,6 +33,12 @@
       {{ $image := .image }}
       {{ $thumbnail := $image.Filter (slice images.AutoOrient (images.Process "fit 600x600")) }}
       {{ $full := $image.Filter (slice images.AutoOrient (images.Process "fit 1600x1600")) }}
+      {{ /* Workaround for WebP contrast issues: https://github.com/nicokaiser/hugo-theme-gallery/issues/102 */}}
+      {{ if eq $image.MediaType.SubType "webp" }}
+        {{ $thumbnail = $image.Filter (slice images.AutoOrient (images.Process "fit 600x600") (images.Contrast +13)) }}
+        {{ $full = $image.Filter (slice images.AutoOrient (images.Process "fit 1600x1600") (images.Contrast +13)) }}
+      {{ end }}
       {{ $color := index $thumbnail.Colors 0 | default "transparent" }}
       <a class="gallery-item" href="{{ $image.RelPermalink }}" data-pswp-src="{{ $full.RelPermalink }}" data-pswp-width="{{ $full.Width }}" data-pswp-height="{{ $full.Height }}" data-pswp-target="{{ $image.Name | urlize }}" title="{{ .Title }}" itemscope itemtype="https://schema.org/ImageObject" style="aspect-ratio: {{ $thumbnail.Width }} / {{ $thumbnail.Height }}">
         <figure style="background-color: {{ $color }}; aspect-ratio: {{ $thumbnail.Width }} / {{ $thumbnail.Height }}">

This adds 13% contrast to WebP image (which is roughly the level difference between limited an full color range. Note that this might not work for all WebP images and may result in wrong colors.
Therefore I will not include this into the main branch.