If you’re looking for a way to improve the speed, quality, and compatibility of your website’s images, then WebP is a great option. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
Hugo has various image processing operations builtin such as resizing, downsizing, cropping, accessing Exif data, rotating, filters and encoding images in different formats (bmp, gif, jpeg, jpg, png, tif, tiff, or webp).
So we will use hugo’s image processing capabilities supercharges static sites ane make it look and feel like dynamic website for your user.
File: <theme_dir>/layouts/_default/_markup/render-image.html
{{- $image := resources.Get .Destination -}}
{{- if $image -}}
{{- $post_image_webp := partial "ImageConverter.html" (dict "ImageSrc" .Destination "WebpParam" (printf "%dx%d webp q100" $image.Width $image.Height)) -}}
{{- $post_image_jpg := partial "ImageConverter.html" (dict "ImageSrc" .Destination "WebpParam" (printf "%dx%d jpg q100" $image.Width $image.Height)) -}}
<picture>
<source srcset="{{ $post_image_webp }}" type="image/webp">
<source srcset="{{ $post_image_jpg }}" type="image/jpeg">
<img loading="lazy" class="img-fluid" src="{{ $post_image_jpg }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Text}} alt="{{ . }}" {{ else }} alt="{{ .Page.Title }}" {{ end }} {{ with .Title}} title="{{ . }}"{{ end }}>
</picture>
{{- else -}}
<img loading="lazy" class="img-fluid" src="{{ .Destination | safeURL }}" {{ with .Text}} alt="{{ . }}" {{ else }} alt="{{ .Page.Title }}" {{ end }} {{ with .Title}} title="{{ . }}"{{ end }} />
{{- end -}}
Above templates uses resources.Get to find matching images resource and generates an picture element which for both webp and jpg by calling partial ImageConverter.html. The source elements use the two generated variables and specify the MIME types and sizes. If resources.Get fails a fallback img element displays the original image with alternate text, and title attributes.
If the browsers is too old and does not support Webp format, then it will fallback and use jpg.
Hugo has various image processing operations builtin such as resizing, downsizing, cropping, accessing Exif data, rotating, filters and encoding images in different formats (bmp, gif, jpeg, jpg, png, tif, tiff, or webp).
File: <theme_dir>/layouts/partial/ImageConverter.html
{{/* Step 1: A default image as fallback */}}
{{ $image := "/images/placeholder.png" }}
{{/* Step 2: now check if passed image exists with same as title */}}
{{ $image_url := resources.Get .ImageSrc }}
{{ $img_param := .ImgParam }}
{{ if $image_url }}
{{/* Resize and convert the image */}}
{{ $image_url = $image_url.Resize $img_param }}
{{ $image = $image_url.RelPermalink }}
{{end}}
{{return $image}}
Above partial take 2 parameter ImageSrc and ImgParam. If a image matching resources.Get exists, the code resizes and converts it to webp format using the Resize method, and reassigns the resulting image URL to the $image variable. If no matching resource was found a fallback placeholder.png image is used. Finally, the partial returns the $image variable to the calling template
ImageConverter.html partial is fully reusable. It can convert different formats (bmp, gif, jpeg, jpg, png, tif, tiff, or webp)
Example to convert to png format you need to change ImgParam parameter to png
{{- $image_png := partial "ImageConverter.html" (dict "ImageSrc" .Destination "ImgParam" (printf "%dx%d png q100" $image.Width $image.Height)) -}}
Usage of the partial explained on this article Hugo: How to generate Webp images for your websites & blog
File: <theme_dir>/layouts/partial/ImageConverter.html
Result ➥
Now we have all the template and partial in place. Hugo will now generate Webp image whenever we included a image in the blog post or site.
Note: The image must be placed in /assets/images/background/background.png
It works!
With this simple automation you will save time, and concentrate on writing.
