Chapter 8

A Picture Is Worth a Thousand Clicks:
Working with Images

• Images: Some Semi-Important Background Info
  • No, Images Aren't Text, But That's Okay
  • Graphics Formats: Can't We All Just Get Along?
  • How Do I Get Graphics?
  • Converting Graphics to GIF Format
• The Nitty-Gritty, At Last: The <IMG> Tag
• Good Uses for Images on Your Web Page
• Aligning Text and Images
• Handling Graphically Challenged Text Browsers
• Images Can Be Links, Too
• The Least You Need to Know

You've probably seen those TV ads proclaiming in no uncertain terms (true hipsters are never uncertain about their hipness) that "image is everything." You know they couldn't put it on TV if it wasn't true (!), so you need to think about what kind of image your Web pages present to the outside world.

You've seen how tossing a few text tags, a list or two, and a liberal dose of links can do wonders for drab, lifeless pages. But face it: anybody can do that kind of stuff. If you're looking to make your Web abode really stand out from the crowd, you need to go graphical with a few well-chosen images. To that end, this chapter gives you the ins and outs of images, including some background info on the various graphics formats, tags for inserting images, how to turn an image into a hypertext link, and lots more.

Images: Some Semi-Important Background Info

Before you get down to brass tacks and start trudging through the HTML tags that'll plop pictures onto your pages, there are a few things I need to discuss. Not to worry, though; it's nothing that's overly technical. (That, of course, would be contrary to Idiot's Guide bylaw 4.17c: "Thou shalt not cause the eyes of thy readers to glaze over with interminable technical claptrap.") Instead, I'll just look at a few things that'll help you choose and work with images, and that should help make all this stuff a bit clearer.

No, Images Aren't Text, But That's Okay

First off, let me answer the main question that's probably running through your mind even now about all this graphics rumpus:

If the innards of a Web page are really just text and HTML tags, then how in the name of h-e-double-hockey-sticks am I supposed to get an image in there?

Hey, that's a darn good question. Here's the easy answer: you don't.

Huh?

Yeah. As you'll see later on (in the section "The Nitty-Gritty, At Last: The <IMG> Tag"), all you'll really be doing is, for each image you want to use, adding a tag to the document that says, in effect, "Yo! Insert image here." That tag specifies the name of the graphics file, so the browser just opens the file and displays the image.

Well, I should say that the browser probably displays the image. Different browsers handle graphics in different ways, so you need to make allowances:

Some browsers (such as Lynx) are ham-fisted when it comes to graphics, so they display only text. There are things you can do to make life easier for the users of these browsers, however, and I'll talk about them in the section titled "Handling Graphically-Challenged Text Browsers."

If the browser knows how to handle an image, it displays it in the Web page without kicking up a fuss. These kinds of graphics are called inline images, and they're the preferred kind for most Webmeisters. As long as you use the right type of graphics format (which I'll talk about in the next section), most modern browsers display your graphics inline.

If the browser balks at your image, you have to hope the reader has set up her browser to use some kind of graphics program to display the image in a separate window. These are called external images, and they're a poor substitute for inline images. Again, you can avoid this fate by using the right kinds of graphics.

Graphics Formats: Can't We All Just Get Along?

Some computer wag once said that the nice thing about standards is that there are so many of them! Graphics files are no exception. It seems that every geek who ever gawked at a graphic has invented his own format for storing them on disk. And talk about alphabet soup! Why, there are images in GIF, JPEG, BMP, PCX, TIFF, DIB, EPS, and TGA formats, and those are just off the top of my head. How's a budding Web page architect supposed to make sense of all this acronymic anarchy?

Well, my would-be Web welders, I bring tidings of great joy. You can toss most of that graphic traffic into the digital scrap heap, because the Web has standardized on just two formats, one of which is used in 90 percent of all Web imagery! Oh happy day!

