HUGO

Images in assets (webp)

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)

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?

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.

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’”

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

[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

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>