Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add image processing support for WebP image resources #5924

Closed
Elinvention opened this issue May 2, 2019 · 33 comments · Fixed by mainians/hugo#1 or #8397
Closed

Add image processing support for WebP image resources #5924

Elinvention opened this issue May 2, 2019 · 33 comments · Fixed by mainians/hugo#1 or #8397
Milestone

Comments

@Elinvention
Copy link

@Elinvention Elinvention commented May 2, 2019

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
Copy link
Member

@bep bep commented May 2, 2019

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

@bep bep added this to the v0.56 milestone May 2, 2019
@bep bep changed the title Image processing not working on WebP image resources Add image processing support for WebP image resources May 2, 2019
@bep
Copy link
Member

@bep bep commented May 12, 2019

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.

@bep bep removed this from the v0.56 milestone Jun 14, 2019
@bep bep added this to the v0.57 milestone Jun 14, 2019
@bep bep removed this from the v0.56 milestone Jun 14, 2019
@bep bep added this to the v0.57 milestone Jun 14, 2019
@bep bep removed this from the v0.57 milestone Jul 31, 2019
@bep bep added this to the v0.58 milestone Jul 31, 2019
@bep bep removed this from the v0.58 milestone Aug 13, 2019
@bep bep added this to the v0.59 milestone Aug 13, 2019
@bep bep removed this from the v0.59 milestone Sep 6, 2019
@bep bep added this to the v0.60 milestone Sep 6, 2019
@bep bep removed this from the v0.60 milestone Oct 21, 2019
@bep bep added this to the v0.61 milestone Oct 21, 2019
@bep bep removed this from the v0.61 milestone Nov 25, 2019
@bep bep added this to the v0.62 milestone Nov 25, 2019
@bep bep removed this from the v0.62 milestone Nov 28, 2019
@bep bep added this to the v0.63 milestone Nov 28, 2019
@bep bep removed this from the v0.63 milestone Dec 11, 2019
@bep bep added this to the v0.64 milestone Dec 11, 2019
@geoffreybauduin
Copy link

@geoffreybauduin geoffreybauduin commented Jan 21, 2020

@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
Copy link
Member

@bep bep commented Jan 21, 2020

@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
Copy link

@geoffreybauduin geoffreybauduin commented Jan 21, 2020

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

@bep bep removed this from the v0.64 milestone Jan 22, 2020
@bep bep added this to the v0.65 milestone Jan 22, 2020
@bep bep removed this from the v0.65 milestone Jan 30, 2020
@bep bep added this to the v0.66 milestone Jan 30, 2020
@moorereason
Copy link
Contributor

@moorereason moorereason commented Jan 4, 2021

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

@idarek
Copy link

@idarek idarek commented Mar 4, 2021

@moorereason
Copy link
Contributor

@moorereason moorereason commented Mar 4, 2021

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

@blaubaer
Copy link

@blaubaer blaubaer commented Mar 5, 2021

@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
Copy link

@idarek idarek commented Mar 30, 2021

@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
Copy link

@pawelurbanski pawelurbanski commented Mar 30, 2021

@jmooring
Copy link
Member

@jmooring jmooring commented Apr 1, 2021

@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
Copy link

@tristan957 tristan957 commented Apr 1, 2021

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

@andreseduardop
Copy link

@andreseduardop andreseduardop commented Apr 1, 2021

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.

@bep bep removed this from the v0.78 milestone Apr 8, 2021
@bep bep added this to the v0.83 milestone Apr 8, 2021
bep added a commit to bep/hugo that referenced this issue Apr 8, 2021
bep added a commit to bep/hugo that referenced this issue Apr 9, 2021
bep added a commit to bep/hugo that referenced this issue Apr 10, 2021
bep added a commit to bep/hugo that referenced this issue Apr 11, 2021
bep added a commit to bep/hugo that referenced this issue Apr 11, 2021
bep added a commit to bep/hugo that referenced this issue Apr 12, 2021
bep added a commit to bep/hugo that referenced this issue Apr 12, 2021
bep added a commit to bep/hugo that referenced this issue Apr 12, 2021
bep added a commit to bep/hugo that referenced this issue Apr 14, 2021
bep added a commit to bep/hugo that referenced this issue Apr 14, 2021
bep added a commit to bep/hugo that referenced this issue Apr 15, 2021
@MartinHotmann
Copy link

@MartinHotmann MartinHotmann commented Apr 23, 2021

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

@gohugoio gohugoio locked as resolved and limited conversation to collaborators Apr 23, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.