Nice watch right? I’ll get back to the watch a little later.

Sitecore provides some functionality for basic image manipulation. You can resize images, make them grey scale — but that’s about it.

Images need to be cropped, optimized, flipped and optimized even further. One of the key metrics Google looks at is page speed and thus page weight. So, when you get a creatives’ design files, they usually weigh in at 50MB plus some extra. You know how it is 👍

It’s up to us, implementing Sitecore, to make the site as small and optimized as possible — without them noticing.

This of course need to work for fluid, responsive designs; fast gigabit connections and slow 3G a like. Today mobile devices surpasses desktop users and major parts of the world are still on 3G with limited data.

Google, being both the crawler and manufacturer of the worlds largest browser is a major force behind a faster and secure web. You might have heard that newer Chrome versions will come with lazy loading built in and enabled by default.

chrome://flags/#enable-lazy-image-loading

Until that happens you need to use a library like this to do it for you.

When you loaded this blog post you might have noticed the blurry effect of the images. Mediums way of displaying a low quality, blurry image, fading into crisp. This can be done in different ways.

For a recent Sitecore project we wanted to achieve a similar effect as Medium. We did this by creating blocky pixelated images and then adding a css blur. The Yoda mind tricks are amazing. You can clearly see the similarities and adding a fade effect between the blurry and the loaded original makes the experience is quite nice.

#1 pixelated based on original; #2 with css blur; #3 fade into original

In this case the pixelated image is less than 1KB and the original is about 10KB. An other option would be not to load any images at all, but we chose a solution that keeps the image intact with the correct proportions. It’s also much more visually appealing.

So, how do we create the pixelated image? We got a guy using photoshop uploading the images.

Just kidding.

As you might know, Sitecore is quite flexible, meaning you can add your own image processors in the getMediaStream pipeline. What we did was to replace all Sitecore implementations with our own, including the resizing. Reason for this was that we often need to resize other, non Sitecore media coming from PIM or DAM or similar so we can reuse the same code.

We created two pipelines, one for image manipulation and one for post processing of the image. The bulk job is done by the excellent ImageProcessor, or actually a fork of it.

This is how you plug them in: