Product Images and osCommerce

Have you ever struggled with your product images in osCommerce? Why are they so distorted? Why do they look pixelated?
Lets look at getting these images under control. After all, bad product images are not going to help sell the product.
First, keep in mind that you want to upload a decent size image. The majority of problems I see with poor quality product images in osCommerce result from the images being too small. This causes them to be blown up by the browser where they are displayed on the site. To avoid this, be sure to upload an image at least as large as the largest it will be displayed. By default in osCommerce this is 100 pixels wide by 80 pixels high. The image pop-up window will display the image at what ever size is uploaded so we don’t need to worry about that here.

*Getting rid of the distorted, or stretched image:
This is probably the easiest of the fixes. The product image sizes are handled within the osCommerce administration area. You will want to go to Configuration > Images in the admin. The ‘Small Image Width’ and ‘Small Image Height’ are the fields that control the product images (everything from the new products, the product information page, to the shopping cart). For starters you will want to decide if you want to restrict images by width or height. Restricting the images by both is where a lot of the problems come in to play. In most cases I think it works out best to restrict by the width. To do this simply edit the Small Image Height value and delete it. Then set the Small Image Width to the maximum width you want to allow, between 150-200 is usually good for the basic osCommerce store.
Now when you check out your store front you will notice that the images will no longer be distorted or stretched. The height of the image will be automatically figured based on the width that you entered in the administration area.
*Making your ‘shrunken’ images clearer
You will notice when you upload a nice size product image (300 x 300 or larger) for the product image pop-up, that the other places it is displayed smaller are ‘fuzzy’. This is a result of the browser shrinking the large images to the smaller size. Another problem with this is that the browser is actually having to download the larger image, and then display it smaller. This obviously can hurt your page load times. There are multiple modules available that offer an array of solutions to this issue. I will briefly touch on two different kinds.
You will find modules that create the thumbnail images on the fly (‘On the Fly’ Auto Thumbnailer using GD Library for example). Essentially when the image is needed the module creates a temporary smaller version and serves that to the browser. This option effectively eliminates downloading the larger image and then resizing it. Another benefit is that it does not store cached thumbnail images on the server taking up space. On the same note, a down side is that it creates these thumbnails on the fly each time the image is requested.
Another module solution is one that creates a cached version of the thumbnail image on the server and uses that image file instead of the large version (Automatic Thumbnails for example). The main benefit here is that you are not recreating the thumbnail on the fly each time it is requested. The module simply creates the thumbnail image on the server the first time it is requested and then uses that for each subsequent image request. I guess you could argue that the downside to this is that it creates images on your server and therefore requires space.
With either option the end result will be much clearer, better looking smaller product images in your store. Let’s face it, product images go a long way to selling a product. They need to be the correct proportion and they need to be clear.