Nothing is worse than opening a page online and having a monstrous image start to appear. Learning how to make images work well online can make a world of difference. Some of the technicalities of using images can be confusing, so I'll try to explain and give examples in the simplest possible way. This tutorial is not meant to be a comprehensive coverage of all aspects of image processing, but it will cover the basics of DPI, screen versus print, speed issues, color issues, file types and sizes, text images, clickable buttons, animations, scaling and cropping, and other commonly encountered image issues. I am afraid the sections are in no particular order, but they are highlighted so you can scan through and find what you need quickly!

DPI - What you see is not always what IS. DPI stands for Dots Per Inch. Only it does not always really work the way it sounds like it should. For example, my screen has a DPI (or resolution) of 96. It has a lot of dots in each inch. Most web pages use a resolution of about 72 or 75 DPI. That means that one inch of image on a web page will show up SMALLER on my screen than it sounds like it would. That is because on the web, each dot in the image equals one dot on the screen.

If you are viewing an image at 50% of its normal size, then the computer will only show you part of the dots. The rest of the dots are still there, you can think of them as being hidden behind the image! This is important, because some programs ALWAYS show you images at LESS than one dot to one dot.

It is also possible to save an image at a DPI of 300 or more - which you would only do if you wanted it to print out very nicely. Because when you print, the higher the DPI, the smoother it looks. On screen though, you only ever see one pixel to one pixel, so higher DPI only makes an image bigger, not better.

Sometimes people will save an image to postcard size, with 300 DPI. Then they put it into an email and email it, and the person on the other end gets this HUGE image! Because their computer shows it dot to dot, instead of as postcard size. It also takes FOREVER to email it, and to download it, because all those dots you DON'T see, are still there, and they have to be emailed right along with what you thought you were emailing.

This means that before you use an image on the web, or before you email it, you need to make sure that it is the right size. When it is in your image editing program, look and see if it says 50%, or 100%, or Actual Size in the top bar of the image window. Most of the time a program will tell you somewhere if it is showing it actual size or not. If it is not, then you need to scale it, or change the resolution to about 75 DPI.

Screen versus print - As I said, for printing, higher DPI makes the image look better, up to a point. The rule for print is half the DPI that the printer will use. 150 is about right for standard quality, 300 for good quality without the image getting too big. This information is only needed if you decide to make a PDF document that you upload for people to print, or if you want to make other printable documents for them to download. Then you use the print rule, not the web rule for the images.

Internet Image Speed - Big equals SLOWWWWW! If you have broadband, you may not mind large images, but over half the world still uses dialup, and it is courteous to provide a site that can be accessed easily by everyone. The rule online is:

The smallest Image that you need to show the detail and make the point.

This is a very important rule. And the same rule applies to Email. The only reason to EVER email a monster image is if you warned the person ahead of time, and if you are trying to send a desktop poster or something! Otherwise, the size of a snapshot, or smaller, is generally adequate for web display.

The size of an image is not measured by what you see. It is measured by the FILE size. 100 k is a larger sized web image. Anything over 200k is going to be annoying, and you'll lose your audience.

Three things affect image size:

The actual size and resolution - in other words, how many total pixels the image contains. Each of those pixels has to translate into data, which takes time to transmit.

The number of colors in the image. That means, did you make it with just 256 colors, is it grayscale, is it black and white, or is it a full color image with the potential for millions of colors? The more colors there are, the bigger the description for EACH color has to be in order to be able to describe them all in computer language. But, when you need a color image, you need a color image.

The third thing is the file type. The way you save the image can affect file size. We will tell you more about that in the part on file types.

So, ideally, you save the image in the smallest way that still gives you the image you need.

If you have large images that you need to show on a web page, it is best to show a thumbnail image (a small version), that links to the full sized image, so that people can choose whether or not they view the large one.

Colors and the Web - Images do not always show up the same colors on your computer as they do on other computers. Sometimes this is just because your monitor shows them differently than someone else's. But sometimes it is because their browser interprets the colors differently, or because they don't have the ability in their equipment to show as many colors as your computer can. There is a standard 216 color web safe palette that many people like to use for text and backgrounds. When you make your own logo, background patterns, or text images, you'll want them to coordinate with those colors. You don't necessarily have to use only those colors, but you will want to be sure that the colors you use will not clash!

JPEG, JPG, GIF, PNG, and BMP - Why you might want to use some, not others, and what the general rules are.

