We help IT Professionals succeed at work.

Optimising and re-sizing large hi-res images for an e-commerce web site

I am looking to do a piece of Coursework in Photoshop and Dreamweaver.

I wish to use Dreamweaver for creating the e-commerce site (sports clothing) and wish to use Photoshop or ImageReady CS to optimise the images.

Having not created an e-commerce site before I would like some info on:

1: What size should I make the images (I wish to place 6+ more images in a gallery style table per page).

2: The images will be thumbnails and when the user clicks the image it will open to full size.

3: Any techniques in Photoshop or ImageReady to make this task as simple as possible.

4: If part 3 can be done using 'automated actions' in ImageReady please can you provide a tutorial or steps on how to do this.

Finally, because the colour of the images will be important due to the nature of the scenario (buying clothes), any advice on web safe colours, resolution etc will be really welcome.

Thanks if you can help.
Watch Question

mm... this is wat i do to for thumbnails for my gallery.. i used a Powertoy for Windows.. just google for Image resizer powertoy.. install it and resize your original images.. you can choose to duplicate it into a smaller size or change the original file...

mm.. in Dreamweaver, put the resized pics accordingly.. and add a link to the original pic.. and target put as _blank.. it should open up in a new window.. OR.. if you know a bit of java scripting in Dreamweaver, you can try lightbox to create a photo gallery..
take a look at the lightbox here.. http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

hope it helps? :)
The single most important rule in web design is: know your audience and give them what they need.

In the case of image size, there is always a trade off between size and download speed. If your market is a young audience, primarily in the UK, you might be safe to assume faster connections and larger screens. That means that you have more freedom to use larger, less compressed images than you would if you were marketing to a much broader audience or to developing areas where download speeds are more of a concern.

The best rule is to look at other sites that already target your audience. What size images, what screen size, how many images to a page; how much compression--these are all things that you want to make note of.

Most e-commerce sites that deal with soft goods (clothing, not software) tend to offer the user three images. The first, a thumbnail may be in the range of 70 - 120 pixels, depending on how much detail is needed to differentiate items. These images are usually heavly compressed for rapid downloads.

The second image usually accompanies a detailed product description and may be in the range, say, of 200 to 400 pixels. These will have a medium compression.

Then there is frequently an enlarged or detail view (sometimes several views). These tend to be larger and are less compressed. The thinking is that, when a shopper is browsing, they need the information fast or they will not hang around. When the same shopper is seeking details, they are more willing to wait for a slightly longer download period.

As for color. take the time to calibrate your monitor and if applicable, your scanner. This will assure that at least YOU are working with honest colors. You have no control over other users monitor settings and can't control what they see. All you can do is send out the most accurate colors that you can and hope for the best.

For the most part, you can forget about web safe colors. This is mostly a relic of the days when computers were limited to 256 colors (however, pay heed to my warning about knowing your audience.)
and people relied more on GIFs for their color images. Save all your product images as jpegs.

Now that most users surf with millions of colors available, the problem is only that people on a Macintosh tend to see images a little lighter and with a touch more contrast than those on a PC. There's not much you can do about this other than avoid extreme dark or light images.

(In Photoshop, you can simulate how your images will look on a different system by going to View>Proof Setup>Macintosh RGB or Windows RGB.)

Learn how to record actions and how to use the batch command. (there are clear instructions in your Photoshop help guide, but you will need to practice a bit in order to get it right.)

Record an action that opens and image, converts to sRGB if necessary, downsizes it to thumbnail size, adds some sharpening, saves it at a highly compressed jpeg, and closes the file. Put all of your images in a folder and run the batch command to process all of these images, adds the suffix _tmb (or what ever you feel like) and saves them in another folder.

Do this again for  regular size images and for your "detail" images. You can make your action add a watermark and a copyright notice if you like. After you're setup, it just takes seconds to run an entire folder.

Here's a tidbit of information. Besides giving you a preview screen to judge your compression, the main thing that "Save For Web (or devices)" does that "Save As..." does not, is it automatically converts the color space to sRGB and strips out all of the meta-data.
I don't use "Save For Web" for my product images because I spend a great deal of time taking the photos and working on them in Photoshop. It is important that I embed my copyright notice and url in the image.

For regular, run of the mill web graphics....I use "Save For Web" because it's fast and convenient. Also, "Save For Web" give you a few compression and optimization options that you don't find elsewhere.

Best of luck,

David B


Many thanks for your excellent answer David B.  This was very concise and clear, gave me all the answers I was looking for, and has given me an excellent guide to follow.  Thanks very much for your help and expert advice.  Much appreciated.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.