3 easy steps to enable WebP image format in Umbraco CMS
Table of contents
It’s really simple with the WebP plugin (https://imageprocessor.org/imageprocessor/plugins/webp/) - an awesome extension to the ImageProcessor package. With the 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.
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
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.
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, and more.
To check whether a specific browser supports WebP format, I can recommend the following websites:
Since the ImageProcessor package should be already installed in the Umbraco CMS solution, you need to take just three following steps:
#1. Install 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 Enable format plugin in processing.config
Image Processor configuration is very flexible and allows you to turn all plugins on and off. Go to the \config\imageprocessor\processing.config file and find the <plugins> section. Make sure that the "Format" plugin is enabled:
<plugin name="Format" type="ImageProcessor.Web.Processors.Format, ImageProcessor.Web" enabled="true" />
#3 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>
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.
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! />
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 the "Lighthouse" section, and hit the "Generate report" button.
Once the report is ready, you will get the website's performance score and suggestions.
If you get the message below, there is room for potential image optimization.
"Serve images in next-gen formats"
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 ⚙️