Table of contents
Unlocking Faster Website Speeds with Google's WebP Format in Umbraco CMS
Did you know that Google's WebP format can significantly reduce Umbraco image sizes without compromising quality?
With the WebP plugin, optimizing your Umbraco website's performance has never been easier.
ImageProcessor is a powerful .NET library tailored for easy image manipulation.
Coupled with the ImageProcessor.Web extension offers extensive functionality to enhance your Umbraco's image-handling capabilities.
Features and Benefits
- Versatility: ImageProcessor supports nearly 30 popular image operations.
- Flexibility: Alter images on the fly using simple URL query string parameters.
- Format Conversion: Seamlessly switch between PNG, JPEG, WebP, and more using the Format function.
Why Choose WebP?
Developed by Google in 2010, WebP is a revolutionary image format that offers:
- Size Reduction: Achieve more than 30% size reduction compared to JPEG without quality loss.
- Compression Options: Choose between lossy and lossless compression based on your needs.
- Browser Support: Supported by major browsers, including Chrome, Edge, Firefox, and more.
Check Browser Support:
Enabling WebP in Umbraco: A 3-Step Guide
1. Install ImageProcessor's WebP Plugin
Begin by installing the ImageProcessor.Plugins.WebP package via the NuGet Package Manager Console using 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. Activate Format Plugin
In the config\imageprocessor\processing.config file, ensure the “Format” plugin is enabled.
<plugin name="Format" type="ImageProcessor.Web.Processors.Format, ImageProcessor.Web" enabled="true" />
3. Update Static Content in web.config
Add support for .webp images on an IIS server by modifying the web.config file.
<staticContent> <remove fileExtension=".webp" /> <mimeMap fileExtension=".webp" mimeType="image/webp" /> </staticContent>
Embedding WebP Images in Your Content
To display a WebP image in HTML, just add “format=webp” query parameter as below:
<img src=”https://umbracare.net/media/fkypfo1d/product-udmf-learn.png?format=webp” alt=”WebP is working perfectly!” />
Auditing with Google Lighthouse
Before transitioning to WebP, it's crucial to understand the benefits it brings to your site's performance.
Google Lighthouse is the most straightforward way to check this.
It offers comprehensive audits for performance, accessibility, and more to ensure your changes positively impact website speed and user experience.
How to Use Google Lighthouse in the Browser
- Open Chrome Browser: Ensure you're using the latest version of Google Chrome.
- Open Developer Tools: Right-click on any page element and select 'Inspect' or simply press Ctrl+Shift+I (or Cmd+Option+I on Mac).
- Navigate to the 'Lighthouse' Tab: If you don't see it, you might find it under the '>>' icon.
- Run the Audit: Click the 'Generate report' button. Make sure to select the appropriate audit categories (e.g., Performance, Accessibility).
- Review the Report: Once the audit is completed, Lighthouse will give you a detailed report on the page's performance and other metrics. Check how WebP implementation impacts your scores, especially in the Performance section.
By using Google Lighthouse, you can ensure that the switch to WebP doesn't just reduce image size but also genuinely enhances your website's overall speed and user experience.
Watch Step-by-Step Tutorial on YouTube
Are you more of a visual learner?
Check out our step-by-step YouTube tutorial on serving WebP images with Umbraco CMS.
This hands-on video guide walks you through every detail.
How to Serve WebP Images instead of JPG or PNG with Umbraco CMS
📽️ Video URL: https://www.youtube.com/embed/u_ec8gEF9eY
Switching to WebP in Umbraco CMS is a valuable enhancement for any website.
With noticeable reductions in image size and no compromise on quality, it’s an easy way to enhance site speed and performance.
Considering this for a larger portal can notably cut down on resource consumption and potentially reduce maintenance costs.
If you found this guide beneficial, don't forget to share it with your peers.