Blog

Resizing images in EPiServer

Every EPiServer developer knows that editors love to work with high-resolution images. If those images are not optimized for different devices, they may increase the page loading time and ruin the browsing experience. There is nothing worse than serving 5000x5000px images on a device whose viewport is only 400x700px, or sending big images (15mb+) over a 3G network.

The days of fixed-width website design is behind us. HTML5 has support for responsive images using picture element. Here's a basic example:

This tells the browser to load image_768.png if the viewport is not bigger than 768px or to load image_1200.png instead. IMG will be used as a fallback if the browser doesn't support the PICTURE element.

On the EPiServer side, we have to define a block with a ContentReference property and decorate it with a UIHinth attribute like this:

I chose 1200x1200px in this example, but that is something that varies from project to project. 1200px is not optimal for mobile phones, but still much better than 2000px. If you'd like to have a full device recognition, then take a look at Image Optimizer by 51 Degrees: https://51degrees.com/Support/Documentation/NET/Image-Optimiser

Performance tips:

Resizing images on the fly is expensive; the ImageDiskCache plugin is a must