Dynamic Image Serving: 1
Want to enhance your users’ experience by letting them interactively zoom in on your images? Want all thumbnails and other derivatives to be generated directly from your original source file images? Want to automatically adapt page weight to send lower resolution images to dial-up users, to send higher resolution images to broad-band users, and to control bandwidth costs? Want to improve image security by adding 100% indelible watermarks, logos or text to all your images instantly? Want to let users see the detail of your images in a way that does not allow them to download your original source files? If so, you should check out Dynamic Imaging, a new, better way of dealing with your images.
So what is Dynamic Imaging?
Simply stated Dynamic Imaging is the generation and delivery of web images in real-time from your original source files. Dynamic Imaging Software runs on your existing server and quickly and efficiently generates all your web images from your high quality, original source file images.
Traditional imaging goes something like this: Start with a high resolution source image, then figure out all the variations (derivatives) of this image needed for the web site. This may be a thumbnail, a midsize, a medium size with watermark, and an enlargement with a different watermark, etc. Now generate all of these derivatives for every source image either by hand or using some offline batch process, then store, index and propagate all those derivatives to the web servers.
Unfortunately this static approach is plagued with familiar problems: It’s slow, time-consuming, inflexible and it results in a less-than-ideal user experience! Furthermore, if you ever decide to redesign your website, you may have to recreate all of your derivative images.
Dynamic Imaging starts with the same high-resolution source image. But instead of dumbing this image down to create a cumbersome collection of derivatives, this high-resolution source is stored on a server running Dynamic Imaging software. Dynamic Imaging delivers all required derivatives of this image on-the-fly when and how you need them. The following diagram shows how you call derivative images on-the-fly from the Image Server:
The Image URL beside each image shows a call to the same source image but with a slightly different width command, the wid=xxx shown in red. It is the Image URL, with various parameters, that tells the Image Server what you want a particular derivative image to look like, allowing you to change the width command to get different sized images.
You shouldn’t worry that on-the-fly generation of derivatives will slow down your site's performance. Dynamic Imaging is optimized to ensure high performance delivery of your images and uses intelligent caching of images. Dynamic Imaging operates today on a large number of high volume production websites, including some very large e-retailing sites.
Really Cool Zoom and Pan
Image resizing isn’t the only application of this technology. Zoom and Pan is another great example of Dynamic Imaging:
With Zoom, the user gets a more interactive and compelling way to look at images with the ability to focus in on the details most interesting to them. You can zoom in on an image; you can also click and drag (pan) the image to focus in on any area of interest. The full screen zoom capability is easy to add to your images.
Want to Control the Image's Weight?
Dynamic Imaging also makes it easy for you to control the weight of your images. This allows you to send lower resolution images to dial-up users, higher resolution images to broad-band users, or to control bandwidth costs (see above).
Note that the size of the image is controlled by simply inserting the quality command, the qlt=xxx shown in red, into the Image URL. With dynamic bandwidth optimization, it’s possible to apply more compression to all of your site's images when your web traffic starts peaking above your committed bandwidth.
Part 2 of this article will show you a really cool form of spin and zoom, explain how to protect the security of your original source file images and cover other image effects you can introduce with Dynamic Imaging. You can find an online demo of these processes here.