Adaptive Images in Sitecore

Feb052013

Hello folks. I have released a first version of the Sitecore Adaptive Images module. I think it will be a very useful codebase to start from and I’m excited to continue extending its functionality in the coming weeks and months.

The idea of adaptive images is nothing new, but this module takes that concept and leverages the Sitecore Media Library in order to provide a solution that is tightly integrated with Sitecore. The media caching and rich image manipulation features built into Sitecore make it a great tool for tackling the problems that plague responsive images. This module is a drag and drop solution that will work on your existing site, as it requires no changes to your mark-up.

What is the Problem?

Responsive design is becoming very popular within the web community. That is not a problem. It’s actually quite exciting. The problem arises when dealing with images within the responsive design methodology. Responsive design dictates that markup (and images) are altered depending on the screen size of the users device. So in theory that can mean that an image that is displayed to a user on a 27″ monitor is the same image that is displayed on their 3.5″ mobile device. That is a problem.

There is no reason that the 3.5″ mobile device should be served the image in it’s original large dimensions and large file size. Adaptive images attempts to mitigate this problem by detecting a user’s screen size and re-scaling the images to a more manageable file size. So, for example, that means that a mobile user is not served a 1000px wide image when their device is only 480px wide. The end result is that your users are happy because the images appear sooner in their browser and precious bandwidth is saved.

Read the full article about the Adaptive Images module for Sitecore on my website.

Skip to sharing