Introduction

Protecting your images online has never been more important. Whether you're running a photography portfolio, an e-commerce site, or a content management system, adding watermarks to your images can help protect your intellectual property. In this post, I'll show you how to build a flexible, on-the-fly watermarking system using SixLabors.ImageSharp.Web that doesn't require modifying your original images.

What We're Building

We'll create a custom image processor that:

• Adds watermarks dynamically via URL query parameters

• Scales watermarks proportionally based on image size

• Supports custom watermark text

• Works seamlessly with ASP.NET Core and Umbraco CMS

The Implementation

Setting Up the Custom Processor

First, let's create a class that implements the IImageWebProcessor interface:

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.Web.Processors;
using SixLabors.ImageSharp.Web;
using SixLabors.Fonts;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.Web.Commands;
using System.Globalization;

namespace MediaWiz17.ImageProcessors
{
    public class WatermarkWebProcessor : IImageWebProcessor
    {
        public IEnumerable<string> Commands => new[] { "watermark", "wtext" };

The Commands property defines which URL parameters this processor responds to. In our case, we support:

• watermark - enables/disables the watermark

• wtext - allows custom watermark text

Processing the Image

The Process(FormattedImage, ILogger, CommandCollection, CommandParser, CultureInfo) method is where the magic happens:

 

This method checks if watermarking is enabled and applies a default or custom watermark text.

Applying the Watermark

The ApplyWatermark(IImageProcessingContext, string) method handles the actual rendering:

Key Features

Responsive Sizing: The watermark scales to 2% of the image width with a minimum size of 14 pixels, ensuring it's always readable regardless of image dimensions.

Smart Positioning: The watermark is anchored to the bottom-right corner with consistent margins, making it predictable and professional-looking.

High-Quality Rendering: By returning true from RequiresTrueColorPixelFormat(CommandCollection, CommandParser, CultureInfo), we ensure the text renders with full color depth:

Register it using a Composer

public class RegisterServicesComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.Services.AddImageSharp().AddProcessor<WatermarkWebProcessor>();
    }
}

Usage Examples

Once registered in your ASP.NET Core pipeline, you can use it like this:

Basic Watermark

<img src="/media/photo.jpg?watermark=true" alt="Watermarked photo" />

Custom Watermark Text

<img src="/media/photo.jpg?watermark=true&wtext=©%20John%20Doe%202026" alt="Custom watermark" />

Combined with Other ImageSharp.Web Commands

<img src="/media/photo.jpg?width=800&height=600&watermark=true" alt="Resized and watermarked" />

Benefits of This Approach

1. Non-Destructive: Original images remain untouched

2. Flexible: Enable/disable watermarks per request

3. Cacheable: ImageSharp.Web handles caching automatically

4. Performant: Watermarks are applied once and cached

5. Developer-Friendly: Simple URL-based API

Conclusion

With just a few lines of code, we've created a powerful, flexible watermarking system that integrates seamlessly with SixLabors.ImageSharp.Web. This approach is perfect for CMS platforms, image galleries, or any web application that needs to protect visual content dynamically.

The complete source code is available on GitHub, and this implementation is part of the MediaWiz17 project running on Umbraco 17 and .NET 10.