# Images in assets (webp)

**URL:** <https://discourse.gohugo.io/t/images-in-assets-webp/21278>\
**Category:** support\
**Created:** [October 15, 2019, 9:18am UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278 "2019-10-15T09:18:38Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Javier\_Cabrera](https://avatars.discourse-cdn.com/v4/letter/j/b9bd4f/32.png) [@Javier\_Cabrera](https://discourse.gohugo.io/u/Javier_Cabrera)\
**Post date:** [October 15, 2019, 9:18am UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/1 "2019-10-15T09:18:38Z")

</div>

Hello!

I’m trying to use .webp besides .jpg

```auto
{{ $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)

---

<div class="post-metadata">

**Author:** ![nnise](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nnise/32/8859_2.png) [@nnise](https://discourse.gohugo.io/u/nnise)\
**Post date:** [February 27, 2020, 4:15pm UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/2 "2020-02-27T16:15:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 27, 2020, 5:08pm UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/3 "2020-02-27T17:08:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nnise](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nnise/32/8859_2.png) [@nnise](https://discourse.gohugo.io/u/nnise)\
**Post date:** [February 27, 2020, 5:41pm UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/4 "2020-02-27T17:41:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 27, 2020, 5:53pm UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/5 "2020-02-27T17:53:47Z")

</div>

> [@nnise](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![nnise](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nnise/32/8859_2.png) [@nnise](https://discourse.gohugo.io/u/nnise)\
**Post date:** [February 28, 2020, 8:36am UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/6 "2020-02-28T08:36:56Z")

</div>

[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!

---

<div class="post-metadata">

**Author:** ![espirit90](https://avatars.discourse-cdn.com/v4/letter/e/9f8e36/32.png) [@espirit90](https://discourse.gohugo.io/u/espirit90)\
**Post date:** [July 30, 2020, 9:06pm UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/7 "2020-07-30T21:06:02Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![Javier\_Cabrera](https://avatars.discourse-cdn.com/v4/letter/j/b9bd4f/32.png) [@Javier\_Cabrera](https://discourse.gohugo.io/u/Javier_Cabrera)\
**Post date:** [August 13, 2020, 4:44am UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/8 "2020-08-13T04:44:46Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [August 15, 2020, 4:45am UTC](https://discourse.gohugo.io/t/images-in-assets-webp/21278/9 "2020-08-15T04:45:02Z")

</div>

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