Welcome to WebmasterWorld :)

There's a fine line here between image quality and speed - the overriding factor is common sense - a 100k image will take a few seconds to load on a 56k connection a, so if you have twenty images on the page you're going to see slow load times and see a bandwidth drain if your site is busy. A 10k photo will load very quickly but the image quality might be poor (depending on dimensions).

Getting the balance right usually takes a little tweaking for each image as ones with more detail or colour will be larger file size than one with large areas of black or white.

72 ppi is as high as you need to go for screen images.

For an Example I have just completed a site for a photographer - I tried to keep all the main images below 100k - these were large 'flagship' photos for each section that needs to be high quality - for the thumbnails I kept them down to 10k - 15k and for the slide show (200px x 300px) I plugged for about 50k.

For a product shot I'd say 20k would be a maximum - but again it is dependant of the dimensions and image detail.

You cleared up a lot of things for me.

Thank you.

Could someone also give me guidelines for image sizes of product thumbnails?

You aren't looking for quality out of thumbnails. You're looking for fast loading and immediate recognition at a glance. Shoot for under 10K per image, tops. Make sure the images DO lead to quality enlargements.

A couple rules: don't make your enlargements over 600 pixels; if you do, make it an OPTION. That is, when the thumbnail is clicked show a 600 px image, and leave a link on the 600 px page for a larger one if you must.

Take the time to experiment. Depending on the number of colors required in an image, you can get away with a lot less - as low as "4" on a jpg scale from 1-10. Most programs don't give you an accurate preview of an open image. So use an original, jpg save it, then reopen it to see how much you're losing.

Don't automate this process to save time. Some need higher res, some can be saved at lower res. In my experience if you have to automate, don't shoot lower than half your scale - 5, if your jpg scale goes from 1-10. Shooting high can be just as costly: a jpg image at 8-10 can be as high as 300K, but you can save it at 4-6 and it's only 60 or 70K, and you barely lose any tones. Other images will suffer greatly and you will have to allow higher file sizes.

Quality of the original has a lot to do with it too. You need to find your sweet spot. :-)

No image should exceed 600 in height (keepin' it above the fold, y'all).

For thumbnails, I'm a "go bigger" type. Really, I think a vertically oriented thumbnail image should be 150 pix wide, and about 220 for a horizontal image.

I see thumbnail images all the time that are freakin' TINY! What's the point? Makes the first impression of your product a murky, fuzzy little thing to squint at. If shoppers are uninspired, they don't click on anything to see the lovely larger version, they just split.

Use the unsharp mask. Please use it on Web graphics that have been resized, pretty please. Yes it will add a K or two... BFD? I'm a shopper... tantalize me with clear, bright images that are a nice size to show some detail and I'll keep clicking around.

If you just have too many thumbnails on your page and the download time becomes an issue, split it up into "Gallery One", etc.

Bye! Bonnie