The format that Web creators use almost exclusively in Web pages is GIF (which, just so you know, stands for Graphics Interchange Format). All graphical browsers are fully GIF-aware, so they display these images within a Web page without getting all hot and bothered. This means you can include GIF files in your Web pages willy-nilly, safe in the knowledge that the vast majority of your readers will be able to see the pics in all their glory.

The other format that's becoming increasingly popular on the Web is JPEG (which gets its name from the Joint Photographic Experts Group that invented it; gee, don't they sound like a fun bunch of guys to hang out with?). The main advantage of JPEG files is that, given the same image, they're smaller than GIFs, so they take less time to download. Unfortunately, only a few browsers (such as Netscape and Mosaic) know how to handle JPEG images inline, so you're probably better off sticking with GIFs for now. The only exception is for digitized photographs and other high-quality images. The GIF format doesn't display these graphics very well, so JPEG is almost always a better choice.

How Do I Get Graphics?

The text part of a Web page is, at least from a production standpoint, a piece of cake for most folks. After all, even the most pathetic typist can peck out at least a few words a minute. Graphics, on the other hand, are another kettle of digital fish entirely. Creating a snazzy logo or eye-catching illustration requires a modicum of artistic talent, which is a bit harder to come by than basic typing skills.

However, if you have such talent, then you're laughing: just create the image in your favorite paint program and save it in GIF format. (If your program gives you several GIF options, use GIF87 or, even better, GIF89, if possible. If the software doesn't know GIF from a hole in the ground, I'll show you how to convert the file in the next section.)

The non-artists in the crowd will have to obtain their graphics goodies from some other source. Fortunately, there's no shortage of images floating around. Here are some ideas:

Many software packages (including Microsoft Office and most paint and illustration programs) come with clip art libraries. Clip art is professional-quality artwork that you can freely incorporate in your own designs. If you don't have a program that comes with its own clip art, most software stores have CD-ROMs for sale that are chock-full of clip art images.

Grab an image from a Web page. When your browser displays a Web page with an image, the corresponding graphics file is stored temporarily on your computer's hard disk. Most browsers have a command that lets you save that file permanently. Here are some examples:

Netscape-Right-click on the graphic and choose Save this Image as from the menu that appears.

NCSA Mosaic-Right-click on the image, choose Save Image from the menu, and then choose Remote Site Format.

Internet Explorer-Right-click on the graphic and then select Save Picture As from the shortcut menu.

Take advantage of the many graphics archives on the Internet. There are sites all over the Net that store dozens, even hundreds, of images. I'll give you some specifics in Chapter 13, "Some HTML Resources on the Web."

If you have access to a scanner, you can use it to digitize photos, illustrations, doodles, or whatever. Alternatively, if you have a fax modem and fax software, and you don't mind a black and white picture, you can send yourself an image as a fax. You capture the fax using your software and then load the image into a graphics program for editing.

Use the images that come with this book. I've included a few small GIFs on this book's disk that I hope will come in handy. The following screen displays a few of these graphics along with their filenames.

Some of the sample images that are included at no extra cost on this book's disk.

Converting Graphics to GIF Format

What do you do if you've got the perfect image for your Web page, but it's not in GIF format? No sweat. There are plenty of programs out there that do nothing but convert graphics files from one format to another. In fact, I've included one of them on this book's disk. It's called LView, and it does the job as pretty as you please. Here's how:

