Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

CHAPTER 5
Advanced Graphics

by Eric Ladd

In this chapter

Sorting Through the Graphic Possibilities 156

Layout Considerations when Using the <IMG> Tag 157

Images as Hyperlink Anchors 163

Images as Bullet Characters 165

Images as Horizontal Rules 165

Graphic Storage Formats 167

Using the Browser-Safe Color Palette 171

Creating Transparent GIFs 171

Making a Transparent PNG 173

Making an Image Fade In 174

Creating Animated GIFs 175

Using Image Effects That Create Depth 177

Keeping File Sizes Small 180

Sorting Through the Graphic Possibilities

It is 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 because graphics often convey a message more powerfully than text alone.

Placing an image on a Web page is a relatively easy matter— you need only one HTML tag. This tag also has many attributes that give you a good bit of control over how your graphics are presented.

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. The thought you put into your graphic content should be at least as much as you put into textual content—perhaps even more so because a reader gets a sense of an image just by quickly looking at it, whereas reading and comprehending text-based information requires more time. And making a Web graphic requires more than just creating the illustration. You need to consider the appropriateness of one of the many special effects that are possible with the available graphics file formats: GIF, JPG, and PNG. For GIFs, this means asking yourself the following questions:

•  Should the GIF be transparent?

•  Should it be interlaced?

•  Should it be animated?

When considering JPEGs, you can ask

•  How much should the JPEG be compressed?

•  Should it be a progressive JPEG (analogous to an interlaced GIF)?

Additionally, you need to think about color, depth, textures, filters, drop shadows, embossing, and all the other possible visual effects. Through everything, you also need to keep the size of your graphics files as small as possible so that they don’t take too long to download. How can you balance all these constraints?

This chapter helps you to answer these questions so that your graphics content is as effective as it can be; it starts with an in-depth discussion of the <IMG> tag and how this simple tag brings great variety to the way images are presented. Then the discussion examines the two major Web graphics storage formats and the merits and drawbacks of each. Finally, the chapter focuses on many of the Web graphics effects previously noted, on why you might want to use each one, and how to create them with readily available software (including some software on the CD-ROM that comes with this book). Mastering the content of this chapter will not necessarily make you a first-rate digital-media design guru, but it will give you an awareness of what is possible in the realm of Web graphics.

Layout Considerations when Using the <IMG> Tag

After 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 standalone tag that takes the attributes shown in Table 5.1. According to the HTML 4.0 standard, only SRC is mandatory. You will quickly find, however, that you want to use many of the attributes.

The Basics

Even though the SRC attribute is the only attribute technically required in an <IMG> tag, you should get into the habit of considering three others as mandatory:

•  HEIGHT and WIDTH—By providing image HEIGHT and WIDTH information, you speed up the page layout process and enable users to see pages faster. A browser uses the HEIGHT and WIDTH values in the <IMG> tag to reserve a space for the image, and it actually places the image after it has finished downloading. Without these two attributes, the browser has to download the entire image, compute its size, place it on the page, and then continue laying out the rest of the page. If a page has a lot of graphical content, leaving off HEIGHT and WIDTH can seriously delay presentation of the page and annoy visitors.

•  ALT—Don’t forget that some users don’t have graphical or vision-based browsers and can’t see your images at all. For these users, you should provide a text alternative to your image with the ALT attribute. Also, because Web robots can’t parse images, they often use the ALT description in an <IMG> tag to index the image.