Hugo doesn't convert PNG to WebP

support
1

I’m currently trying to improve the loading speed of my Hugo website Grammle and just tried converting PNG images to WebP (because everyone always says WebP is much smaller than PNG).

I started with this “Get it on Codeberg” image. (The page is in German but you’ll recognise the image.)

I followed the documentation about the target format, and this is the code I use:

{{ with resources.Get "img/get-it-on-codeberg-neon-blue-with-bg.png" }}
  {{ with .Resize "400x webp" }}
    <a class="codeberg-banner-container" href="{{ site.Params.gitRepo }}">
      <img class="codeberg-banner" src="{{ .RelPermalink }}" alt="Get it on Codeberg">
    </a>
  {{ end }}
{{ end }}

You can view the Hugo directory at Codeberg/Grammle/Grammle and the output from running hugo at Codeberg/Grammle/pages.

The code above is from the codebergBanner.html short code, and the image is stored as get-it-on-codeberg-neon-blue-with-bg.png under assets/img.

However, Hugo does not convert the PNG image to WebP at all. Why is that and how can I fix it?

When replacing webp with jpg the image is in fact converted to JPG though, so the issue is not that the conversion wouldn’t work at all, it just doesn’t work for WebP.

Thank you!

2

I also tried with another image and it didn’t work either:

{{ with resources.Get "img/fogeye-250.png" }}
  {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
    <a class="fogeye-banner-container" href="{{ site.Params.licenceLink }}">
      <img class="fogeye-banner" src="{{ .RelPermalink }}" alt="For Good Eyes Only">
    </a>
  {{ end }}
{{ end }}

The code is from fogeye.html.

3
  • Do you see any error in the console?
  • Do you run with the extended version of Hugo? What’s the output of hugo version?
4

There are no errors, only a warning about some sloppy IsSet call:

$ hugo
Building sites … WARNING: calling IsSet with unsupported type "invalid" (<nil>) will always return false.

WARNING: calling IsSet with unsupported type "ptr" (*hugolib.pageState) will always return false.


                   | DE  
-------------------+-----
  Pages            | 40  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 62  
  Processed images |  2  
  Aliases          | 25  
  Sitemaps         |  0  
  Cleaned          |  0  

Total in 80 ms

Yes, apparently, I am in fact using the extended version:

$ hugo version
Hugo Static Site Generator v0.68.3/extended linux/amd64 BuildDate: 2020-03-25T06:15:45Z
5

Support for the WebP format was introduced in v0.83.0.

5 Likes
6

Oh, I didn’t realise I’m that far behind the latest release. :exploding_head:

However, I just ran sudo apt-get update and sudo apt-get upgrade but this didn’t update Hugo at all.

Running sudo apt-get install hugo returned: hugo is already the newest version (0.68.3-1), so I completely uninstalled and re-installed Hugo but I still only got v0.68.3 again.

That’s why I just re-installed hugo with snap install hugo which got me v0.96.0, and running snap run hugo did in fact convert the PNG to WebP!

Thanks for your help!

1 Like
7

Just an added tip, re: Hugo version. The latest release as of this post is v0.101.0.

Since you’re using sudo/snap … if you want the latest release you can download the appropriate .deb file from: Releases · gohugoio/hugo · GitHub

Then just do: sudo apt install ./hugo_extended_0.1xx.x_Linux-64bit.deb

To be informed if there’s a new release, you can “Watch” the Github repo and have GH email you for updates.

As you can see, even Ubuntu’s snap is late.

It’s a little bit of a hassle doing it manually but at least you’ll always be at the latest release. Another added benefit, you can choose which version you want to stick at, you don’t necessarily have to update. Also you won’t get surprised if something stopped working because the OS auto-updated to a version with a deprecated/changed function (rare but might happen).

4 Likes
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.