1. How much space does it take up in your computer or on the server?   That’s the file size and it’s measure in kilobytes or megabytes – preferably kilobytes.
2. What are the dimensions of the image, measured in pixels?  If you have a picture that is 800 pixels high and someone with a very old monitor is looking at it, they probably won’t be able to see all of it because their monitor probably only shows 800 pixels across and 600 pixels from top to bottom.   More modern monitors are usually at least 1400 wide by 1050 tall.    High-definition, widescreen monitors really throw a kink in the works.   Here’s one possible display:  1280 x 720.  So, a web page that displayed completely in a monitor set at 1400×1050, will only show the top 72% or so on a widescreen monitor.
3. Quality, also called compression.   Assuming you are primarily using the jpg format, the higher the quality, the less jagginess you’ll see in an image.  There is a price to pay, though.  The higher the quality (less jagginess), the bigger the file size.  That’s why you should always preview an image.  If your image editing software has a “Save as web quality” option, it’s probably fine.  But if you aren’t satisifed with it when you look at your website, read your help files to see if you can modify that setting so that “web quality” doesn’t compress the image so much.   Jagginess is never associated with or seen on very high end websites. 

That’s all for today.  There are other image articles here you might learn from, and I do try to say things different ways since we all comprehend the world in slightly different ways.  If you’re my client and you still don’t understand, tell me what image editing software you use and I’ll try to give you some personalized help.

Adobe Photoshop Elements is a simplified version of the image editing program that professionals use and has everything the average website owner would ever need.

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.

Having multiple windows visible reminds me what I need to do.   So even though I have a 25″, high definition monitor, I don’t like websites with giant pictures where I have to maximize the window to see the whole page.

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.