ell-used graphic images make a site more interesting, add information, and help with navigation. With a little forethought, you can use images that download quickly, display quickly, look good, and add value to your site. On the flip side, too many images used badly can also make your site a big, unwieldy bandwidth pig.

You add images with the image tag. The image tag tells the browser to display a specific image at this point in the page.

The location of the image is described by its URL. For example, this code tells the browser to insert an image called “earth.gif” into the file. The other attributes in the image tag describe how to place the image on the page and describe what text to display if the image doesn’t load or the reader has turned off images in the browser. The image tag is highlighted in color to make it stand out:

Hello World!

How Are You?

The example displays like this in a Web browser:

Hello World!
How Are You?

Image Tag AttributesThe image tag has six often-used attributes:

1. src. Source. This is the location and name of the image you are using. As with anchors and links, use the full URL if the image is on another server. Use relative URLs if it is within your own site. Remember that the URL must begin and end with quotes.
2. align. Alignment. You can align the image to the right or left side of the page. You cannot center it. (If you want to center it try this trick: put the image between start and end center-aligned paragraph tags.)
3. width. Width of the image in pixels.
4. height. Height of the image in pixels.
5. border. Thickness of the border. in pixels, around the image. Use the border command only when the image is also the anchor for a link.
6. alt. Alternate text. This is the text that appears in a reader’s browser if the reader has his or her image loading turned off or if the browser doesn’t display graphics. You should always include some brief alternate text. Remember that the text must be surrounded with quotation marks.

The Importance of Width and Height
Do you need to include the width and height of your images in the image tag? No, technically you don’t — but you should. Specifying image width and height lets the browser layout the page and begin displaying the text while it is still downloading the image. The reader can start using the page immediately instead of waiting for all the images. This increases perceived speed and makes your readers feel like your site is fast.

Specify image size in pixels. You can use your graphics program to see the size of the image in pixels. Additionally, some editing programs, such as BBEdit, will automatically measure your image and insert the height and width in the tag.

Save the image file at the exact size you want to use it in your page. Although most browsers will scale the image if the image file and your specified size are different, rescaling consumes computer processing time. Picture the poor reader out there with an older PC and too-little RAM watching the computer go chug-a-chug-a-chug-a as your image rescales on his or her screen. It is not a pretty sight.

Using an Image as a Link
In addition to using them as visual addition to your page, you can use your images as links to other information.

This is easy to do. Instead of a using a piece of text as the linked item within the anchor tags, you just use the image.

The following example shows how to link to the file “06a-gofrogs.html” using both a text link and an image link. First, we’ll create a text link, like this:

Frogs are your friends.

Look at the frog!

Ribbet. Ribbet.

which displays like this in a Web browser:

Frogs are your friends.
Look at the frog!
Ribbet. Ribbet.

In the next example, the link tag is exactly the same, but it surrounds the image tag instead of a line of text (the image tag is highlighted in color to make it stand out here):

Frogs are your friends.





Look at the frog!

Ribbet. Ribbet.

It displays like this in a web browser:

Frogs are your friends.

Look at the frog!
Ribbet. Ribbet.

In the first example clicking on the text “look at the frog!” brings up the frog page. In the second example clicking on the frog picture brings up the frog page.

Optimizing Your Graphics
Optimizing your graphics reduces the time it takes your page to load into your reader’s browser. There are a number of ways you can use an image, maintain its quality, and trim your bandwidth?all at the same time.

Tip #1: 72-dpi Is Plenty
If you come from the print world, you probably save your image files at 300 dpi resolution?at the bare minimum. But the web isn’t print and the computer screen isn’t a printed page, so toss away those habits. The first way to trim file size is to save the file at 72 or 100 dpi. This is more than ample for web viewing.

Tip #2: File to Size
To get the fastest display results, you’ll want the image file you insert into your Web page to be the exact height and width you are using in the web page. Don’t let your reader’s computer have to do the painful resizing calculations.

Oh, and don’t go into overkill mode when it comes to display size?use images at a height and width that works on your page, not the hugest size you can cram onto a computer monitor. Larger display sizes make larger file sizes?and longer download times.

