by Eric Ladd
It's unlikely that the Web would be so popular if it didn't support graphical content. Graphics give Web pages visual appeal that keeps users surfing for hours. Graphics are also essential for people designing and posting Web pages, as graphics often convey a message more powerfully than text alone.
Placing an image on a Web page is a relatively easy matter-there's only one HTML tag you need. This tag also has many attributes other than placing images on Web pages. Intelligent use of images requires planning, so you need to think about what idea you want to put forward, how to best represent the idea graphically, and what format is most appropriate for the graphic. This chapter introduces you to the two major graphic storage formats that the Web supports and how to place these graphics on pages using the <IMG> tag.
Technically, Web graphics can be stored in any format, but only
two formats display inline through today's popular graphical browsers:
GIF and JPEG. Other graphics formats have to be displayed by a
helper application, launched by the browser when it detects a
format it can't display.
| NOTE |
Microsoft Internet Explorer 3 supports the inline display of Windows Bitmap (.Bmp) graphics in addition to GIFs and JPEGs. |
GIF (Graphics Interchange Format) was originally developed for users of CompuServe as a standard for storing image files. The GIF standards have undergone a couple of revisions since their inception. The current standard is GIF89a.
Graphics stored in GIF are limited to 256 colors. Because full-color photos require many more colors to look sharp, you shouldn't store full-color photos as GIFs. GIF is best used with line art, logos, and icons. If you do store a full-color photo as a GIF, it reduces to just 256 colors and will not look as good on your Web page.
In spite of a limited number of colors, the GIF 89a standard supports the following three Web page effects:
Transparent GIFs are very popular and many of the graphics programs
available today support the creation of transparent GIFs. On the
PC, LView Pro is one program that creates transparent GIFs. PhotoGIF
is a plug-in to Photoshop that allows you to create both transparent
and interlaced GIFs. Both UNIX and Windows users can use a program
called Giftrans to create transparent GIFs from existing images
(see Figure 8.1). You can download all of these programs from
http://www.shareware.com/.
JPEG (an acronym for "Joint Picture Experts Group") refers to a set of formats that support full-color images and stores them in a compressed form (see Figure 8.3). JPEG is a 24-bit storage format that allows for 2 24 or 16,777,216 colors! With that much color data, it's easy to see why some form of compression is necessary.
Figure 8.3 : News photos and other live shots are good candidates to be stored as JPEGs.
While JPEG is great for full-color images, it does not permit some of the nice effects that GIF does. Transparency is not possible with JPEG images because the compression tends to make small changes to the image data. If a pixel, originally colored with the transparent color, is given another color, or if a non-transparent pixel is assigned the transparency color, the on-screen results are disastrous. Likewise, with the exception of a Server Push approach, animation is not yet possible with JPEGs.
There is an analogy to interlaced GIFs, however. The progressive JPEG (p-JPEG) format has recently emerged, which gives the effect of an image fading in just as an interlaced GIF would.
The question of which format to use is often a daunting one for beginning designers. Fortunately, there are some ways to focus your thinking as you make this choice:
A good rule of thumb is to use JPEG for color photos and to use GIFs for all other graphics and illustrations. Because transparency and animation are not usually needed for full-color images, this rule is not seriously limiting.
Once you have an image stored and ready to be posted on the Web,
you need to use the HTML <IMG> tag to place the image on
a page. <IMG> is a stand-alone tag that takes the attributes
shown in Table 8.1. According to the HTML 3.2 DTD, only SRC is
mandatory, but you'll quickly find yourself wanting to use many
of them.
| Attribute | Purpose |
| ALT | Supplies a text-based alternative for the image |
| ALIGN | Controls alignment of text following the image |
| BORDER | Specifies the size of the border to place around the image |
| HEIGHT | Specifies the height of the image in pixels |
| HSPACE | Controls the amount of white space to the left and right of the image |
| ISMAP | Denotes an image to be used as part of a server-side image map |
| SRC | Specifies the URL of the file where the image is stored |
| USEMAP | Specifies a client-side imagemap to use with the image |
| VSPACE | Controls the amount of white space above and below the image |
| WIDTH | Specifies the width of the image in pixels |
Even though the SRC attribute is the only attribute that is technically required in an <IMG> tag, you should get into the habit of considering three others as mandatory:
Your basic <IMG> tag then should look like the following:
<IMG SRC="URL_of_image_file" WIDTH=width_in_pixels HEIGHT=height_in_pixels ALT="alternative_text_description">
Most sites make conscientious use of these attributes in each <IMG> tag. Figure 8.5 shows Yahoo's main page along with the corresponding HTML source code in Figure 8.6.
Figure 8.6 : Both <IMG> tags use the SRC, WIDTH, HEIGHT, and ALT attributes.
| NOTE |
You can also use the HEIGHT and WIDTH attributes to scale the size of your images on some browsers. For example, if you have an image that is 232 pixels wide by 160 pixels high, its dimensions can be halved with the use of the following tag: <IMG SRC="whatever.gif" WIDTH=116 HEIGHT=80 ALT="Reduced image"> Similarly, you could scale the image size up by using a WIDTH greater than 232 and a HEIGHT greater than 160. While this is one way to modify the size of images, it is probably not the best way because browsers don't always do the best job at resizing. Your best bet is to use a program like Photoshop or LView Pro to resize the graphic before placing it on your Web page. Not only are these programs better suited to resize an image, but they also let you preserve the aspect ratio (ratio of width to height) during the resize. |
The BORDER attribute gives you a simple way to instruct the browser to place a border around an image. BORDER is set equal to the number of pixels wide you want the border to be. Figure 8.7 shows an image with several different border sizes. The default border is no border.
Figure 8.7 : Borders create a framed look around photographs.
White space around an image is called gutter space or runaround. Putting a little extra space around an image is a good way to give it some more breathing room on the page and make it stand out better.
Runaround is controlled by the HSPACE and VSPACE attributes. Each is set to the number of pixels of extra space to leave to the right and left of an image (HSPACE) or above and below an image (VSPACE). Figures 8.8 and 8.9 show some images with varying amounts of HSPACE and VSPACE.
Figure 8.8 : Increasing HSPACE puts more white space to the left and right of an image.
Figure 8.9 : Additional VSPACE separates these images farther from the text above and below them.
| NOTE |
HSPACE and VSPACE don't have to be used independently of each other. In fact, they're very often used together. N |
| CAUTION |
You cannot increase space on just one side of an image. Remember that HSPACE adds space to both the left and the right of an image and that VPSACE adds space both above and below the image. |
The ALIGN attribute of the <IMG> tag can take on one of
the five different values summarized in Table 8.2. TOP, MIDDLE,
and BOTTOM refer to how text should be aligned following the image.
LEFT and RIGHT create floating images in either the left or right
margins.
| Value | Purpose |
| TOP | Aligns the top of subsequent text with the top of the image |
| MIDDLE | Aligns the baseline of subsequent text with the middle of the image |
| BOTTOM | Aligns the baseline of subsequent text with the bottom of the image |
| LEFT | Floats the image in the left margin and allows text to wrap around the right side of the image |
| RIGHT | Floats the image in the right margin and allows text to wrap around the left side of the image |
TOP, MIDDLE, and BOTTOM Alignment Text aligned with TOP, MIDDLE, BOTTOM (the default alignment) is shown in Figure 8.10 . One important thing to note with TOP and MIDDLE alignments is that once the text reaches a point where it needs to break, it breaks at a point below the image and leaves some white space between the lines of text (see Figure 8.11).
LEFT and RIGHT Alignment Values of LEFT and RIGHT for the ALIGN attribute were adopted as part of the HTML 3.2 standard to allow for floating images that permit text to wrap around them. Figure 8.12 shows some floated images on the Washington Post's Web page with the corresponding HTML source code shown in Figure 8.13.
Figure 8.13 : The <IMG> tags to place the floating images have ALIGN=LEFT or ALIGN=RIGHT attributes.
Floating images opened the door to many creative and interesting layouts. In fact, it is even possible to overlap images by floating one in the left margin and one in the right margin.
The advent of floating images created a need for a way to break to the first left or right margin that's clear of a floating image (see Figure 8.14). To satisfy this need, the CLEAR attribute was added to the <BR> tag. Setting CLEAR to LEFT breaks to the first instance of a left margin that's clear of floating images. CLEAR=RIGHT does the same thing, except it breaks to the first right margin. You can clear both margins by setting CLEAR=ALL.
Figure 8.14 : Breaking clear of a floating image lets you place a new page element in the margin.
Image maps are clickable images that load different pages depending on where you click the image. They are frequently found on the main page of a site (see Figure 8.15) where they typically serve as a navigational tool to the major sections of the site.
The ISMAP attribute of the <IMG> tag is a stand-alone attribute that tells the browser that the image is to be used as part of a server-side image map. You can learn how to set up server-side image maps in Chapter 9 "Image Maps."
The USEMAP attribute of the <IMG> tag is set equal to the name of a client-side image map. With client-side image maps, map information is named and sent directly to the browser. Setting USEMAP equal to a map name instructs the browser to use the map information associated with that name. Consult Chapter 9to learn how to make client-side image maps.
In Chapter 7 "Linking HTML Documents," you learned how to use the <A> container tag to create hypertext anchors. By clicking the hypertext, you instruct your browser to load the resource at the URL specified in the HREF attribute of the <A> tag.
There's no law that says that hyperlink anchors can only be text. Very often, you'll find images serving as anchors as well. By linking images to other Web pages, you create a button-like effect-the user clicks the button and the browser loads a new page.
To use a graphic as a hyperlink anchor, put the <IMG> tag that places the graphic between <A> and </A> tags:
<A HREF="library.html"><IMG SRC="images/books.gif" WIDTH=50 HEIGHT=50 ALT="Library"></A>
This results in the linked image shown in Figure 8.16. Notice that the image has a border even though there was no BORDER attribute specified. Hyperlinked images automatically get a border colored with the same colors that you set up for hypertext links using the LINK, VLINK, and ALINK attributes of the <BODY> tag.
| TIP |
Borders around hyperlinked images are typically distracting, especially if the image is a transparent GIF. Notice in Figure 8.16 how the border shows the extent of the otherwise transparent bounding box around the image. To eliminate the border, include BORDER=0 inside the <IMG> tag. |
| TROUBLESHOOTING |
There's a small, hyperlinked line at the bottom right of my linked images. How do I get rid of it? Your problem most likely stems from HTML code like the following: <A HREF="boxers.html"> <IMG SRC="drew.jpg" WIDTH=422 HEIGHT=284 ALT="Photo of Drew"> </A> By having a carriage return after the <IMG> tag but before the </A> tag, you often get an extraneous line at the bottom right corner of the linked image (see Figure 8.17). By placing the </A> tag immediately after the <IMG> tag <A HREF="boxers.html"> <IMG SRC="drew.jpg" WIDTH=422 HEIGHT=284 ALT="Photo of Drew"></A> it should take care of that annoying little line. |
Some people opt to create their own bullet characters for bulleted lists rather than using the characters that browsers provide. To do this, you need to place the bullet graphic with an <IMG> tag and follow it with a list item:
<IMG SRC="bullet.gif" WIDTH=12 HEIGHT=12 ALT="*">List item 1<BR> <IMG SRC="bullet.gif" WIDTH=12 HEIGHT=12 ALT="*">List item 2<BR> <IMG SRC="bullet.gif" WIDTH=12 HEIGHT=12 ALT="*">List item 3<BR>
| TIP |
Using an asterisk (*) as the value of your ALT attribute gives users with nongraphical browsers a bullet-like character in front of each list item. |
There are several things to note about this HTML:
Usually, this is enough to deter many page authors from using their own bullet characters. If you're still determined to use custom bullets, however, there's one more alignment issue you need to be aware of: If a list item is long enough to break to a new line, the next line starts below the bullet graphic, not indented from it (see Figure 8.18). This detracts from the nice indented presentation that users expect from a bulleted list.
Figure 8.18 : Custom bullet graphics work fine until the length of a list item exceeds one line.
One way to avoid this problem is to make list items short enough to fit on one line. If that isn't possible, you should consider setting up your list with custom bullets in an HTML table (see Chapter 12, "Tables").
Some sites also use a custom graphic in the place of horizontal rule (see Figure 8.19). This is a nice way to subtly reinforce a site's graphic theme.
Alignment problems are less of an issue with custom rule, but there are a couple of rules to keep in mind: