Sitecore Retina Images

Posted on March 12, 2014 by scottmulligan — 1 Comment

I started to see a lot of questions from the Sitecore community about retina images and how they can be used in Sitecore. Just like any other site, you can use CSS to serve standard or retina images depending on the device. Nothing is stopping you from doing this and you should continue to do this for CSS based images. But there is no real solution for images that are served via Sitecore. That’s what I was aiming to solve.

I put together a little something that allows you to upload both a standard and retina version of an image in the Sitecore media library. After both versions are uploaded Sitecore will then serve the appropriate version depending on the device’s detected pixel density.

A new insert option is added for each image that allows you to upload an additional retina version that is stored directly below the standard image. It’s completely optional to upload a retina version so you don’t need to add a second version for every image if you don’t want to.

When linking to an image in the media library, you will still link to the standard version of the image. When rendering a page, Sitecore will check against a cookie value that stores the device’s pixel density and decide whether or not to serve the retina version. An important thing to note is that a javaScript snippet is used to set the pixel density cookie so the first page load will not have access to the cookie and will serve the standard image. All subsequent page requests will have access to the cookie and serve appropriate images. Retina versions will be displayed for images that are added into rich text fields or output via the sc:Image or sc:FieldRenderer tag.

I thought about retina images in Sitecore a lot and finally decided upon this set up for a variety of reasons. First off, I wanted this to be something that adds functionality but doesn’t require much additional work to maintain. Secondly, I wanted to make sure that standard screens are served standard images. In no scenario should a high resolution image be served to a standard screen since retina images are substantially larger. In most cases a retina image is ~2.5 to 3 times larger in file size than its standard counterpart. Initially, I wasn’t sure how to handle the retina images in the media library but I decided that adding a retina image version should be an optional extra step. This way you don’t have to add one in cases where it’s not necessary or you don’t have a high-res version.

Look for Sitecore Retina Images in the Sitecore Marketplace soon. Until then give it a try by downloading the following package: https://www.dropbox.com/s/n5pa2wgp9punwcp/Sitecore-Retina-Images-1.1.zip

One last step after installing the package. Add this JS snippet to the head section of your main layout file:

<script>document.cookie = '<%= Sitecore.Configuration.Settings.GetSetting("cookieName") %>=' + Math.max(screen.width, screen.height) + ("devicePixelRatio" in window ? "," + devicePixelRatio : ",1") + '; path=/';</script>

This snippet sets the browser cookie that stores the device’s detected pixel density.

Notes

I will merge Sitecore Retina Images into my Sitecore Adaptive Images module to enhance it’s functionality but I will also keep it as a separate module so you don’t need to use both.
I looked at ways to also leverage the Mobile Device Detector module to determine if a device has a high-res display but it relies on the 51Degrees.mobi device library and it does not seem to supply that piece of information. Please correct me if I’m mistaken.
I also toyed with the idea of allowing users to enter user agents strings into Sitecore to target. You would need to enter part or all of the user agent for specific devices and that data could be used instead of the JS method to detect device pixel density. I really don’t like relying on device detection but it could be useful if you wanted to only target a subset of devices (such as only targeting iPads and iPhones). What do you think? Useful or not?