Tip #3: Select the Best Graphic File Format
Different types of graphics work best with different file formats. Here are a few rules of thumb to make your graphics more web-friendly:

• If the image is photo-realistic, use a .jpeg format.
• If it has large areas of solid color, .gif format is best.
• If it’s a combination, try both alternatives and see which gives you the best fit in terms of size vs. quality.

JPEG Images
JPEG format was created for photorealistic images, images that have a great many variations of color. Its compression technology analyzes the pixels and drops out some of them in order to simplify and reduce the file size. JPEG images are 24-bit color; you won’t need to select a palette type for them.

The Quality Setting option in Photoshop gives you several ways to save a .jpg formatted file. You can select “poor”, “medium”, or “highest”. The highest setting gives you the most quality, but also the largest file size. We’ve found that medium is usually fine for most images destined to be viewed on a computer screen. However, avoid the poor setting. It does produces the smallest file, but the final images loses too much quality.

GIF Images
GIF format was uses something called the LZW compression algorithm. This process looks at the pixels in a row and counts how many are the same color. Instead of mapping each individual pixel, it converts the pixel information into a mathematical notation, dramatically reducing file sizes for graphics that contain large amounts of the same color.

The GIF format saves color in a maximum of 8-bit mode, which means a GIF file can contain only 256 different colors. When you save a GIF file, you are asked to select the palette to use when mapping and displaying the colors.

When creating a .gif file, your final image size and quality are determined by how intelligently you make your indexed conversion choices. Indexed conversion is the process of changing the image from 24-bit color into a indexed palette, which is the table of colors used by GIF images.

With indexed conversion, the first thing to worry about is the image’s bit depth. This determines how many colors are used in your final image as well as how much storage and display space the file’s color index uses. Play with this setting using the undo feature of Photoshop to determine the lowest number of colors you can use with without sacrificing image quality. We find that most images can be easily brought down to six or seven bits.

The next important factor is the type of palette you use. Ok, we’ll admit that we’re image snobs. We are looking at the web on truecolor displays and therefore want as accurate a color representation as possible. An adaptive color palette seems to work best for us. This give the greatest possible final image across the widest range of platforms. Other palette choices are not are flexible across platforms. Other people advocate using the web palette, which is the set of colors all platforms can display.

Your next decision is whether or not to use dithering. Dithering is a way of simulating a color by using alternating pixels of different colors. For example, dithering might simulate purple by putting a blue and red pixel next to each other. Dithering makes a smoother image, with fewer color bands. Experiment with either diffusion dithering or none to determine which works best with your particular image. Remember, though, that dithering increases file size.

There is no single solution for all images. The best way to learn how to balance file size and image quality is to play with your images in PhotoShop (or in whichever image editing program you use); try saving them in different ways and compare the results. By doing this, you’ll start to get a feel for which combinations work for your set of images.

Here are some sample images showing different file types and final sizes.

Tip #4: Reality Check
One more important factor for designers, especially, to remember is that your eye is much more critical of your final product than your reader’s is. Sometimes you can spend too much time trying to make things absolutely perfect. Try to find the best compromise of quality versus file size.

Using the Break Tag with Images

When working with images, you sometimes want the text to follow below the image rather than run alongside the image. The break tag
lets you do this.

Usually the break tag stands on its own without any attributes. However, the tag does offer one attribute, clear.

Clear tells the browser to display the content which follows it below the lowest part of the image. By following an image tag with a break tag that has a value in the clear attribute, you ensure that the text that follows the graphic appears underneath the graphic rather than beside it.

The clear attribute has three possible values:

1. clear=left tells the browser to look to the leftmost side of the page and drop the text below the item there.
2. clear=right tells the browser to look to the rightmost side of the page and drop the text below the item there.
3. clear=all tells the browser to look to all across the page and drop the text below the lowest item on either side.

The first graphic in the following example does not have a break tag. The second one uses the break tag with the clear attribute value set to all,
.

The planet Earth is a small blue sphere, but one we hold dear. That much is clear!

The planet Earth is a small blue sphere, but one we hold dear. That much is clear!