Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

This tip is for all store owners with sites


Recommended Posts

Optimising your images from the ground is the best way to

create quick loading sites.


Here is the generic strategy.



1) Add a contribution of your choice to display more than one image per product


2) Obtain a graphics re-sizing application of which there are many good

freeware ones.


3) Resize your product images so that none is larger than your preferred size


4) Upload all resized images to your image directory


5) using a SQL script update your products table so that


a) the new smaller image is the product_image

B) the previously loaded larger image(s) is \ are now product_subimage(s) created

by 1 above




A - For every product you will have a MINIMUM of two images - default one small, enlarge one large

B - For some products you will of course have more than two images, but the default one loaded

will always be the small one - without crude sizing through images on your admin.

C - This will result in better quality images on your site as default - and possible quicker page loads

D - Possible lower bandwidth usage


Here are the specific tactics



1) Apply http://www.oscommerce.com/community/contributions,1611 or



These contributions will allow you to have more than one image per picture


2) Obtain picsizer from http://www.axiomx.com/


This freeware application allows you to resize your images in batch mode - i.e in one

action rather than individually.


3a) Using picsizer

- select your graphics directory and the graphics you want to downsize.

- create a new directory where you will load your new smaller images (preserve

your old large images ;-))

- select a prefix for the new small images

- set the output to jpg compression 85 works fine

- set your preferred image small size - I used 150 pixels

- Run picsizer


4) Using your favourite FTP client upload all images from the new small image

directory to your images directory on the server.


5) Backup your database


6) Write a SQL \ php script to update your products table so that

- New small image is now product_image

- any exisiting images are shifted down the images array


I have a crude but functional SQL \ php script to update the products table

which i will share with interested parties.


To see what your images and products will look like see my live shop




A kite flies highest AGAINST the wind !


"Life should NOT be a journey to the grave with the intention of arriving safely in an attractive and well preserved body, but rather to skid in sideways, a lover in one hand, martini in the other, body thoroughly used up, totally worn out and screaming ~ WOO HOO!! What a ride!"

Link to comment
Share on other sites

Good advice.


Shoddy, distorted, pixellated images are a sure sign of an amateurish site, and allowing osc to dynamically resize your images not only looks horrible, but slows things down badly as well.


A bit of effort with your images and you'll reap the rewards in the long run!


Gifs are more efficient for images with large blocks of the same colour (like cartoon images tend to be), whilst jpgs are best with continuously varying colour (like real life photographs).


Also worth mentioning that the amount of compression you can get away with depends on the image compression used (gif/jpg), and the size of the image.

The amount of compression you should use is the maximum possible whilst keeping the image at an acceptable quality level. You can probably get away with higher compression levels for smaller images.

Link to comment
Share on other sites

  • 1 year later...

Another file type to try is the PNG file type, especially if you are using image files that include text. The perks of a PNG file are that they are less 'lossy' than JPEG files in quality, they do not blur text in the image, and are actually smaller by about half in KB/MB size for the same size image (just checked this with a couple of files that I have saved as PSD, JPG, & PNG. I have been using PNG files for over two years now, and they are great when I am combining photo and text for a banner or similar file for a website. The one thing to keep in mind with these is when saving as a PNG, do not interlace the image (I work in PhotoShop). I am not sure what other photo editing software packages allow saving as a PNG, since I have always worked with PhotoShop, but if it is an option, give them a try!



Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...