What do you mean by "res" here? (I know it's short for resolution)

But sharpening of some kind is usually essential in creating a product thumbnail image -- in fact, many times a smaller image looks better on the web if it is a bit over-sharpened, compared to what would be done to a print image. Here are some tricks I use:

Use L*a*b Color Space
1. Sharpen images by sharpening only the L channel in L*a*b color space, rather than staying in RGB. L*a*b separates all the light-to-dark information into the L channel and the other two channels hold only color information. It's in the light-to-dark information where most of the image's detail is held. By only sharpening the L channel, you avoid creating those distracting colored artifacts that sharpening can so easily make.

2. While you're in L*a*b space, try actually blurring those color channels, or some masked selection that excludes the obvious and high contrast edges of the image. Many times your eye cannot see any difference, even on a heavy duty blur of 2 pixels or more -- and you are helping to diminsh the final file size with this step.

Change Image Size by Steps
3. One key to a good looking final thumbnail is to do the over-sharpening BEFORE you change the image size, not after.

4. Take the image size changes in small steps rather than one big jump. For example, working with Sharpen Edges on the L channel:

1200px wide > Sharpen > 800 px > Sharpen > 500 px > Sharpen > 300 px > Sharpen > 180 px final width

5. For some images, sharpening of any kind may not be the best step -- a touch of added contrast in the L channel can do the job.

Keep a Healthy Color Gamut
6. Downsizing an image can also reduce the color gamut reulting in a washed out, lifeless appearance. So while doing the step-wise size reductions above, take a look after each step to note if the color is becoming dull. If so, boost saturation again.

7. One of the things that dimishes the full color gamut of an image is going into CMYK color space for print. Many times I get this kind of source file that was already prespared for a mail catalog, and it is very helpful to boost the eye candy factor of those files by increasing color saturation to restore some of the lost pop that CMYK removes.

Remember: GIF Many Be Better Than JPG
8. When dealing with small image files, don't assume it must be a jpg file just because the original source was a photo. Sometimes a gif will look sharper and still be a smaller file. I'm amazed at what the ImageReady algorithms can do with just a 16 color look-up table sometimes.

9. When you're creating a gif, then those darned jpg compression artifacts don't plague you. Even when they're not directly obvious to the eye, those comperession artifact color speckles can create the sense of blurriness in an otherwise sharp looking thumbnail.

Fix Artifacts Manually As a Last Step
10. Sharpening filters work, at least partially, by creating a higher contrast halo around an object. Sometimes this effect gets too pronounced. It's pretty easy to notice this and just go back into a masked off area and relace those haloed pixels with the original color.

Don't automate this process to save time. Some need higher res, some can be saved at lower res.....
What do you mean by "res" here? (I know it's short for resolution)

I probably should have used compression scale or compression factor, sorry. Some images you can save at jpg 1 or 2 (on a scale of 1-10) with little or no visible image decomposition, other you may need to save at 4, 5, 7 . . . it depends on the image. An automated process will make some images larger than they need to be and others will suffer in quality.

Sharpen Edges does less damage to the pixels that are visually "inside" object, and those pixels are normally NOT where the eye goes anyway.

Sorry tedster I disagree on the Unsharp Mask. :-) Sharpen Edges is an algorhythm that only operates on what the program "sees" as edges, which may or may not be what I need to have sharpened. Secondly, sharpen edges does not have any handles by which you can adjust the degree of sharpening, which may over-work one image's edges and not enhance another quite enough. Applying that filter twice usually has comical effects.

Lastly, truth be told - Sharpen Edges is actually a simplified preset of Unsharp Mask, as is Sharpen and Sharpen More. I cannot cite specific settings, but if you fool around with the Amount, Radius, and Threshold settings of Unsharp Mask, you will find a setting that perfectly emulates Sharpen Edges. The problem, and outstanding advantage, of Unsharp Mask is that you can set these three settings independent of each other and find just the right setting, or push it too far and wreck the image - just as you can for finding the right jpg compression for an image.

Unsharp Mask, like most of our digitized solutions, comes from a manual method we used to use in Old School printing prepress. We would make a tonal negative of one of the color separation plates out of focus, expose the film making a normal color separation, then lay the "mask" over the film and expose it again to make a final separation. The result was that where the blurred-edge negatives (hence "unsharp") met normal bright edges, the separations would receive a slight overexposure, closing up the halftone dot and producing sparkly highlights.

The digital version of this process was first introduced in high end drum scanning by altering the signal where sharp changes were found, and evolved into the algorhythms applied in Photoshop today (see Electronic Color Separation, R.K. Molla.)

Definately a lost art.

This is the ONLY time I use the Sharpen Edges preset. It's a bit of laziness, I suppose -- I can't be bothered to set the Unsharp Mask parameters every time, and it doesn't make any difference that I can see in the final small image. Every decrease in dimensions is just throwing most of that data away.

sharpen edges does not have any handles by which you can adjust the degree of sharpening,

In recent versions of Photoshop, you can go to the Edit menu and back off most filter effects by percentages, as long as you do this as the immediate next step.

Also, I should have put more emphasis on one of my points. When sharpening before reducing the image dimensions, over-sharpening is what I WANT. The visual garishness is gone with the next down-size, and it leaves in its tracks a sharper looking, but natural image. In fact, I can't get the same effect by sharpening the image when it's already at its target size.