# WebP Image Processing in Hugo

WebP offers superior image compression for the web. This article discusses implementing WebP in the Hugo framework.
<!--more-->

{{< admonition warning "Update April 2021" true >}}
As of this commit "[_33d5f8: Add Add webp image encoding support_](https://github.com/gohugoio/hugo/commits/33d5f805923eb50dfb309d024f6555c59a339846)", Hugo version 0.83.0 and later can use WebP image processing. Based on those commit, currently only used when encoding to Webp in ~extended version~ (no longer needed since [v0.153.0](https://github.com/gohugoio/hugo/releases/tag/v0.153.0)).
{{</ admonition >}}

## Why WebP?
There are several article mentioned that WebP provide a better quality and quantity for web image resources. According to the [Google Developers](https://developers.google.com/speed/webp), WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. Lighthouse also mentioned in the [web.dev](https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=unknown) that, WebP have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. For more details, you can read "_[WebP Compression Study](https://developers.google.com/speed/webp/docs/webp_study)_".

According to the [Caniuse](https://caniuse.com/?search=webp), currently more than 80% of browsers support the WebP image format. That would include Chrome, Firefox, Edge and Safari. Although not all browsers currently support the WebP image format, it's important to note that, if set up properly, your website's images won't appear broken for these browsers.

## WebP in Hugo
Based on the explanation above we can conclude that using WebP as default image resources is a good choice for Hugo. According to [ Hugo image processing documentation](https://gohugo.io/content-management/image-processing/#target-format), at this time only `jpg`, `png`, `tif`, `bmp`, and `gif` format images can be used in Hugo. But there is currently no WebP support for Hugo. This issue is being discussed at [#5924](https://github.com/gohugoio/hugo/issues/5924), [Erik](https://github.com/bep) mentioned that we need the implementation both decoder and encoder of WebP in GoLang dependency. The Go team itself already provides WebP package support but only the decoder without the encoder in [GoLang WebP Documentation](https://pkg.go.dev/golang.org/x/image/webp).

There is still way to force support WebP in Hugo. [Gregor Noczinski](https://github.com/blaubaer) invested something good about WebP implementation in Hugo via PR [#7155](https://github.com/gohugoio/hugo/pull/7155). He has added the webp encoding support and this change required to use [WebP binaries](https://developers.google.com/speed/webp/download) to be installed in your system. But this changed was rejected by [Erik](https://github.com/bep) because of no GoLang native WebP implementation available instead of using pre-built binaries or C-bindigs to acces the library.

If you wanted to use WebP encoding in Hugo, you can try to [build Hugo from source](https://gohugo.io/getting-started/installing/#source) with picking this PR [#7155](https://github.com/gohugoio/hugo/pull/7155) in your git-tree or download my pre-built binaries in the attachment below. You can use all the commands on the WebP image if you have WebP binaries installed on your system. For example, resizes all WebP images into a specific size:

```Code
{{ $imageResource := .Page.Resources.GetMatch "*.webp" }}
{{ $resized := $imageResource.Resize "300px" }}
{{ $resized.RelPermalink }}
```

{{< admonition warning "Update March 2021" true >}}
in Hugo 0.82 and later, [`media.Types`](https://github.com/gohugoio/hugo/commit/ba1d0051b44fdd242b20899e195e37ab26501516) format has been modified which causes conflicts with [#7155](https://github.com/gohugoio/hugo/pull/7155). If you are having problem fixing the conflict, you can _cherry-pick_ [my fixes](https://github.com/khusika/hugo/commit/8a70de266c3be92bf0ef07f674ca60e4895e352f) instead.
{{</ admonition >}}

{{< admonition info "Pre-built Hugo Binaries" false >}}
~:(far fa-file-archive fa-fw): hugo.bin - _linux/amd64 extended version_~ removed
{{</ admonition >}}