Responsive Images – Scene7 test #1

Here are details of my initial implementation of Responsive Images (a.k.a. Fluid Image) using the

Following on from :: Responsive Images – #intro

[Note: As my Scene7 account is no longer active, live demo’s will no longer work]

The img element is wrapped in a

</noscript>

//data-imageid holds the value of the Image ID for the future Image Requests

Meanwhile for browsers with javascript, a little jQuery is uses .insertAfter to swap in a revised img element instead of the noscript element – this can be based on values passed in the code, or if you have a nice Image Server at your disposal you can programmatically drive the image request by whatever device/screen measures you can retrieve:

$(‘noscript[data-imageid]’).each(function(){

var s7base=”http://s7e2a.scene7.com/is/image/benco/”;

var imageid = $(this).attr(“data-imageid”);

$(‘<img src=”‘ + s7base + imageid + ‘?wid=’ + (((areawidth/45).toFixed(0))*10) + ‘” alt=”‘ + $(this).data(‘alt’) + ‘” />’).insertAfter($(this));

});

// only for those noscript elements containing the data-imageid perform a substitution for that ID and my Scene7 base URL

// the width for the image request is determined by the current browser width (which is calculated elsewhere (((areawidth/45).toFixed(0))*10) ensure that all 4 images will always fit in the width

// this also only makes image requests in increments of 10px to provide a little better caching efficiency (Scene7 assets are served via the Akamai CDN)

You can see the live example here:

<a title=”http://allbs.co.uk/richmedia/scene7/noscript_test.html” /richmedia/scene7/noscript_test.html” target=”_blank”>http://allbs.co.uk/richmedia/scene7/noscript_test.html</a>

(This test page has an auto reload on page resize bigger than 10px difference, but for now this is just for demonstration purposes )

Testing on my Android tablet and smartphone switching orientation triggers the reload and this is where I see greater future benefits.

(There is now also a follow example: <a title=”Responsive Images – Scene7 #2” /2012/05/14/responsive-images-scene7-test-2/” target=”_blank”>Responsive Images – test #2</a> )

I’d would really appreciate any thoughts and suggestions, questions or comments, my work email address:: bseymour (at) adobe.com (or @bseymour)

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