How to generate osCommerce thumbnails

How to generate thumbnail images
for osCommerce

By default, osCommerce scales down the product images you upload to display them as thumbnails. This presents a problem because:

• The entire image needs to be download to display its thumbnail - for multiple products with big images this can be time-consuming, and

• The GDI (Graphical Device Interface) does a poor job when it comes to resizing bitmaps, resulting in low-quality images.

The solution is to use 2 images for every product, an optimized thumbnail and an optimal-size main image.

Getting the images right requires multiple steps:

1. Changing the image format.
   Images come in all sorts of formats, but fir the web you need JPG, GIF or PNG.

2. Changing the color depth.

3. Resizing the image.

4. Framing the image with a 1 or 2-pixel frames for better look.

The program to allow you to do all this in a single step is Draw Magic, which ships as part of Animator Professional.

Please do the following:

• Download and install Animator Professional.

• Download the modified version of Photo Magic (PhotoMagic.zip): if you have not received the download link and the password to unlock it, please contact us.

• Unzip PhotoMagic into the folder where you installed Animator Professional.
  This is typically: c:\Program Files\CPoint\Animator Pro
  This will replace the existing PhotoMagic.exe with the modified version.

When you run Photo Magic, select File / Image Processor from the menu to generate 4 types of images you need for osCommerce:

1. Thumbnails (usually 100x80 pixels))

2. Main product images (usually 230x330)

3. Heading (main category) images (usually 57x40)

4. Sub-category images (usually 100x57)

Make sure that your settings are as follows (width and height will be different depending on the type of image):

Important: ALWAYS use Bicubic resizing because it gives the best possible quality.

A B

Take a look at images A (Standard resize) and B (Bicubic resize). The Standard one is a lot better than what the browser would give you on-the-fly, but it is still nowhere near the quality of Bicubic resizing.

How to automate osCommerce image generation

To automate everything, please do the following:

1. Create a folder to store your original images

2. Inside of the folder, create 4 sub-folders: thumb, heading, subcategory and big.

For each of the 4 types save a separate settings file. For each of the settings file you'll need to specify the output directory, width and height. If you are unsure about width and height, check the settings in your osCommerce admin area, under Configuration / Images.

How to process the images for a new product

1. Click on the Add button to select all the images to process

2. Load the settings for the thumbnail images, and click OK

3. Load the settings for the big (main) product images, and click OK

4. Upload the thumbnail image when adding a product to the catalog

5. Use FTP to upload all the big (main) product images to the images/big folder of your website.