1. Start LView. (If LView isn't installed yet, see "The Goodies on the Disk," at the back of the book for instructions.) If you get a warning telling you that the current graphics mode is not suited for 24-bit images, nod your head knowingly and select OK to continue.
2. Pull down the File menu and select the Open command to display the Open File dialog box.
3. In the List files of type box, select the graphics format that the file currently uses. For example, if the file is in BMP format, you select Windows (*.bmp, *.dib).
4. Find the file you want to convert, highlight it in the File name list, and then select OK. LView opens the file.
5. Select the File menu's Save as command. (If the image is small, you might see only the "F" of the File menu. In this case, you can still pull down the menu normally, or you can maximize the window to get the full menu names.) LView displays the Save File As dialog box.
6. In the Save file as type box, select the GIF 87a (*.gif) option.
7. Enter a name for the file in the File name text box. (Make sure you keep the ".gif" extension. Also, if you're running Windows 95, you can avoid confusion later on by entering the name entirely in lowercase letters; don't include any spaces in the name, either.)
8. Select OK. LView saves the graphic in GIF format.

The Nitty-Gritty, At Last: The <IMG> Tag

Okay, enough of that. Let's get the lead out and start squeezing some images onto our Web pages. As I mentioned earlier, there's an HTML code that tells a browser to display an image: the <IMG> tag. Here's how it works:

<IMG SRC="filename">

Here, "SRC" is short for "source" and filename is the name of the graphics file you want to display. For example, suppose you have an image named logo.gif. To add it to your page, you use the following line:

<IMG SRC="logo.gif">

Let's check out a real world example. I'm constantly tinkering with my home page, modifying existing pages, pruning dead wood (I do a lot of that!), and adding new stuff. Until my new pages are ready, however, I don't subject my visitors to them. Instead, I just display a generic page (I call it the "Procrastination Page") that tells people the new module isn't quite ready for prime time just yet.

If you'd like something similar for your Web pages, here's some HTML code that'll do the job (look for the file named UNDERCON.HTM on the disk):

<HTML>
<HEAD>
<TITLE>Detour!</TITLE>
</HEAD>
<BODY>
<IMG SRC="constru1.gif">
<H2>Web Work In Progress!</H2>
<HR>
Sorry for all the mess, but I haven't quite got around to
implementing this section yet. Hopefully I'll have everything
up and running real soon.
<P>
<A HREF="homepage.html">Click here to go back to my home page.</A>
</BODY>
</HTML>

A Web page to use as a substitute for pages you're still slaving away at.

To emphasize the "work in progress" feel, this page includes a small graphic (constru1.gif) that says "Contents Under Construction" and shows a construction worker in action (see the next screen). Note, too, that the page includes a link that gives the reader an easy way to get back to your home page. (In the <A> tag, make sure you change "homepage.html" to the appropriate name of your home page; see Chapter 7 if you need a refresher course on this link stuff.)

Good Uses for Images on Your Web Page

Images are endlessly useful, and they're an easy way to give your page a professional look and feel. Although I'm sure you can think of all kinds of ways to put pictures to work, here are a few suggestions:

A company logo on a business-related page
Graphics from an ad
Drawings done by the kids in a paint program
Charts and graphs
Fancy-schmancy fonts
Your signature
Using a graphic line in place of the <HR> tag
Using graphic bullets to create a better bulleted list

You might be wondering how to do that last item. Well, there are a number of ways to go about it, but the one I use is to create a definition list (see Chapter 6) and precede each item in the list with a graphic bullet. For example, the file redball.gif on the disk is a small, red, 3-D sphere. To use this as a "bullet," you put together a definition list, like so:

<DL>
<DD><IMG SRC="redball.gif">First item
<DD><IMG SRC="redball.gif">Second item
<DD><IMG SRC="redball.gif">Third item
</DL>

Aligning Text and Images

In the "Work In Progress" example you saw earlier, the image appears on a line by itself. However, that only happened because I used a heading tag-<H2>-immediately after the <IMG> tag, and heading tags always start on a fresh line. However, if you insert an image inside regular page text, the browser will display the image and the text on the same line. (Now you know why images that appear in a Web page are called inline images.)

This is all very reasonable, but you might run into problems with tall images, because the bottom of the image is aligned with the bottom of the line. If you prefer your text to appear at the top of the image, or even in the middle, the <IMG> tag has an extra ALIGN attribute that you can use. Here's how it works:

<IMG SRC="filename" ALIGN=TOP|MIDDLE|BOTTOM>

Here, |MIDDLE|BOTTOM means you use either TOP, MIDDLE, or BOTTOM to specify the alignment you want. The following HTML listing (ALIGN.HTM) gives you a demo (the next screen shows the results):

<HTML>
<HEAD>
<TITLE>Aligning Text and Images</TITLE>
</HEAD>
<BODY>
<IMG SRC="constru1.gif" ALIGN=TOP>This text appears at the top of the
 image.
<P>
<IMG SRC="constru1.gif" ALIGN=MIDDLE>This text appears in the middle of
 the image.
<P>
<IMG SRC="constru1.gif" ALIGN=BOTTOM>This text appears at the bottom of
 the image.
</BODY>
</HTML>

The <IMG> tag's ALIGN options.

Handling Graphically Challenged Text Browsers

As I mentioned earlier, some browsers are text-only and wouldn't know how to display a graphics file if it bit them in the face. Instead, they usually just display [IMAGE] in the spot where your <IMG> tag appears, and then they wash their hands of this whole graphics rigmarole.

That looks pretty ugly (and not particularly descriptive, either), so you should have mercy on the image-deprived users of such browsers. How? Well, the <IMG> tag has an extra ALT attribute you can throw in to provide some alternative text that appears in place of the image. Here's the general format:

<IMG SRC="filename" ALT="[alternative text]">

Here, alternative text is whatever text you want to use instead of the graphic. For example, if you have a picture of your hometown in your page, you can display [A lovely pic of my hometown] (it's traditional to enclose these things in square brackets) with the following line:

<IMG SRC="hometown.gif" ALT="[A lovely pic of my hometown]">

In most cases, though, it's best not to trouble text-only Web surfers with descriptions of images. So most Web authors display a blank instead of a description, like so:

<IMG SRC="hometown.gif" ALT=" ">

Images Can Be Links, Too

You might think that Web page images are all show and no go, but I assure you they can "go" with the best of them. Specifically, I mean you can use them as hypertext links, just like regular text. The reader just clicks on the image, and he/she goes off to whatever corner of the Web you specify.

Designating an image as a hypertext link is not a whole lot different from using text (which I covered in the last chapter). You use the same <A> tag, but you insert an <IMG> tag between the <A> and </A>, like this:

<A HREF="URL"><IMG SRC="filename"></A>

For example, it's often a good idea to include a link back to your home page from all of your other Web pages. This makes it easy for your readers to start over again. Here's a document (BACKHOME.HTM on the disk) that sets up an image of a house as the link back to the home page:

<HTML>
<HEAD>
<TITLE>Images Can Be Links, Too</TITLE>
</HEAD>
<BODY>
Click on this house <A HREF="homepage.html"><IMG SRC="house.gif"></A> 
to return to my home page.
</BODY>
</HTML>

The next screen shows how it looks. Notice how the browser displays a border around the image to identify it as a link. If you prefer not to see this border, add BORDER=0 to your <IMG> tag:

<IMG SRC="house.gif" BORDER=0>

An image masquerading as a hypertext line.

The Least You Need to Know

This chapter showed you how to turn your Web pages into veritable works of art by adding an image or two. Here's the Reader's Digest condensed version of what happened:

Inline images appear directly in a Web page. External images can only be viewed by using a separate graphics program.

There are billions and billions of graphics formats floating around, but only two are used extensively on the Web: GIF and JPEG (and the vast majority of sites use GIFs).

Other than your own artistic endeavors, graphics are available from clip art libraries, other Web pages, Internet archives, via scanner or fax, and on the disk that accompanies this book.

If you have a non-GIF graphic, use the LView program that comes on the disk to convert it into GIF format.

To add an image to your Web page, include the <IMG SRC="filename"> tag, where filename is the name of the graphics file.

To make an image a hypertext link, use the <A> tag and replace the usual link text with an <IMG> tag: <A HREF="URL"><IMG SRC="filename"></A>.