Add image processing support for WebP image resources

[Elinvention]

I tried this code

{{ $imageResource := .Page.Resources.GetMatch "**/*.webp" }}
{{ $resized := $imageResource.Resize "180x" }}
{{ $resized.RelPermalink }}

but I get an error:

<$imageResource.Resize>: can't evaluate field Resize in type resource.Resource

The .ResourceType is correctly identified as image. If I replace that with a jpg version it works.

[bep]

webp is currently not supported. I guess that is probably not crystal clear in the documentation, and we should eventually support it.

[bep]

disintegration/imaging#25

So, currently I think the best we could do is to encode it to "something differeng", e.g. JPEG, but we should probably have some syntax for that.

[geoffreybauduin]

@bep do you plan to implement the conversion and webp manipulation? if not, could we agree on specs so I can suggest an implementation?

My guess would be to implement a Convert function on the resource where you can send a configuration string indicating how to convert. Assuming we'd go for https://github.com/chai2010/webp, we could have the following markup:

{{ $webp := (resources.Get "image.jpg").Convert "webp" "lossless=true" }}

Code-wise, we'd have to parse the second argument to match parameters for the library used, but this would allow using it for other conversions in the future.

[bep]

@geoffreybauduin one the API side this is mostly about adding another MIME type / image format. But that just scratches the surface of this. The main problem here is that there is no native Go webp encoder.

[geoffreybauduin]

Is having a native webp encoder a must-have for you or would you be fine with a C library?

[blaubaer]

I can just recall that there was a solution available and it is still available #7155

[moorereason]

@blaubaer, your PR exec's cwebp for writing. That's not native Go.

[idarek]

How about something like
https://github.com/chai2010/webp
and
https://github.com/nickalie/go-webpbin
?

[moorereason]

@idarek, both of those projects bind to a C library. That's not native Go.

[blaubaer]

@moorereason There is currently not planned any native implementation of WebP in Golang (for encoding). Therefore there are only 2 ways to support that: Either calling a binary OR embedding C-Code directly into the library.

For sure we can wait until someone is doing it (the porting - you're free to code) and do not implement such important stuff into Hugo (which seems to be important for SEO ratings too - if it is important for Lighthouse we can assume it is important for Google, too) OR implement one of the 2 options named above.

For now I solved me issue (although it is not great) with a image proxy that is doing transparent WebP encoding for me. Sad to use such stuff.

[idarek]

@blaubaer may hit a point. If you look google page they also referring to use cwebp to convert images. Because of that I don't believe creating native Go converter will happen in a future.

@pawelgrzybek recently posted his method of implementing WebP and AVIF into Hugo using rendering hooks. The encoding is done prior to Hugo build and is not using image.resize aspect, however the output and performance (from PageSpeed Insight view) is impressive.

[pawelurbanski]

I started doing the same. What would be useful though, is being able to get a list of images with a match and obtain their metadata such as width/height for sorting or addint the attributes in the srcset and so on. A quick glance a the native Go image library hints that reading such values for webp is possible.

[jmooring]

@pawelurbanski: you can obtain the width and height of a webp image using the imageConfig function.

For a page resource:

{{ $resource := .Resources.GetMatch "a.webp" }}
{{ $path := path.Join "content" $resource.RelPermalink }}
{{ $imgAttributes := imageConfig $path }}
Width: {{ $imgAttributes.Width }}
Height: {{ $imgAttributes.Height }}

For a global resource:

{{ $resource := resources.Get "a.webp" }}
{{ $path := path.Join "assets" $resource.RelPermalink }}
...

If using a global resource, it must be in the assets directory. It cannot be in a directory that is mounted to assets.

[tristan957]

I don't think that would work if you fingerprint your images. Could be wrong though

[andreseduardop]

For a page resource:

{{ $resource := .Resources.GetMatch "a.webp" }}
{{ $path := path.Join "content" $resource.RelPermalink }}
{{ $imgAttributes := imageConfig $path }}
Width: {{ $imgAttributes.Width }}
Height: {{ $imgAttributes.Height }}

Thanks, @jmooring
👍
It is the only way that has worked for me to generate the necessary information (width / height) inside the <img> tag -when the image is WebP-
.Resources.GetMatch does not return a value for WebP images.

[the-hotmann]

Dont want to sound rude but you guys dont also think its fucking dissapointing that the legendary Imageformat (WEBP) which is developed by Google is not usable in Googles own programming language? While WEBP was found back in 2010 ..

I think its a shame. Not on Hugo, but on goLang in general