UmbraCare LOGO

How to Use WebP Image Format in Umbraco for Better Performance

Discover the benefits of WebP image format and learn how to quickly enable it in Umbraco CMS v8 with our step-by-step guide. Boost your website's speed and SEO with this format.

Published on: , by:
Piotr Bach
Piotr Bach
Wojciech Tengler
Wojciech Tengler
Umbraco

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. 

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

Understanding ImageProcessor

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:

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" />
ImageProcessor’s packages in NuGet manager installed in Umbraco 8 project

ImageProcessor’s packages in NuGet manager installed in Umbraco 8 project

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.

Measuring website optimization with Google Lighthouse

Measuring website optimization with Google Lighthouse

How to Use Google Lighthouse in the Browser

  1. Open Chrome Browser: Ensure you're using the latest version of Google Chrome.
  2. Open Developer Tools: Right-click on any page element and select 'Inspect' or simply press Ctrl+Shift+I (or Cmd+Option+I on Mac).
  3. Navigate to the 'Lighthouse' Tab: If you don't see it, you might find it under the '>>' icon.
  4. Run the Audit: Click the 'Generate report' button. Make sure to select the appropriate audit categories (e.g., Performance, Accessibility).
  5. 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

Final words

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.

For more such insights, explore our blog or contact us for specialized assistance.

Related articles

↑ Top ↑