How to enable WebP image format in Umbraco CMS
Table of contents
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.
With WebP package and simple setup, it's possible to expose Umbraco's images in Google’s WebP format.
By the end of this article, you will know what exact steps you need to take to enable WebP format on media files in Umbraco CMS.
Let's jump in.
What is the ImageProcessor package?
ImageProcessor is a lightweight .NET library designed to make manipulation of images easier.
ImageProcessor combined with ImageProcessor.Web extension will do all the magic with images for your Umbraco solution.
Why it rocks?
ImageProcessingModule supports almost 30 popular image operations and is very well documented.
What’s really cool is that you can mess up with images, simply by applying the appropriate query string parameters in the URL. This gives a lot of flexibility.
By using the Format function, it's possible to easily switch between file formats like PNG, JPEG, WebP etc.
We'll come back to it later in this article.
Before you start working with ImageProcessor packages and extensions, 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 and it offers better compression (in most cases).
According to Google experts, using WebP instead of JPEG can save more than 30% image file size without losing quality.
Check the JPEG vs WebP comparison on google developers site:
WebP supports two types of compression: lossy (more aggressive) and lossless.
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.
Which browsers support WebP format?
When you look at the official page for WebP, it looks like all relevant browsers now support it, including:
To check whether a specific browser supports WebP format, I can recommend the following websites:
Converting Images to WebP with ImageProcessor plugin
Since the ImageProcessor package should be already installed in the Umbraco CMS solution, you need to take just two following steps:
#1. Add ImageProcessor's WebP plugin
Start with installing 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:
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?
You can simply use a browser window, pick any existing media to convert and just copy-paste it's URL.
Before doing this, make sure you rebuild the project with the new package.
Now, let's modify the original URL (PNG file in this case) and append the additional query string parameter “format=webp”.
The target URL should look as follows:
If ImageProcessor is well configured – you should be able to save the file locally as WebP format by right-clicking on the image and picking the “Save image as” option.
Embedding webP image in html
To put WebP image inside Html, simply use the similar code:
<img src="https://piotrbach.com/media/unhos4bw/simple-image.png?format=webp" alt="WebP is working Brother! />
What does Google Lighthouse say about WebP format?
Google Lighthouse is a great tool for measuring the quality of web pages and it's simple to use.
It provides many useful metrics and holds Google's standards.
The tool is worth checking to get basic insights into overall website performance.
To start working with Google Lighthouse, you don't need to install anything.
Just open developer tools in Chrome (hit F12 key), go to "Lighthouse" section, and hit the "Generate report" button.
Once the report is ready, you can find some useful pieces of information regarding images health condition.
A common diagnostic message is:
"Serve images in next-gen formats"
This means there is room for potential image optimization.
Before switching to the webP format, it is worth conducting an initial audit, thanks to which we will find out whether the target image optimization made sense.
In conclusion, reducing image sizes by converting them to WebP is an option worth considering.
It may turn out that the website will run much faster with less resource consumption.
If you are dealing with a large portal, the difference in maintenance costs 💰 can be significant.
In the end, good luck to you, and happy Umbraco image optimization ⚙️