Tuesday, 22 April 2014

SDL Mobile : Contextual Image Delivery

So you already have your images for your PC site, but whilst creating your mobile site you soon realize that sending these full size images to mobile devices is far from ideal. You may do some client side adjustment to set height and width, and that may seem to work OK on a fast network, but what about real world situations? If you run your page through any web performance analysis tools you may find that your page weight is a little more than you wanted. Try running your page, or even your favourite mobile web site, through pagespeed, Chrome developer tools or IE developer tools and see what the page weight is and whether the images are optimised.

Now page weight can be attributed to various factors, but images do typically weigh in as the significant factor. As Guy Podjarny from Akamai succinctly puts:

"It all comes down to the fact that you're downloading a large amount of content and you're either hiding or shrinking it. It leads to mobile websites that look and interact like mobile websites but are over one megabyte or two megabytes in size."

Now "web performance is user experience" as Lara Swanson - Engineering Manager of Mobile Web at Etsy - points out:

"Users expect pages to load in two seconds, and after three seconds, up to 40% of users will abandon your site. Similar results have been noted by major sites like Amazon, who found that 100 milliseconds of additional page load time decreased sales by one percent, and Google, who lost 20% of revenue and traffic"

We've recently released the SDL Mobile Contextual Image Delivery module which allows you to easily resize images on the server side so that the client doesn't have to download the full image and resize on the client side. The interface is a simple rule based URL interface that takes images at given locations, transforms them on the fly and returns an optimised image.

For example ... imagine you have an image at http://mysite/images/my.jpg and you want fit this image into a 100x100 space on your page.

You can drop the optimised image on your page with:

<img src="http://mytransfomer/t/scale/100x100/mysite/images/my.jpg"/>

where http://mytransfomer/t is where you have deployed the Contextual Image Delivery module. Both .NET and Java deployments supported BTW.

This transformation is done once and cached so that subsequent requests for the same optimised image from different users is fast.

In a nutshell, that's SDL's Contextual Image Delivery a.k.a CID.

I'll blog soon about the other features of this module, including :-

  • Using context properties to set width and height for you based on the connecting device - the Context Engine already knows the client's screen size so you can make these image optimisation rules dynamic.
  • Whitelisting - to restrict which URLs you wish to allow.
  • Image source definitions - to allow a given logical URL to point to different physical locations in different environments AND to point to images on the file system.
  • Other rules such as trim, scale and format change.
  • JavaScript library to optimise image URLs client size - perhaps you want to handle screen rotation, window resize by the user.
  • Template Building Block to create dynamic CID URLs in Tridion component presentations.