JPEG and JPG are the same thing. You see this as .jpg at the end of a file name. This the the most common image format online. It compresses an image, by removing bits of information that it thinks you won't miss. A high quality compression won't remove much information, and you won't notice a visual difference. A low quality one will remove a lot, which will make the file size much smaller, but it will also introduce inaccuracies into the image. These are hard to describe, but if you ever see them, you'll know! The image looks sort of distorted around parts of it. JPG is the best compression type for photos and blended images though.

GIF images are limited to 256 colors. When you save them, they convert, and each color that is not allowed in the palette is converted to the next closest color. That means that if you save a photo as a gif, it will look grainy, or "pixelated". Gif is best though for lineart, and cartoon style art, and for text images.

PNG is a file type that saves object oriented art. Object oriented art is also called vector graphics, because it describes shapes and the colors inside the shapes, instead of just storing pixels. PNG images are often used in HTML programs that work with layered objects. They work well for shapes, shading, transparencies, and for text images.

Text Images - When text is not really text. Web pages only reliably display about three or four different fonts. Sometimes you want something with a little character, and you get it by creating a graphic. If you just typed in the text into the HTML editor and set the font that way, it would not display right unless the site visitor just happened to have the same funky font on their computer. Creating an image with the text on it allows you to get it to look right on all computers. Plus you can do borders, drop shadows, distortions, fill it with a gradient, bevel the font, or apply any number of special effects to make it look distinctive. It looks like text, but it is an image. The logo at the top of this page is a text image.

Text images are often used for navigation links. This is a nice way to get a distinctive look to your site. The down side to it though, is that you have to be sure you keep a copy of the font on your computer (sometimes you can lose track of a font if you change computers), and you must create a new image each time you add a link, or modify a link. If you have limited time, or a limited budget, text links for your navigation will be much more efficient long term if you intend to add more pages. If your site is fairly static though (not much changes expected) and is not very large, images will not be too much work to keep up.

Clickable buttons - On faster computers, those rollover buttons are cool. You put your mouse on them, and they change appearance. Or you click on them and they look like you pushed them down. This is achieved by using two, or sometimes three, images for each button, and using Javascript to instruct the browser to switch them at the right point. Scripts to do this are readily available, you can find them by doing a Google search for JavaScript links. Scripts vary in features though, so be sure you understand just what the script you download will do, and then make sure you install it right.

The drawback to these nifty looking things is similar to the problem with text images as navigation links, only more so - you now have to track and update multiple images for each link. Plus, they take more time to download, so your page may not function properly on slower servers. How well they handle this issue is one of the differences in how scripts are written.

Animations - Simple animations are done with a program that creates GIF animations. They allow you to use the appearance of onionskin to trace, or to make a new frame and paste in the contents of the previous frame so you can alter it just a bit to create simple movement in your image. You can make it with as many frames as you like, and you can set the frame rate (how many times per second the image changes), and you can set how many times it loops.

The rules with animations are:

The faster the frame rate, the more distracting it is.

The simpler the animation, the sooner the viewer will tire of it.

Make sure the animation is justified by the effect - don't use one just because you CAN, make sure it actually serves a purpose.

Read the content of your page. If the animation distracts you out of the corner of your eye so that you have a hard time reading the page, then slow it down, or set it to loop just a few times, so it can catch their attention, then quit.

Scaling and cropping - Remember I said that you should use the smallest image necessary for impact and detail? You achieve that by scaling and cropping.

Cropping should be done on all images that are showing products, or other items that are there to show an example of something. Cut it as close as you can without cutting off any of what you are trying to show. Even one row of pixels can increase the file size measurably.

Next, scale the image down. You can scale it by pixels, by inches, or by percent. I often use a percent when I don't need the image to fit somewhere special. But when I need it to fit in a specific space, I will set the pixels for whichever measurement I need to fit - usually I only need it to fit either the height or width, not both. In most programs you can tell it to retain proportions, so if you type in just the width or height that you want, then click ok, it will automatically adjust the other setting.

Image Maps - An image map is when you use only a specified part of an image as a clickable link. Some programs make it easy for you to do this, some not. Some designers like using an image this way - a frequent usage is in US maps, where you can click on your state to go to a listing pertaining to that state.

Image slicing - Image slicing is another way of making a large image do lots of things. Many designers like using images around the edges of the site, or even over much of the page. Instead of having one huge image to download, they cut the image into pieces, and put the pieces into a table with cells the same size as the pieces. This is more or less complex, depending on the programs you are using to do it. The advantage is that when the images appear as a bunch of smaller ones instead of one large one, it appears faster to the visitor, even though it isn't. Disadvantage is that you will need lots of alt tags if you use a lot of text on the images, or some people won't know what the site is about. And lots of images still take lots of time to download.

