There are lots of packages available to dynamically resize images on the fly using simple php code. Some merchants believe that they need to manually resize images with packages like photoshop for each and every product of their e-commerce store with the argument of image quality loss. This is far from the truth and here we will examine some basic ways of image resizing using image thumb generators or thumbnailers.

The stock osCommerce by default uses a basic calculation to adjust the aspect ratio of an image to a given viewport. A function called tep_image exists in the catalog/includes/functions/html_output.php that processes pictures. The tep_image function performs two fundamental tasks

1. It structures the <img> HTML tag by inserting a title, alternative image text and image dimensions.
2. It calculates the aspect ratio so the image can be resize to fit into a given set of dimension without quality loss.

In addition one or more configuration switches exist to control the behavior of this resizing operation. The problem with the stock code is that the entire image is always loaded by the client end and consumes bandwidth. The browser resizes the image into the given width/height as it reads the HTML. The width/size can be set in the stylesheet or in the <img> tag itself. An image thumb generator comes in and optimizes the image size by generating another image and finally sends it to the browser.

The basic operation of the image resizing is shown on the picture here. The algorithm calculates the new image dimensions based on the given viewport and original image width and height. The image is only processed if a certain criteria is met. That is the original width and height are greater than the given viewport dimensions and of course the given image file is a valid one. If the image is smaller than the viewport the image is returned as is because it can fit inside the image placeholder.

An image generator or thumbnailer is then hooked into the image tag the tep_image function structures. The HTML will include a link for the script under the src parameter. This is how the thumbnailer is called.

Since the image dimensions were calculated there is no width or height parameter in the image tag. This will force the browser to use the fulll thumbnail given by the image generator.

So now lets see the image generator. The fly_thumb.php is packaged with the Cache HTML and the older versions can be found in the osCommerce contribution section. The code was restructured from the original on-the-fly-thumbnailer to use certain switches for the thumbnail storage and utilize the browser cache. Because of the later it was packaged with the Cache HTML.

To maintain the original image quality the thumbnail can be generated in 2 ways. If the GD library is installed (and for most servers nowdays it is) the imagecopyresampled function is used to generate the thumbnail from the original image. If the function doesn't exist a php replacement takes its place that performs a bicubic resampling. The code can be found on php.net written and updated by various contributors of the PHP community and it's independent of the GD library.

http://www.php.net/manual/en/function.imagecopyresampled.php

To finish off with the tep_image function the finalized image tag look like this in PHP when the function returns the result to the caller.

<img src="http://www.example.com/fly_thumb.php?img=test.jpg&amp;w=120&amp;h=160" title="some title" alt="alternative text">

So manual image resizing is a myth. Image quality can also be set for the thumbnail a ratio of 75% can use optimum size the thumbnails and maintain excellent quality at the same time. You do not need to have an external program to perform resize operations and by all means you do not need to waste time doing the labor. Let the thumnailer work for you. In addition as the full control of thumbs is now in PHP special effects with the thumbnails are also possible, Things like overlaying a sales price tag at the top-right corner of the viewport will require just another image and overlay operation. At the same time the original image stays intact available from the full image preview.

Looking caching and storage possibilities of the thumbnails the requirements are by far simpler. Because the image thumbs can be cached on the browser end and expire after a predefined period of time saving server bandwidth as the server does not need to send the image for every request. The same applies with the stock osCommerce. The difference is size. An image of original dimensions 640x480 resized by a ratio 1/10 will yield 64x48. That is substantial bandwidth savings. In other words transferring 100Kbytes vs 10Kbytes for a single image request.

Thumbnail storage can also be useful so the thumbnailer can return immediately the stored thumbs. Image protection via watermarking is also much easier because the thumbnailer is a separate PHP script. Watermarks can be be placed as a transparent background at the top of the generated image thumbnails. The original product images can also be stored outside the web root thus protecting them against theft leaving the image generator to do the processing of all images.

The only disadvantage of thumbnailers is that they do require programming effort and take time to test. But when having ready and open source modules designed specifically for this purpose one should take advantage of them and not spread misinformation of image quality issues or myths about library dependencies.