Introduction

Version scope

This is a legacy Umbraco 8 / .NET Framework 4.7.2 guide using ImageProcessor. It intentionally does not cover the image pipeline used by current Umbraco versions.

Why Choose WebP?

WebP is an image format developed by Google to provide efficient lossy and lossless compression for images on the web. For an Umbraco 8 site serving many JPEG or PNG assets, generating WebP variants can reduce transferred image bytes and improve page-load performance.

Browser support is now broad, but this article preserves the original Umbraco 8 implementation rather than turning it into a guide for current Umbraco releases.

Understanding ImageProcessor

Umbraco 8 uses ImageProcessor for dynamic image processing. ImageProcessor.Web can transform images on demand through URL query-string parameters, including format conversion when the relevant processor and plugin are available.

  • Image operations: resize, crop, and other transformations.

  • URL-based processing: transformations can be requested through query parameters.

  • Format conversion: the Format processor can output formats such as WebP when the WebP plugin is installed.

Enabling WebP in Umbraco 8 in 3 Steps

1. Install the ImageProcessor WebP plugin

Install the package from NuGet:

Install-Package ImageProcessor.Plugins.WebP

The original working setup used these package versions:

<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

Legacy dependency note

These versions document the original Umbraco 8 solution. Do not treat them as package recommendations for a new project.

2. Verify the Format processor

Open config/imageprocessor/processing.config and make sure the Format processor is enabled:

<plugin name="Format" type="ImageProcessor.Web.Processors.Format, ImageProcessor.Web" enabled="true" />

3. Register the WebP MIME type

Add the WebP MIME mapping to the staticContent section in web.config:

<staticContent>
  <remove fileExtension=".webp" />
  <mimeMap fileExtension=".webp" mimeType="image/webp" />
</staticContent>

Embedding WebP Images in Your Content

Once the plugin and processor are configured, request WebP output by adding format=webp to an ImageProcessor URL:

<img src=”https://piotrbach.com/media/xxslchcm/webp-lighthouse-report-umbraco-cms-health-check.png?format=webp” alt=”WebP is working perfectly!” />

This keeps the original media asset in Umbraco while asking ImageProcessor to return a WebP representation for that request.

Auditing with Google Lighthouse

Measure the result rather than assuming the format change improves the page. Lighthouse can help identify image-delivery opportunities and show whether transferred bytes and loading performance improve after the change.

Measuring website optimization with Google Lighthouse

Measuring website optimization with Google Lighthouse

For repeatable comparisons, test the same page before and after the change under similar conditions and look at the actual image requests in the browser's network tools.

Watch Step-by-Step Tutorial on YouTube

Final words

For an Umbraco 8 application that still relies on ImageProcessor, WebP can be enabled with a small, well-defined configuration change: install the WebP plugin, enable the Format processor, register the MIME type, and request format=webp where appropriate.

The implementation remains useful for maintaining legacy Umbraco 8 sites. A modern Umbraco implementation should be documented separately because the media and image-processing stack has changed.