All Your Images Are Belong to Umbraco

Today I am going to talk to you about a tool that has been shipped within the Umbraco core since v7.1. It powers the Image Cropper property editor but can do much much more to help you build high quality, performant websites. That tool is called ImageProcessor.

ImageProcessor is actually two libraries: ImageProcessor – A library for desktop and web that provides a fluent API allowing you to easily chain methods to deliver the desired output, and ImageProcessor.Web – A web extension to ImageProcessor that allows the developer to perform image manipulation using a Url API of querystring parameters as instructions.

The Ever Increasing Web

Web pages are getting bigger. According to the HTTP Archive in the last year the average web page has gone up by 252kb to a whopping 1953kb with 213kb of that due to images. I don’t know about you but I find that to be a worrying trend, especially in this age of responsive websites and increased mobile browser usage.
Thankfully with Umbraco we have all the tools available to us to keep our webpages snappy.

Image Cropper

If you are using Umbraco 7 and you don’t use the Image Cropper property editor then you are sorely missing out; it’s pretty sweet. The Image Cropper utilizes ImageProcessor.Web’s Url API to generate crops of your images that are then cached in a super awesome auto cleaning diskcache mechanism that will serve the cropped image on subsequent requests.

It’s possible to alter the generated url further to improve performance like this. Any of the ImageProcessor commands can be appended to the URL.

Dropping the quality slightly can dramatically decrease filesize without affecting the appearance.

Slimsy

This is a rather neat little package written by Jeavon Leopold that when used in conjunction with ImageProcessor.Web and the built-in Umbraco Image Cropper will make your websites images respond to the viewport width and also the pixel density if supported by the client browser. It does this by providing extension methods and performing calculations on-the-fly via JavaScript to provide the correct instructions to the Url API.

It’s very flexible and I highly recommend you have a look at it.

An initial image size of 270 x 161. This example is looping pages, each page has a media picker with property alias “Image”

Presets

ImageProcessor.Web has the ability to translate preset instructions passed to the Url API. (I find this very useful when generating images for specific items in widget based setups where you don’t care so much about art direction). Presets allow you to configure the image output in a single location making it easy to tweak output for improved performance.

To set up presets you need the correct configuration files installed in your website. There’s a nuget package available – ImageProcessor.Web.Config which allows you to install the files but there is also extensive documentation online so you can set it up yourself.

Here’s an example of a signpost.

A single signpost item with preset applied.

With the relevant configuration.

Sample configuration trimmed for brevity.

Pre Processing
All the previous shown methods involve postprocessing the uploaded image on first instance of the page loading. This works perfectly 99% of the time but chances are there will be a client somewhere that will upload a huge image that will cause a performance hit as ImageProcessor processes and saves it for subsequent viewing.

Fortunately there is a way to deal with this.

Umbraco provides various events that you can tap into when saving media and you can use ImageProcessor’s fluent API within these events to resize any images when they are saved to the media section. Here’s the relevant code to demonstrate how to do this.

Using Umbraco events to preprocess images.
From https://24days.in/umbraco-cms/2014/all-your-images-are-belong-to-umbraco/

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注