How to enable WebP image format in Umbraco CMS

How to serve Umbraco images in WebP format?

It’s really simple with WebP plugin (https://imageprocessor.org/imageprocessor/plugins/webp/) - an awesome extension to the ImageProcessor package. It allows the processing of images with Google’s WebP format.

By the end of this short article, you will know what steps you need to take to enable WebP format on media files in Umbraco

What is the ImageProcessor package?

ImageProcessor is a lightweight library designed to make manipulation of images easier using .NET.

Those powerful libraries combined with ImageProcessor.Web extension - will do all the magic with images for your Umbraco CMS solution.

Why it rocks?

You can get pretty much everything you need regarding images manipulation (check all methods):

  • AutoRotate
  • BackgroundColor
  • Crop
  • Format (including WebP)
  • Quality
  • Resize

What’s really cool is that you can mess up with images, and easily switch back from WebP format to the original one (for example PNG, JPEG) - on the fly.

In this short tutorial, I’ll not cover all ImageProcessor features but I’ll focus just on how-to serve Umbraco cms media images in WebP format.

I encourage you to read the official documentation:

https://imageprocessor.org/imageprocessor/ - ImageProcessor overview

https://imageprocessor.org/imageprocessor/plugins/webp/ - WebP plugin overview

https://imageprocessor.org/imageprocessor-web/ - ImageProcessor.Web  extension overview

Why should I use the WebP format?

WebP is a web image format developed by Google in 2010 that can offer smaller image file sizes at a similar level of quality to existing image formats.

WebP is an alternative for good old PNG, JPEG (or JPG), GIF – in most cases it offers better compression.

WebP supports lossy and lossless (more aggressive) compression.

WebP lossless images are often at least 25% smaller in size compared to PNGs.

WebP lossy images are often anywhere from 25-34% smaller than comparable JPEG images at equivalent SSIM (structural similarity) quality index.

With WepP format, it’s possible to save on the size of the pictures and speed up the website!

According to Google experts, using WebP instead of JPEG can save more than 30% image file size without loss of image quality:

Check the JPEG vs WebP comparison here: https://developers.google.com/speed/webp/gallery1#sample_image_files_in_jpeg_and_webp_and_the_png_source

In conclusion - reducing image sizes by converting them to WebP is an option worth considering.

It can make a difference.

Which browsers support WebP format?

When you look at the official page for WebP, it looks like all relevant browsers now support it including:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Native web browser for Android
  • Pale Moon

Check the full list here: https://developers.google.com/speed/webp/faq#which_web_browsers_natively_support_webp

Another good place to check WebP major browser support is the caniuse.com website:

https://caniuse.com/#feat=webp

What does the Google Lighthouse tool say about WebP format?

Google Lighthouse is a great tool for measuring the quality of web pages.

It has many useful options and metrics and holds Google's standards.

It's worth checking to get better (basic) insight.

You can use it directly in Chrome - just open developer tools (hit F12 key) and go to "Lighthouse" section.

Webp Lighthouse Report Umbraco Cms Health Check

You can try to use this tool to check the health condition of images on the website.

Many times during my Umbraco health checks I get the error:

"Serve images in next-gen formats"

After optimizing the images on the website you should get a higher overall performance score in Google Lighthouse and more importantly:

  • Improved site speed
  • Better user experience
  • Higher google rank

Converting Images to WebP with ImageProcessor plugin

I am assuming that you have the ImageProcessor package installed already in the Umbraco CMS solution.

You should take the following steps:

#1. Add ImageProcessor.Plugins.WebP package

The first thing you want to do is install ImageProcessor.Plugins.WebP package.

Go to Tools\Nuget Package Manager and pick the Package manager console.

Then you just need to install one additional package with the command:

Install-Package ImageProcessor.Plugins.WebP

Once installed, open packages.config file and check if all the following packages are there:

<package id="ImageProcessor" version="2.8.0" targetFramework="net472" />
<package id="ImageProcessor.Plugins.WebP" version="1.3.0" targetFramework="net472" />

#2 Modify static content section in web.config

Then, open web.config file and enable .webp image support for a Umbraco CMS site running on IIS server.

<staticContent>
  <remove fileExtension=".webp" />
  <mimeMap fileExtension=".webp" mimeType="image/webp" />
</staticContent>

Testing the WebP image in Umbraco

How can I check if WebP format is working?

First, rebuild the Umbraco project with the new package.

Pick any existing media file URL and just copy-paste it into a browser in the original format.

Dummy example can look as follows:

https://piotrbach.com/media/unhos4bw/simple-image.png?width=500

Then, If you want to switch to a new format – just modify the original URL (PNG file in this case) and append query string parameter “format=webp”.

This will tell the ImageProcessor engine to serve the image in the new “WebP” format.

https://piotrbach.com/media/unhos4bw/simple-image.png?width=500&format=webp

When it’s working – you should be able to save the file locally as WebP format, using right-click on the image and picking the “Save image as” option in the browser.

Html code with WebP image can look as follows:

<img src="https://piotrbach.com/media/unhos4bw/simple-image.png?width=500&format=webp

" alt="WebP is working Brother! />

That's it - Happy Umbraco image manipulation 😀

Comments
Leave a Comment