Developing websites for multiple form factor devices demands that any images are the correct size to fit the device being used.

There are a number of ways of achieving this, one is to store all the relevant sizes of an image for later use, another is to store one version of an image and automatically resize it as needed.

Certain images, such as logo’s and images with text on them do not readily lend themselves to being resized as the text can become stretched, so the best option for these is to store custom built images for different size devices.  As these images do not tend to change frequently, the overhead of storing the separate images is not prohibitive.

For product images and other frequently changing media, storing multiple different versions of the image becomes a headache.

bemokoLive allows you to resize images on the fly and looks after caching of those resized images for future use.  The Image Transcoding addon used to be accessed via a Freemarker macro which was OK – but the developers have made it even easier in the latest version of the framework.

Image transcoding is now available as an HTML5 custom data attribute on the <img> tag itself, so transcoding an image in a page is now very simple.

As an example, if I have an image

http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg

And want this image to be displayed 100px wide, I can do the following:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="100.jpeg" alt="radio"/>

The data-rule attribute allows me to control the size of the image, so I can scale or crop to any size.  If I wanted the image to be 100x200px in size, I would say:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="100x200.jpeg" alt="radio"/>

The tag can also be set as a variable, giving the ability to access device attributes, so I could say:

<img src="http://blog.bemoko.com/wp-content/uploads/2009/09/radio.jpg" data-rule="${device.displayWidth / 2}.jpeg"
 alt="radio"/>

To give me an image half the width of the current device.

To see an example of these tags in action, visit the image transcoder demo page.

For more details on the rules available see the documentation