# Fallback for browsers that don't support webp

**URL:** <https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661>\
**Category:** support\
**Created:** [March 14, 2022, 7:59pm UTC](https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661 "2022-03-14T19:59:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon44707125](https://avatars.discourse-cdn.com/v4/letter/a/e68b1a/32.png) [@anon44707125](https://discourse.gohugo.io/u/anon44707125)\
**Post date:** [March 14, 2022, 7:59pm UTC](https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661/1 "2022-03-14T19:59:10Z")

</div>

I am using the `render-image.html` with the markup below. How to modify the code to support `webp` while providing a fallback to `jpeg/jpg` for old browsers/those that don’t support web?

```auto
{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ $small := $image.Resize "480x" }}
{{ $medium := $image.Resize "768x" }}
{{ $big := $image.Resize "992x" }}
{{ $alt := .PlainText | safeHTML }}
{{ $caption := "" }}
{{ with .Title }}
  {{ $caption = . | safeHTML }}
{{ end }}

<figure>
  <a href="{{ $image.RelPermalink }}">
    <img
      sizes="100vw"
      srcset="{{ $small.RelPermalink }} 480w, {{ $medium.RelPermalink }} 768w, {{ $big.RelPermalink }} 992w"
      src="{{ $image.RelPermalink }}"
      width="{{ $image.Width }}"
      height="{{ $image.Height }}"
      alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
      >
  </a>
  {{ with $caption }}
    <figcaption>{{ . | markdownify }}</figcaption>
  {{ end }}
</figure>

```

---

<div class="post-metadata">

**Author:** ![cshoredaniel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cshoredaniel/32/19684_2.png) [@cshoredaniel](https://discourse.gohugo.io/u/cshoredaniel)\
**Post date:** [March 14, 2022, 11:22pm UTC](https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661/2 "2022-03-14T23:22:31Z")

</div>

FWIW when I do this I use the \<picture\> element in a layout/shortcode/render-hook. How to use the \<picture\> element is more of an HTML question rather than a Hugo question IMO.

---

<div class="post-metadata">

**Author:** ![anon44707125](https://avatars.discourse-cdn.com/v4/letter/a/e68b1a/32.png) [@anon44707125](https://discourse.gohugo.io/u/anon44707125)\
**Post date:** [March 15, 2022, 8:58am UTC](https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661/3 "2022-03-15T08:58:54Z")

</div>

This option [I found](https://discourse.gohugo.io/t/simple-image-render-hook-template-for-responsive-images/22464) in this forum uses the standard markdown image `![image](link here "extra title")`. So I would prefer to keep it that way.

It seems though this code generates a jpg file at the end of the source.

---

<div class="post-metadata">

**Author:** ![pitifi9191](https://avatars.discourse-cdn.com/v4/letter/p/3ab097/32.png) [@pitifi9191](https://discourse.gohugo.io/u/pitifi9191)\
**Post date:** [March 15, 2022, 1:47pm UTC](https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661/4 "2022-03-15T13:47:17Z")

</div>

hi @anon44707125

try using the webp fallback like this instead

```auto
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg">
</picture>

```

webp conversion is really easy in Hugo [Image Processing | Hugo](https://gohugo.io/content-management/image-processing/#jpeg-and-webp-quality)

all you have to do for webp conversion is to add webp in your shared example;

```auto
# your example
{{ $medium := $image.Resize "768x" }}
# modification for webp
{{ $mediumwebp := $image.Resize "768x webp" }}

```

and then simply use that with `.RelPermalink`

```auto
<picture>
    <source srcset="{{ $mediumwebp.RelPermalink }}" type="image/webp">
    <source srcset="{{ $medium.RelPermalink }}" type="image/jpeg">
    <img src="{{ $medium.RelPermalink }}">
</picture>

```

this part is the easiest to learn in Hugo with very clear documentation, hope it was helpful

thanks

---

<div class="post-metadata">

**Author:** ![anon44707125](https://avatars.discourse-cdn.com/v4/letter/a/e68b1a/32.png) [@anon44707125](https://discourse.gohugo.io/u/anon44707125)\
**Post date:** [March 15, 2022, 7:47pm UTC](https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661/5 "2022-03-15T19:47:09Z")

</div>

That works! I just added the media tag for responsive 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:** [March 17, 2022, 7:47pm UTC](https://discourse.gohugo.io/t/fallback-for-browsers-that-dont-support-webp/37661/6 "2022-03-17T19:47:10Z")

</div>

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