3 easy steps to enable WebP image format in Umbraco CMS
How to serve Umbraco images in WebP format?
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.
What is the ImageProcessor package?
ImageProcessoris 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 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:
Setup and Configuration (3 steps)
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 ToolsNuget Package Manager and pick the Package manager console.
Then you just need to install one additional package with the command:
Install-Package ImageProcessor.Plugins.WebPOnce 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 configimageprocessorprocessing.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>Testing the WebP image in Umbraco
How can I check if the WebP format is working?
You can simply use a browser window, pick any existing media to convert and just copy-paste its URL.
Before doing this, make sure you rebuild the project with the new package.
As a dummy example lets assume the following URL:
https://umbracare.net/media/fkypfo1d/product-udmf-learn.png
Now, let’s modify the original URL (PNG file in this case) and append the additional query string parameter “format=webp”.
This will tell the ImageProcessor engine to serve the image in the new “WebP” format instead of “PNG”.
The target URL should look as follows:
https://umbracare.net/media/fkypfo1d/product-udmf-learn.png?format=webp
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://umbracare.net/media/fkypfo1d/product-udmf-learn.png?format=webp” alt=”WebP is working Brother! />
What does Google Lighthouse say about WebP format?
Tip! Before switching to the WebP format, it is worth conducting an initial audit, to find out whether the target image optimization made sense.
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”
Alert! Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.
Final Thoughts
In conclusion, reducing image sizes by converting them to WebP is an option worth considering. It’s an easy process that can be done in just a few steps. 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.
Comment below if you have any questions, and be sure to share this article. Thanks for reading 📖 and happy Umbraco image optimization! ⚙️