This page describes how to:

• Include graphics in an HTML page
• Decide which type of graphic is best suited to a particular need
• Sizing graphics for best appearance
• Edit graphics for best appearance
• Position graphics in relation to text
• Understand Graphic Transparency
• Understand Graphic Animation (GIF89a)

Using Graphics

Graphic images can spice up a web page, but please NEVER FORGET that there will ALWAYS be people looking at your page with older browsers that don't support graphics, or with newer browsers with graphics turned off to save loading time on a slow modem connection.
Bottom line: always use the ALT tag.

To include a graphic in a web page, you use generally use an image (img) tag with at least a source (src) attribute:
-- <img src="./image.gif">

It's good practice to include height and width information, as well as the alternative text:
-- <img src="./image.gif" height="150" width="200" alt="Blinking Bear Image">

Graphic Type

Which type of graphic works best?

In general (and this is really general), use JPG for images with a "photographic" quality, and GIF for those with large areas of single colors.

There are some important exceptions to this rule of thumb. Depending on the size and number of colors in an image, one or another format will either look better or look as good with a much smaller file size. Also, if you want transparency or simple animation, GIF is the format to use.

PNG is a new format, supported only in more recent browsers, that incorporates qualities of both jpg and gif images.

Graphic Size

Basic rule of thumb: as small as possible.

What does that mean?

• Most importantly, file size. Consider things like whether you might be better off using a JPEG at high compression than a GIF, regardless of what we just said in the last section.
• Physical size should be reduced to the smallest dimensions that look good.
• Crop your images to only the most essential components; don't leave in lots of background that doesn't communicate anything.

Note the comparisons below:

JPEG at 24-bit color	GIF (Web) exported with 100% dithering	GIF (Web) exported without dithering	GIF (Adaptive) exported with 100% dithering
6156 bytes	7106 bytes	2031 bytes	8072 bytes

Editing Graphics

Editing graphics is part art and part craft. The art part involves an eye for design, color, balance, and layout. The craft part involves using as few colors as possible, resizing images while retaining quality, knowing how to use your tools, and knowing when to use clip art.

Here are a few tips for working with graphics in many graphics editors:

• Work in RGB mode and learn to use layers and color palettes.
• Use Web colors if you can (working in RGB mode limits ability to stay within Web color space).
• Remember, you're looking at what the user will see online -- What You See is What You Get (WYSIWYG) at 72 dpi.
• Use your guides and set units to pixels.
• Test effects on duplicate images or layers.
• Always save an "unflattened" version of your file.
• Learn to distinguish between Image Size and Canvas Size.
• Learn about mage modes and index color (when to use dithering, when not).
• Same mode with multiple images (copy/paste)
• Layers, layers, layers: use them, and learn to drag and drop
• Study your program's Save/Export options (not differences in gif export depending on mode)

"Sliced" images are images that have been broken apart and put into a table so you can work with one part or another of the image independently. These are especially popular of "rollover" menus. Pick here for an example of image slicing.

Placing Graphics Near Text

For some reason, beginners seem to have a lot of trouble with this. It's really not difficult, but you have to understand what the alignment options mean.

Graphic aligned to top (of tallest item on the line). Notice how it's related to the text it's associated with.	Graphic aligned to bottom (bottom of image and baseline of current line). Notice how it's related to the text it's associated with.
Graphic aligned to middle (middle of graphic aligned with baseline of current line). Notice how it's related to the text it's associated with.	Graphic aligned to absmiddle (middle of image and middle of current line). Notice how it's related to the text it's associated with. Is there a difference between this and middle?
Graphic aligned to left (image at left margin, subsequent text wraps around right side of the image). Notice how it's related to the text it's associated with.	Graphic aligned to right (image at right margin, subsequent text wraps around left side of the image). Notice how it's related to the text it's associated with.
Graphic aligned to texttop (same as top). Notice how it's related to the text it's associated with.	Graphic aligned to baseline (same as bottom). Notice how it's related to the text it's associated with.
Graphic aligned to absbottom (bottom of image and bottom of current line. Notice how it's related to the text it's associated with. Can you figure out how this is different from baseline or bottom?	Graphic not aligned at all. Notice how it's related to the text it's associated with.

Graphic Transparency

You have transparency when you look at a graphic and see the background page showing around or through 'holes' in the otherwise rectangular image. Here, you are actually 'seeing' the 'blank' space has been set to "transparent."

There are a couple of methods for making a transparent GIF. Programs like the Graphics Converter and PaintShop let you pick a color from the palette to set as transparent.

See the table below and your graphics editing package for more information.

White layer transparency	Black layer transparency	Default transparency

Animated Graphics

An animated GIF is a series of images (Frames or CELS) 'compiled' together into a single file with a delay (D) between frames (usually in hundredths of a second) and a repeat or loop value of 1 to continuous.

To make animated GIFs you need:

1. a paint program that saves to GIF format (PaintShop is a popular choice)
2. a program to compile the GIF images into a single animated GIF (AnimationShop or GifAnimator work well)

There are several things to keep in mind before you get started...

• A GIF animation that is too large will display as a slow running slideshow (which may be something usable in itself). For best results in achieving a true 'animated' effect, keep the image small.
• GIF is a 256 color or less format. While the programs used to compile the animation will most likely have the ability to reduce the images to a common 256 color palette, if you plan ahead and start with and stick to a 256 color palette, your results will be much better.
• As you create the images you will find it easier to remember (when it comes time to compile) if you give the images file names in numerical order. Such as image01.gif, image02.gif, image03.gif, etc.

So, the process is:

1. create your starting image
2. save the image keeping the numerical order
3. duplicate the image, make a small change
4. save the image keeping the numerical order

Here's a cool animated GIF link: http://www.agag.com/index.html

Image Maps

Although server-side image maps are useful, we'll concentrate on client-side image maps because of their ease and speed.

An image map allows you to select different portions of a graphic to call links to other pages.

Here's all you need to create a client-side image map:

1. an appropriate graphic (here's one you can use for a simple example)
   
2. a "usemap" attribute inside the IMG tag
3. a separate "map" tag in the document
4. one or more "area" tags inside the map tag

A Closer Look

1. The graphic - remember that file size can be an issue for this example, mapsample.gif
2. USEMAP attribute names the MAP tag that the image map should use.

   <IMG SRC="mapsample.gif" ALT="Sample image map graphic" ALIGN=TOP WIDTH="100" HEIGHT="100" USEMAP="#twe5035map" BORDER="0">

3. MAP tag
4. AREA tags within the MAP tag

   <MAP NAME="twe5035map">
   <AREA SHAPE="RECT" COORDS="10,14,41,43" HREF="yellow.html">
   <AREA SHAPE="RECT" COORDS="50,16,95,35" HREF="blue.html">
   <AREA SHAPE="CIRCLE" COORDS="66,57,17" HREF="green.html">
   </MAP>
   

Extra (optional) information:

You're not restricted to just rectangles and circles in an image map. You can draw map "hot spots" of practically any shape.

For an example of how to do that, take a look at this file.

Hands-on.

1. Start your text editor and create a basic web page with a title and some text.
2. Capture and save the animated graphic blink3.gif (below) in your working directory on your computer.
3. Link the blink3.gif file into your page.
4. Use Netscape or IE to see if the links work.
5. Now, add the picture2.gif (below) graphic to your page, and use an image editor -- for example, the Graphics Converter program (on the Macs) or PaintShop or PhotoShop (on the PCs) -- to set the teal background of the image to be transparent.

blink3.gif

picture2.gif