by Eric Ladd
Graphic content is as much a part of Web sites today as text-based content. It's true that some users still do not use graphical browsers, but this user group is a relatively small portion of the entire Web community and, as you have seen, there are text-based alternatives you can include in your HTML code to let these users know what graphics they're missing.
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, while reading and comprehending text-based information requires more time. And there's more to making a Web graphic than just creating the illustration. You need to consider the appropriateness of one of the many special effects that are possible with the GIF and JPEG formats. For GIFs, this means asking yourself questions like the following:
When considering JPEGs, you can ask
Additionally, you need to think about color, depth, textures, filters, drop shadows, embossing, and all of the other graphic effects that are possible. Through everything, you also need to keep the size of your graphics files as small as you can so that they don't take too long to download. How can you possibly balance all of these constraints?
This chapter reviews many of the Web graphics effects noted previously, discusses why you might want to use each one and tells you how to create them with readily available software (including some software on the CD-ROMs that come 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's possible in the realm of Web graphics.
When you make a transparent image, you designate one color in the image's palette to be the transparent color. Pixels colored with the transparent color allow the background color to show through. Figure 10.1 shows transparent and non-transparent versions of the same image.
This technique is useful in getting rid of the "bounding
box" that typically surrounds a graphic. When you compose
an image in a graphics program, the workspace is almost always
rectangular. Your image goes inside of this rectangular region
(the bounding box), and invariably there is some amount of space
between the image and the edges of the box. By choosing the color
of the excess space pixels to be transparent, you make them disappear
on the browser screen. This is what happened in Figure 10.1. The
bounding box pixels in the image using the transparency option
were the ones designated as transparent, so they let the white
background show through and give the effect of the oval sitting
right on top of the Web page.
| TIP |
If you make a transparent image an anchor for a hyperlink, be sure to set BORDER=0 in the <IMG> tag. Otherwise, you'll see a colored border around the perimeter of the bounding box and your transparency effect will be lost. |
Many popular graphic programs support transparent GIFs. One such program that you'll find on the CD-ROMs with this book is LView Pro. LView Pro is a terrific shareware program that is well worth the $35.00 you'll pay to register it.
Creating a transparent GIF in LView Pro involves two simple steps:
You designate the background color by choosing Retouch, Background Color to reveal the dialog box you see in Figure 10.2. The palette for the current image is shown in the dialog box, and you can click the palette entry you want to be the background color. If you can figure out which palette entry corresponds to the color you want for the background, you can click the Dropper button to get the eye dropper tool. Place the tip of the eye dropper on an image pixel painted with the color you want to be background color and click your mouse button. This sets that color as the background color.
With the background color set, all you need to do is tell LView Pro to make that color transparent in the GIF file. You do this by choosing File, Properties and clicking the GIF tab. Checking "Save Transparent Color Information to GIF89a Files" (see Figure 10.3) ensures that LView Pro will designate your chosen background color as transparent.
| Why Aren't There Transparent JPEGs |
Transparency is only supported in the GIF format. A JPEG image cannot use a transparency effect because the algorithm used to compress a JPEG file is lossy. This means that during decompression, some pixels are not painted with the exact same color they had before the compression. These color changes are so small that they are typically imperceptible to the human eye, though you may be able to detect color differences after several cycles of compression and decompression. However, a computer can detect the difference and therein lies the demise of the transparent JPEG. To understand further, consider the following example: You scan in a photograph of a field of flowers and you want to save it as a JPEG. The JPEG format supports over 16.7 million colors. Let's suppose you choose color number 3,826,742 as the transparent color and save the file. During the compression and subsequent decompression, there is some data loss in the file. As a result of the loss, a pixel originally painted with color number 3,826,742 is now colored with color number 3,826,740. The pixel was supposed to be transparent, but since its color number was changed by the compression, it will not be. The pixel will be painted with color number 3,826,740 and not let the background show through. The reverse situation can happen as well. Suppose a pixel originally colored with color number 3,826,745 ends up being painted with color number 3,826,742. This is the transparent color, so the pixel will adopt the background color instead of color number 3,826,745 as originally intended. As long as JPEG continues to be a lossy format, it will be impossible to use transparency with them. If you have to use a transparent graphic, then you have to use a GIF. |
Even when image files are made as small as possible, it can still take a while for them to download. Initially, browsers had to load in the entire file and process it before it began to present the image on screen. This meant users had to sit there staring at a blank screen for minutes at a time. Web user attention spans being what they are, people would often give up in frustration and move on to another page rather than wait for an image to finish downloading.
Since those early days, two approaches to reducing user frustration have emerged. Both involve having an image "fade in" as the image data is read by the browser. The user sees a blurry, incomplete image at first, but then the image quality improves as more data is read in. The key thing for users is that they immediately see an approximation to the finished image on their screens. This keeps them engaged and makes it less likely that they'll move on to another page.
The "two" approaches to fading an image onto a page are actually variations on the same idea, modified for different storage formats. In each case, the image data is not stored in "top-to-bottom" order. Instead the image data is reordered so that adjacent rows of pixel information are no longer stored contiguously. As the browser reads down the file, it places the rows of non-contiguous data up on the screen. The result is an incomplete image that fills itself in as the rest of the image data is read (see Figures 10.4 and 10.5). A GIF stored in this way is called an interlaced GIF. The same idea applied to a JPEG file yields a progressive JPEG or p-JPEG.
Figure 10.5 : When the browser hits the end of the image file, the image has completely "faded in."
Creating an interlaced GIF is a simple matter with LView Pro. To instruct LView Pro to save a GIF in interlaced form, just select File, Properties and click the GIF tab. Checking Save Interlaced will do the trick. To deactivate saving in the interlaced format, simply uncheck the box.
p-JPEGs are relatively new, but LView Pro is current enough to be able to help you make them. To activate saving in a progressive JPEG format, choose File, Properties and click the JPEG tab. Check Progressive Compression (see Figure 10.6) and you're good to go.
Figure 10.6 : Activating progressive compression instructs LView Pro to create a p-JPEG.
One of the biggest crazes to hit the Web in the past year has been doing animations with animated GIFs, rather than relying on a dynamic document technique like Server Push or Client Pull. The irony is that animated GIFs have been around since 1989-at least in theory. The GIF89a standard has always supported multiple images stored in the same GIF file, but no one caught on until recently that you can do Web animations this way.
It's surprising that this development didn't happen sooner, given the fact that GIF animations are so much easier to implement than Server Push animations. A Server Push animation requires a server that is CGI-capable, a program to pipe the individual frames of the animation down an open HTTP connection, and a browser that can handle the experimental MIME type used. All you need for a GIF animation is a program to help you set up the GIF file and a browser that is completely compliant with the GIF89a standard. That you don't need any CGI programming is a relief to those publishing on a server that either does not have CGI or that restricts CGI access to certain users.
One program that will help you build animated GIFs is the GIF Construction Set from Alchemy Mindworks (see Figure 10.7). The text you see in the window denotes the different blocks that comprise the animated GIF. The animated GIF always begins with a header block and can be followed with images, text, comments, controls, and looping instructions. Each of these can be placed by clicking the Insert button.
You don't even need to be familiar with the GIF Construction Set's GIF building "language" to use the program. By choosing File, Animation Wizard, you are taken through a series of dialog boxes (see Figure 10.8) that ask whether the animation is for the Web or not, whether it should loop once or indefinitely, whether the frames are line drawings or photorealistic, how much delay there should be between frames, and what files contain the images for the individual frames. The GIF Construction Set uses this information to author the animated GIF file for you automatically.
| CAUTION |
Think twice before letting an animation run indefinitely. An animation that's going constantly can be a distraction from the rest of the content on your page. |
The GIF Construction Set is robust enough to support you in other Web graphics endeavors. It can do the following:
You can download the GIF Construction Set from Alchemy Mindwork Web site at
http://www.mindworkshop.com/alchemy/gifcon.html
Registering your copy of the GIF Construction Set will set you
back $20 plus $5 for shipping.
| ON THE WEB |
http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html Macintosh users should check out GifBuilder for creating animated GIFs. |
While a computer screen is inherently two-dimensional, Web graphic artists try not to let that get them down. They draw on a variety of techniques that give Web pages the illusion of depth. Creating these effects usually involves the use of a high-end graphics program like Photoshop, but they are well worth the time and expense because they give Web pages a richness that is hard to beat.
Photoshop lets you apply up to 16 different light sources to an image from the Lighting Effects dialog box shown in Figure 10.9. You call up the dialog box by choosing Filters, Render and then selecting Lighting Effects from the Render pop-up menu.
The cardinal rule to remember when lighting the images on your pages is illuminate each object with the same light source at the same position. Think of it as the sun shining on your page. There's only one sun in the sky and all of the objects on the page are getting light from it simultaneously. If you light different objects with different light sources at different positions, the lighting will seem counter-intuitive to those who view the page. You should try to make the lighting seem as natural as possible so that the page is more inviting.
Placing drop shadows behind page elements is a great way to make them appear elevated just off the page (see Figure 10.10). An easy way to make a drop shadow is to make a copy of the page element, paint it black, and drop it in behind and to one side of the element being shadowed. If you're using Photoshop, you can achieve increased realism by copying the page element to a subordinate layer, painting it black, expanding it by several pixels, blurring it a few times, and positioning it as desired.
| CAUTION |
Make sure that the location of your drop shadows is consistent with your light sources. |
Embossing a graphic element makes it appear to be "raised up" and gives it a much more textured appearance (see Figure 10.11). Photoshop has a built-in embossing filter that you can use by selecting Filters, Stylize and the selecting Emboss from the Stylize pop-up menu.
Ray tracing is a technique for making two-dimensional images look very three-dimensional. You can usually tell a ray traced image by its very distinct use of perspective (objects get smaller as they move away from you). Figure 10.12 shows you a Web page image done with ray tracing.
To create your own ray-traced images, you need a special program. There are many available, but one of the more popular ones is the Persistence of Vision (POV) Raytracer. You can find out more about this program from the POV Web site at
| NOTE |
There are other ray-tracing modelers and renders you can use as well. Windows users can check out Caligari Truespace and Strata Vision is a good program for the Macintosh. For more information on other ray-tracing software, consult http://www.yahoo.com/Computers_and_Internet/Graphics/Ray_Tracing/. |
One of the greatest courtesies you can extend to your users is to keep your graphics files small. Invariably, it is the graphics that take the longest time to download. By keeping the file sizes small, you minimize the time that users spend waiting to see your pages. Your typical 30K to 50K graphics file may load in a few seconds over a T1 connection, but it may take several minutes for users dialing up with a 28.8Kbps or 14.4Kbps connection.
There are a number of techniques you can enlist to help keep your files sizes down. These include
Each technique is discussed briefly over the next several sections.
Larger images take up more disk space-it's a simple as that. The reason for this is straightforward; there are more pixels in a larger image, so there is more color information that has to be stored.
The height and width of your graphics should be no larger than
they have to be. By keeping the on-screen dimensions of your images
small, you contribute to a smaller overall file size.
| TIP |
If you resize an image in a graphics program to make it smaller, be sure to keep the aspect ratio (ratio of width to height) the same. This prevents the image from looking stretched or squashed. |
Thumbnails are very small versions of an image-usually a photograph. By placing a thumbnail of an image on a page, you reduce file size by using an image that has a smaller width and height than the original.
Thumbnails are usually set up so that users can click on them
to see the full image. If you do this, you should include the
size (in kilobytes) of the file that contains the full image so
that users can make an informed decision about downloading it
or not.
| CAUTION |
Technically, you can resize an image by reducing the WIDTH and HEIGHT attributes in the <IMG> tag. However, this does not save on download time and browsers generally do a lousy job of resizing the image. |
JPEGs are created with a very efficient (albeit lossy) compression scheme. The compression works best on images with lots of natural color gradation. This is why JPEG is the format of choice for color photos placed on the Web.
If you have a GIF with a lot of color gradation, you can experiment with saving as a JPEG to see if you can compress the file size further. It may not always work, but it's worth a try. You don't have to worry about color loss either since JPEG can accommodate millions of colors to GIF's 256 colors.
Conversely, if you have an image with large blocks of contiguous color, you'll be better off storing it as a GIF because GIF's compression scheme is geared toward exploiting adjacent pixels that are painted the same color.
JPEG compression often achieves very impressive compression ratios (on the order of 50:1) with very little loss in image quality. You can crank the ratio higher (see Figure 10.13) to make your file size smaller, but the image will not look as good when it is decompressed and decoded. A highly compressed JPEG will take slightly longer to decompress as well.
GIFs can use a palette of up to 256 colors. This corresponds to eight bits per pixel (2 8 equals 256). But what if you don't need that many colors? Sometimes GIFs use just two or three colors. That little color information can be stored in much less than eight bits per pixel. It would seem like some of that storage space could be recovered, resulting in a smaller file size.
It turns out that you can reduce the number of bits per pixel used to store color information. This is called reducing the image's color depth. Lowering the color depth is a great way to reduce file size because you often can cut the amount of space you're using in half or better.
For example, suppose you have a GIF that uses six distinct colors. The number six is between four (2 2) and eight (2 3), so you would need three bits per pixel to describe the color information (two bits per pixel only supports the first four colors, so you have to go to the next highest exponent). By reducing the color depth from eight bits per pixel to three bits, you realize a savings of over 60%!
LView Pro gives you a easy way to reduce your color depth. By choosing Retouch, Color Depth, you get the dialog box you see in Figure 10.14. A true color image is one that uses 24-bit color (for example, a JPEG); the color depth for these images cannot be changed. Palette images are ones that draw their colors from a palette of no more than 256 colors. For palette images, LView Pro lets you choose 256 colors (eight bits per pixel), 16 colors (four bits per pixel), black and white (one bit per pixel), or a custom number of colors. If you use a custom value, LView Pro will figure out how many bits per pixel it needs to accommodate it.
Contrast in an image refers to the brightness of objects relative to one another. Making changes to the contrast in your image generally effects the size of the resulting image file, so if your file is still too big, tweaking the contrast may be a way to bring it down more.
One way to change contrast in your images is to adjust the gamma correction. Increasing the gamma correction into positive values tends to brighten the entire image and reduce overall file size since there are fewer colors to store. Conversely, negative gamma correction values darken an image and increase its file size. You can change the gamma correction in LView Pro by selecting Retouch, Gamma Correction.
Another way to change contrast in your image is to adjust highlight, midtone, and shadow values. Increasing the highlight value enhances the highlights in the image and tends to increase file size. Increasing the shadow value brings out the shadows more and also makes files bigger. Adjusting your midtone value lets you lighten or darken your image's mid-range colors. Either adjustment can potentially increase your file size. To determine the settings that make your file as small as possible, you'll need to experiment with each image. LView Pro does not have a menu option to let you change these values though. Fortunately, the graphics program Paint Shop Pro does. To alter highlight, shadow, and midtone values in Paint Shop Pro, you choose Colors, Adjust, Highlights/Midtones/Shadows.
Dithering makes an image appear to have more colors in its palette than it actually does. This is accomplished by combining colors in the existing palette to produce colors that aren't in the palette. Dithering can be helpful with GIF images with a lot of subtle color gradations. Otherwise, for images with just a few solid colors, you probably won't want to use dithering.
One thing to be aware of when using dithering is that it tends to increase file size. This occurs because there are fewer pixels in a row that have the same color. The compression scheme used with GIF files exploits adjacent pixels that have the same color. When there are fewer same-colored pixels, the compression can't make the file as small.
You can enable or disable dithering in LView Pro from the same
dialog box that lets you set the color depth. Just choose Retouch,
Color Depth and check the Enable Floyd-Steinberg Dithering box
at the bottom if you want dithering or uncheck it if you don't
want dithering.
| CAUTION |
Dithering can also create an unattractive graininess in your images. If you enable dithering, be sure to look at your image before you put it on the Web to make sure that the dithering does not detract from it. |