Reducing Image File Size Using ImageProcessor in Episerver

Heavy image files slow down websites, drain bandwidth, and frustrate users. If you’re running an Episerver site and need a way to compress images efficiently without sacrificing visual quality, ImageProcessor is a practical solution baked right into the CMS.

What Is ImageProcessor?

ImageProcessor is an extensible image-processing library used by Episerver for dynamic image resizing, format conversion, quality adjustments, and caching. It processes images via query strings and helps developers manage media output on the fly—without relying on external tools.

Why File Size Matters in Episerver

Large images affect site speed, mobile usability, and SEO performance. Shrinking the file size—without losing visible quality—can have immediate benefits:

• Faster page loads
• Lower storage costs
• Smoother mobile experiences
• Better Core Web Vitals metrics

Getting Started with ImageProcessor

Episerver Cloud Services include ImageProcessor.Web by default. If you’re self-hosting, you’ll need to install it via NuGet:

Install-Package ImageProcessor.Web.Episerver

Make sure ImageProcessor.Web.Config is present in your project’s configuration files. This file controls how image requests are handled and cached.

Core Query String Parameters That Reduce File Size

Using query string modifiers, you can reduce file size directly in the URL.

Examples:

1. Resize /globalassets/image.jpg?width=800 Shrinks the image width while maintaining aspect ratio.
2. Quality /globalassets/image.jpg?width=800&quality=70 Reduces compression quality from default (90) to 70.
3. Format /globalassets/image.jpg?format=png Converts file format to PNG or WebP, depending on browser support.
4. Crop /globalassets/image.jpg?crop=auto&width=400&height=300 Auto-crops the image based on focal point or center.
5. Compression Presets Use presets in ImageProcessor.Web.Config to simplify frequent transformations.

Enabling WebP for Maximum Compression

WebP images often reduce file size by over 30%. To enable WebP:

1. Ensure your ImageProcessor version supports WebP.
2. Add this to your image URLs: ?format=webp
3. Enable WebP MIME types in IIS: <staticContent> <mimeMap fileExtension=".webp" mimeType="image/webp" /> </staticContent>

Modern browsers that support WebP will receive smaller, optimized images automatically.

Best Practices for Using ImageProcessor Efficiently

• Use Cloudflare or CDN caching to offload repeat requests.
• Avoid upscaling—never request a size larger than the source.
• Combine modifiers in a single URL to reduce server load.
• Configure auto-rotation to correct orientation using EXIF metadata.
• Use named crops for better control on different layouts.

Testing Results

A JPEG image at 2400×1800 with quality 90 was 1.2MB. The same image resized to 800px wide and quality 70 dropped to under 180KB with no visual degradation on desktop or mobile.

Tools to Aid the Process

• ImageProcessor.Web.Config – Manage cache rules and security.
• Developer Tools in Chrome – Use Lighthouse to test file size impact.
• Episerver CMS Media Manager – Pair with ImageProcessor for streamlined workflow.

Wrapping Up Without Wrapping

ImageProcessor in Episerver delivers a fast, flexible way to reduce image size without manual editing. Query-based transformations, automatic caching, and WebP support let developers keep site performance high and user frustration low—all without touching Photoshop.