1. Resolution, measured in dpi or dots per inch. A picture that is 300 dpi will be bigger than one that is 72 or 96. 300dpi is the minimum for something to print nicely. All that a monitor will display is 96 dpi so no picture ever needs to have a higher dpi than 96.

72-96 is low resolution.

300 and up are high resolution.

2. Physical size on the screen (dimensions measured in pixels). An image that practically fills your monitor/screen space (say 1000×700 pixels) will be bigger (in kb) than if you make that same picture 500×350 or whatever.

3. How many colors in the image.  An image with a lot of colors will be bigger in kb than an image with fewer colors. So, if you have a very colorful product, the best background would be something solid and in a neutral tone. Changing the text in the image below from red to white added 10 kb to the image size.

Don’t forget that there are still people out there who have smaller monitors. And a lot of us don’t maximize the windows on our computers. Right now I can see Firefox (which I prefer to Internet Explorer) and Dreamweaver (my web design program) and Eudora (my mail program) and my favorite image editing program: Fireworks Creative Suite 3. Rapidly prototype and design for the web. Order Now!

I like to see what all I have open cause it’s kind of my reminder of things to do. So even though I have a 25″ high definition monitor, I don’t like websites that have giant pictures where I have to maximize the window to see the whole website.

Of course, most of my clients are trying to sell products online. So I’m always thinking of how best to do that. And the hardest thing for clients (including my daughter) to remember is that a website should be designed for the buyer. It’s all about making it easy for them to find what they want quickly. Naturally, the website must be visually appealing, but the main person to please is your customer, not you.

More on that later.

So if you expect to sell something on your website, you’d better have outstanding pictures of it.   That doesn’t mean a fuzzy picture that’s so small you can’t tell if it’s a purse or an armadillo.   It means in focus and preferably with a white or solid background.

Of course, if you can afford a professional photographer, even better. If you can’t, here are some tips:

1. Use a tripod to reduce shake.

2. If you don’t have bounce screens for reflected light (who of us does?), the best lighting is outdoors on an overcast day, i.e. very bright light, but no shadows.

3. Fill the frame with the item.   No one cares about anything but the product so why take pictures of what’s on either side of it?    Similarly, no one cares about your dirty laundry on the floor behind your product, so look at everything that’s in your composition before clicking that shutter.

4. If you do take pictures outdoors (on a covered porch, for instance), do it between 10 a.m. and 4 p.m. Otherwise, your pictures will have an unnatural reddish tint due to the angle of the sun.

5. If you must take pictures indoors, use a flash for “fill.”   Often, using the “red-eye” setting will work for this. Do not rely on incandescent lighting.   It’s too dim and throws off the color.

6. Edit your images appropriately for your website, whether that means cropping drastically or cutting out the background or change the dpi.    In a worst case scenario, you might actually need to read the instructions/help files in your image editing program, such as Fireworks.  (Sarcasm intended)

7. Save the original image before you do anything to it.  Then save a separate copy that you’ve cropped and resized to 96 dpi. Monitors do not show higher resolutions so there is no point having an image that is 300 dpi. It will just take up more file space and take longer to load.

This is a great article about protecting your images online. In short, you need to learn how to protect images in image editing software. Or pay me to do it.