Images in assets (webp)

support
1

Hello!

I’m trying to use .webp besides .jpg

{{ $base :=  print .Page.Section }}
{{ $path := .Get "src" }}
{{ $url := print $base "/" $path }}

{{ $image := resources.Get $url  }}
{{ $image_ext := path.Ext $image }}

 <picture>
      <source type="image/webp" srcset="{{ replace $image.Permalink $image_ext ".webp" }}">
      <source type="image/jpeg" srcset="{{ $image.Permalink }}">
      <img src="{{ $image.Permalink }}" alt="{{ .Get "title" }}" class="img-fluid {{ .Get "class" }}">     
 </picture>

I can get the .jpg link oka, but when I try to link the .webp that’s in my assets folder (right next to the .jpg) I get nothing. 404, image not found.

In the above example, if I delete the .webp call, I can see the .jpg

But the .webp is simply not working here.

Any ideas?

My images are under the

assets/featured/ directory (both, .jpg and .webp)

2

Hello Javier, I write to you directly because you seem to have a similar challenge or goal that I have. I hope you have already solved what you were trying to do. I spent quite a while finding the way to bulk conversion in bash from jpg to webp to figure out later that Safari does not support the latest format. I would like to have the two alternatives (*.jpg, *.webp) to let the browser choose.
My idea will be in the markdown of each post, theoretically something like this.
date = 2017-02-10
title = “BlaBla”
featured_image = “/images/01.webp”, “/images/01.jpg”

But I have tried some alternatives without success.
Do you or anyone in the community interested in the topic have any idea or how to achieve this?

3

You can put webp images in /static – but not in /assets. Images there have special meaning in Hugo: We can resize, add filters etc. But there is not native (encoder) support for webp in Go yet.

4

Thanks for your reply @bep I actually have the images in /static and everything went smoothly running the site locally. I mean I have already the images in two formats.
My problem was to realise that Safari does not support the webp extension. Therefore I was thinking of an alternative to have this formats form users of browsers that support the *.webp format, but also have the *.jpg backup for Safari users.
I don’t know if there is a way of via markdown of having two featured images to achieve an alternative image source when the html is generated.
Like

img src=“img01.webp” onerror=“this.src=‘img01.jpg’”

5

There is, but you kind of need to do a little templating. Search for render hooks in the documentation.

6

[quote=“bep, post:5, topic:21278”]
Search for render hooks in the documentation.
[/quote] I will. Thank you very much for your support and all the great work you do!

1 Like
7

Hello guys,

If your still interrested, I made a shortcode file: webp_img.html in the layout/shortcodes directory.
I hope this will help. It has been tested on the Chrome/Brave, Firefox, IE11, Edge and Safari.

Usage is like:
{{ partial “webp_img.html” (dict “class” “img-fluid w-100” “image” ($data.homepage.about.image | relURL) “alt” .Site.Params.company “loading” “lazy”) }}`

— file “webp_img.html” —
<!-- call as: “webp_img” class="…class-list…" image=“image.jpg” alt=“alt-text” -->
{{ $image := .Get “image”}}
{{ $type_arr := split $image “.” }}
{{ $srcbase := index $type_arr 0 }}

<picture class="{{ .Get "class" }}">
  {{ if (fileExists "{{$srcbase}}.webp") -}}
  <source srcset="{{$srcbase}}.webp" type="image/webp">
  {{- end }}
  {{ if (fileExists "{{$srcbase}}.jpg") -}}
  <source srcset="{{$image}}" type="image/jpg">
  {{- end }}
  <img src="{{$image}}" alt="{{.Get `alt` }}" defer>
</picture>
1 Like
8

Amazing, thank you very much! Just over a few weeks late! I just did THIS EXACT same snippet by myself a few weeks ago, forgot to share it (my bad).

Guys, if you are reading this, espirit90 got it right. This works flawless, though I have to use “if server” with mine because sometimes hugo tends not to read the webp images (for some reason). I have a node js converter I ran before deploying my site that makes every large image into an alternative .webp version (which ties nicely with this script, which I only use for large images)

9

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