Optimised Image Loading – Scene7 fundamentals #1

I’ve been working with Adobe’s Scene7 customers for many years years now – and in case you’ve not heard of it is is probably _the_ leading Dynamic Image Serving platform (which goes well beyond just serving images).

If you have a site with either a healthy number of visits per month (>10k) or for whom a rich and interactive visual experience is key to customer engagement, then it may be well worth your while to give Scene7 the once over.

Over the last 6 months I’ve spent time with some of our main retail clients to review their current implementation, and exploring the opportunities for getting even more value from the platform.

One of the simplest and easiest ways Scene7 can help is through using Image Presets.  These are like a back-end shortcut to a bunch of setting relating to the ways that an image request is made, they follow the ? in the querystring and are wrapped in $ signs. For example:

http://s7e2a.scene7.com/is/image/benco/Lemon_Lime_Slices?$thumbnail_high_qual$

This calls the image using the Image Preset $thumbnail_high_qual$ which in the Scene7 back end (called SPS) can be used to control image format, jpg compression setting, sharpening, and literally hundreds of other image commands.

A great use case is where an image-heavy page on a site is having loading performance problems – it’s possible to tweak those back office setting to say increase the compression level, apply sharpening to compensate visually, and ultimately come out with a set of image requests which have near as dammit the same visual quality but with significantly lower page weight.

This can be especially important for your mobile visitors, who may well be on low bandwidth connections (which hopefully you are already testing for and adapting to) then implementing different image presets settings can give you a viable way to improve page load performance if your analytics are suggesting that load performance may be leading to page abandonment.

As an example, if you open the following to pages and tab between them, and you will hopefully agree that visually there is very little difference between them, yet the image file weights for one of them is around 70% lower:

http://allbs.co.uk/richmedia/scene7/products_high.html

http://allbs.co.uk/richmedia/scene7/products_med.html

Any questions or comments, my work email address:: bseymour (at) adobe.com

(All views expressed are my own, and do not necessarily reflect those of my employer)