Make Sitecore deliver images which fits the screen

When implementing a responsive design the size of images is almost always an issue. You want the images to be resized server-side so they fit the screen. Primarily for performance but also to please Google Page Speed.

Sitecore enables us to set the width and height dynamically by sending query parameters to the media handler.

My colleague Brian wrote this nice post where he explains the basic out-of-the-box Sitecore image parameters.

But what if it was possible to also let say set the JPEG compression level using query parameters? Then it would be possible to set the compression level low for small screens and high on desktops. And what about center-cropping images to make them fit in those designs where the image proportions differ between breakpoints.

Wait no longer. This post will show how to set the JPEG compression level using a query parameter and my next post in this mini-series will show how to crop images using a similar technique.

What about performance then? It can take up a lot of resources on the server when working with images.

Well  when changing the media in the right pipeline Sitecore will do its magic and store the image in the media cache.

Setting JPEG compression level via the query string

To do this we implement a service class which changes the compression level of a Stream. Plain and simple .NET

Next thing we create a new processor for the getMediaStream pipeline.

We first check if it is a jpeg image which is being requested and if the query key is present and contain a valid compression level between 1 and 100.

Finally we call the service class with the image stream and replace the media stream in the pipeline args with the new one.

The processor should run after Sitecore have performed resizing etc. so we place it in the end of the getMediaStream pipeline using the following include config.

That is it. Now we can set the JPEG compression level by adding the query jq=<quality> and even mix this with the other Sitecore image parameters, for example:

http://MYWEBSITE/~/media/my-image.jpg?w=100&h=100&jq=60

I have used the well-known Windows Koala as a show case

koala_low_compression

Low compression

koala_medium_compression

Medium compression

koala_high_compression

High compression

What about caching then? Well Sitecore has already taken care of this all by itself.

koala_mediacache

Stay tuned for my next post which shows how to center-crop images using query string values.

Anders Laub

Anders Laub Christoffersen

Anders has been working with Sitecore for over a decade and has in this time been the lead developer and architect on several large scale enterprise solutions all around the world. Anders has been nominated a Sitecore Technical MVP three years in a row for 2014, 2015 and 2016. Anders is now working as a Sr. Solutions Architect at Sitecore in Copenhagen.

2 thoughts on “Make Sitecore deliver images which fits the screen

  1. Great article, thanks for sharing – I implement basically the same thing on my site. However, I have a question and wondered what your stance is…

    Doesn’t this compress the image twice, and therefore is quite inefficient (double processing) and also produces a poorer quality image (re-compressing a lossy-compressed image)?

    I imagine a better way would be to re-implement the default Sitecore resize processor but add the quality querystring param into that. What are your thoughts?

    Thanks again

    • You are right about the image being processed twice if it is also resized in the same go, but Sitecore caches the image automatically so it only happens when the image is not already present in the media cache.

      You could replace the default Sitecore resize processor to optimize but I am not sure I would say it is time well-spent and it could potentially cause problems on Sitecore updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website