Alt Tags - Some people choose not to view images if they have a slow connection, or small screen. Other times, for one reason or another, your images won't show up. An Alt Tag is text that appears instead of the image. Alt tags are especially important if the image has text on it, so that the message still gets through. Most HTML programs have a properties box for images, and you can type the alternate text in there to automatically generate an Alt Tag.

Patterns and Textures - Patterns and textures are a way of making a page look more attractive without using a huge image. This site uses patterns in the sidebar and title bars.

You can use patterns as an alternative to text images for your navigation bar if you want. Just put the pattern into the cell as the cell background. Our sites have many examples of this, because it is far easier to maintain than image links are, and we have so many sites to maintain that saving time is a real issue!

Low contrast images work best... in other words, images that do not have a lot of lights and darks both. You want one that is predominantly dark, or predominantly light for a background so you can put contrasting text over it.

Be sure that your pattern does not conflict with text that is on it - you should be able to easily read the text without distraction. If it does conflict, you can do one of three things to deal with it:

1. Make the text larger and bolder. This works. It is not the most professional looking solution, but it will do.

2. Put your image into an image editing program. Turn the contrast down, and the brightness up. This will wash out the image, giving it more of a tissue-paper look. You can tinker with the colors using other color settings, or the Levels settings to get the colors more intense if you like.

3. Create a table with a single cell where you want to put text over the pattern, and give it a cell background of a solid color that coordinates with the background. Set the cell spacing to a high number, like 20 or something to give it lots of space around it to show the pattern border. Then set the table width at 100%. Put your text into the table. You'll get a solid color text box, with a border around it. There are lots of ways to do this, and many settings you can play with to get a great look. This looks professional, and if your colors coordinate well, adds another design touch to your page.

HTML Image Handling - Your images do not get actually put into the pages. HTML code just instructs the browser to fetch the image from X location, and display it in Y location on the page. This means that your image must be uploaded to the correct place on the server, or it won't work. In general, keep your images in your website folder on your hard drive, inside an Images folder. Then when you upload your entire site, just upload the Images folder too.

Hot Linking - Hot linking consists of giving the URL for an image that is on someone else's server, to have it display on your page. You are, in effect, stealing their server power, along with their image. Some servers offer the option of turning off hot linking so that someone else cannot steal YOUR images. If you have any good ones, someone is liable to try. In fact, Google indexes your images along with your pages, and will display them when someone does an image search. Hot linking is rude, so don't do it. And if you want to protect yourself from it (someone will eventually get you), then read up on it by doing a Google search.

Scanned Images - Contrast, brightness, cropping and scaling. When you scan an image, it will scan best if the original image has good contrast and detail. You can often access controls (sometimes under an Advanced button) to adjust brightness and contrast as you are scanning. This can improve image quality greatly. Also, make sure you crop out all white space, and scale your image down to an appropriate size.

Scanning is a great way of getting images of small objects onto a web page. I have a friend who does engraving, and some of his plaques scan very nicely, with superior detail. There is no way he could get such exceptional quality with a low cost digital camera, but a cheap scanner does the job well. Watch out though, and be careful not to scratch the scanner bed!

Water Marking - Watermarking can be done with many image editing programs. People do this to hinder those who would either hot link to images, or steal them other ways. Watermarking puts a washed out logo, text, or other object on the page to mark it as yours.

Protecting Images - If you put images on the web, someone is likely to steal them. You'd be surprised at the things that people are looking for, and how they will use your stuff. Some will go so far as to all but duplicate your site. Now, if they are selling your products, that is one thing, but if they are competing with you, then they are violating your copyrights. The thing is though, there are so many sites out there, how will you ever know?

You can't really protect your images from someone who is determined to get them. But you can slow down some of the less technically inclined thieves, by preventing them from using the IE 6 Image Toolbar, and by stopping them from Right clicking. You can do a search at dynamicdrive.com, and look for scripts for "no right click", and "IE 6 Toolbar". You can find Javascripts to install on your page to limit those functions. It won't stop everyone, but it will make it harder.

Images are one of the great things about the web. They turn it from one huge book into a place of color, vision, and vivacity. Hopefully this page will give you a bit of a foundation to use them well on your sites.