Web Site Design Guide

Creating Graphics for the World Wide Web

For full details on creating graphics for the World Wide Web, refer to Michael Scaramozzino’s chapter 21 in MacWorld’s FreeHand Bible titled Shock Treatment on the World Wide Web. The chapter explains how to create WWW graphics in many of the formats discussed here. It covers everything from creating them in FreeHand, incorporating them into Web pages and uploading them to a Web server.

If you would like DreamLight to create award-winning graphics for your Web site, please contact us.

Please Support Our Continuing Independent Film Making Efforts! Order your Award-winning BlastOff! Special Edition DVD today!

Juggling a Double Edged Sword

No matter how computer graphics are created they finally end up as one of two forms of images, raster or vector. They are either composed of a matrix of tiny colored squares, or mathematical objects. Let’s take a closer look at each type.

Raster Graphics

Raster graphics first evolved in the seventies when raster displays were developed based on existing television technology. Raster graphics are sometimes referred to as bitmapped graphics or bitmapped paintings. Raster graphics are represented as a large rectangular grid of tiny picture elements or pixels. Each horizontal row of these pixels is called a raster line. Once an object is drawn in a raster image the object is no longer stored. All that is stored are the pixels of the overall image bitmap. This can make editing the original objects very difficult.

Raster graphics are usually created in a manner similar to painting, where you stroke colors onto a canvas. These strokes change the colors of the pixels that are under the brush. Scanned photos, 3D Renderings and Adobe Photoshop files are examples of raster graphics. Raster graphics tend to take up much more space than similar vector graphics because each pixel must be stored. Large images can result in very large file sizes.

This juggler shows how a raster graphic looks when scaled to 100% at normal screen resolution. Notice that it appears smoother around the edges than the same size vector image. This is because most raster images are anti-aliased which is a smoothing process.

This close-up shows the same raster graphic scaled up 400%. The resolution seems to decrease. Since all that is stored in the image are the pixels in the grid, all the computer can do when you zoom in is to magnify those pixels. This is referred to as resolution dependent. Whatever resolution the image was created with will be the only resolution it will render with.

Raster formats are typically used for scanned photographs, computer paintings, and 3D renderings. They look better than vector images at normal screen resolution since they can be anti-aliased. However, they do not scale as well as vector images.

Vector Graphics

The term vector graphics dates back to the sixties when vector computer displays were first developed. These displays drew images of mathematical formulas as a collection of plotted line segments. Vector Graphics are sometimes called object oriented drawings or, more recently, PostScript illustrations. The individual objects are represented as mathematical formulas to the computer. Each object drawn is stored within the file and is usually easy to edit with the software that created it.

The objects are drawn by plotting points or drawing curves. Unless a vector image is extremely complicated, it will usually take up very little disk space since all that is stored is the mathematical formula for each object. Vector graphics can be scaled to any magnification and the file size will not change. The file size is directly related to the image complexity. Native FreeHand, Illustrator and Flash files are examples of vector graphics.

This juggler shows how a vector graphic looks when scaled to 100% at normal screen resolution (it’s a screen grab from a vector image). Notice that it is a little jagged around the edges. This is called aliasing and effects diagonal edges. Vector formats may exhibit aliasing since they are generally not anti-aliased, though newer formats such as Macromedia Flash and Display Postscript as seen in MacOS X can be anti-aliased resulting in extremely smooth edges.

This close-up shows the same vector graphic scaled up 400%. The apparent resolution increases, resulting in a sharper image. All the shapes are redrawn by the computer using the same screen resolution. Since the shapes are redrawn in a larger area, they can use more screen pixels. This is what’s called resolution independent. The computer can compute the final output resolution based on the output device used (In this case the computer monitor.) and the image size.

When vector images are printed on high resolution devices they produce the sharpest results. Therefore, vector illustrations are often used in print media or where scaling is desirable.

Which is Best, Raster or Vector?

The choice of using a vector or raster image depends on a number of issues. Each type of graphics has its own strengths.

* Raster graphics can implement HTML links with image maps
** Vector files are generally smaller unless the images are unusually complicated.

If an image was created as a raster graphic, then it may not easily be converted to a vector format. If an image was created as a vector graphic, then it is easily converted to a raster graphic and you can choose which format is best for display in your particular instance.

WWW Flash Vector Format

Originally, Web browsers could only handle raster graphics. Macromedia’s Flash format brings all the benefits of vector graphics to the Web. These benefits include zooming and panning, embedded HTML links, small file size, high quality printing, scaling flexibility, easy editing and the Flash format also supports full animation and scripting. Flash files are viewable on the Web through a Netscape plug-in and Explorer ActiveX control that is bundled with most browsers as well as available from Macromedia’s Web site. Flash format files use the .SWF file extension. The Flash format is best used for vector based illustration and animation such as those created with Macromedia FreeHand, Adobe Illustrator or Macromedia’s Flash authoring software.

Using the Flash PopUp Menu

Control-Clicking (Macintosh) or Right-Clicking (Windows) on a Flash image will give you the pop-up menu seen at the right. The menu enables you to perform various functions including the following:

• Zoom In: Zooms into the image where you clicked each time selected. When zoomed into an image you may click and drag to pan the image.
• Zoom Out: Zooms out of the image each time selected.
• Show All: This lets you zoom all the way out to see the entire image.

When passing the cursor over a Flash image, the cursor will change into a pointing hand when you pass over an embedded HTML link. Clicking will then activate the link just as if it were a normal HTML link within text.

Since Flash is not a built-in graphics type, it must be placed on Web pages using the <OBJECT/EMBED> tag rather than the normal <IMG> tag and the Flash plug-in must be installed in the user’s browser.

For more information about Flash and to download the Flash player visit the following URL:
http://www.macromedia.com/software/flash/

WWW Raster Image Formats

Graphics Interchange Format: GIF

The GIF format, pronounced “jiff” or “giff” was developed by CompuServe specifically for use with on-line BBS systems. This was the first image format available for the Web and is still widely used today. The appearance of GIF images on the Web was one of the single most significant factors in the Web’s explosive popularity. Since this is the oldest image format available on the Web, it is directly supported by most of the Web browsers available today. If it is important for you to reach the widest possible audience with your images, then the GIF format should serve well. The GIF format is capable of handling indexed raster images with color depths from 1 to 8 bits which allows from 2 to 256 colors. The GIF format is best used for small graphical images such as icons, buttons or images comprised of a few flat broad shapes.

LZW Compression:

The GIF format uses an LZW (Lempel-Ziv & Welch) compression scheme that is capable of moderate compression ratios. LZW compression is a fully reversible algorithm. This means that compressing and decompressing an image will result in an exact duplicate of the original image with no loss of information. Therefore this type of compression is referred to as “lossless.”

Interlacing: GIF87a

The GIF87a version of the format enabled the use of interlacing. Interlacing helps convey information to the viewer faster. Before interlacing was available, a GIF image would display from the top down, one raster line at a time. If there were buttons near the bottom of the image, you had to wait until the entire image was loaded before you could see them. An interlaced image is broken down into four passes, the first of which displays the entire image at low resolution very quickly. Each successive pass increases the resolution as the image is being downloaded. This gives the user a better idea about what is loading so they can make decisions about the information without waiting for the entire image to load. I would suggest interlacing all GIFs to take advantage of this apparent speed.

Transparency: GIF89a

The latest version of the GIF format, GIF89a allows transparency. This is useful when adding spot illustrations of irregular shapes to a Web page that has a background pattern or color. This way the background will show through all transparent sections rather than having all the illustrations in solid rectangles. The transparency is achieved by specifying certain color slots from the image’s color palette as being transparent. Anywhere that the “transparent” color is used will “dropout” revealing the background of the page beneath. Each pixel is treated as 100% opaque or 100% transparent. There is no in-between.

GIF Licensing:

The GIF format is copyrighted by CompuServe Incorporated and the LZW compression used in the format is patented by Unisys Corporation. There has been talk that CompuServe and Unisys may decide to charge royalties for the use of the GIF/LZW formats. For this reason many users are beginning to switch to the royalty free JPEG and newer PNG formats outlined below.

For more information about the GIF format you may download the specification below:
ftp://ftp.ncsa.uiuc.edu:/misc/file.formats/graphics.formats/gif89a.doc

Joint Photographic Experts Group: JPEG

The JPEG format, pronounced “J-peg,” was developed by the Joint Photographic Experts Group as a variable compression scheme for photographic images. During the compression process you may adjust the settings in favor of better image quality or higher compression. The JPEG format is capable of handling true color raster images with color depths above 8 bits. This enables you to use thousands or millions of colors with 16 or 24bit color depths. 24 bit JPEG files can often compress smaller than 8 bit GIF files thereby allowing the page designer to include higher quality images without any performance penalty. The JPEG format is best used for photographs, 3D renderings and paintings or illustrations composed of many colors or subtle color variations.

There is a “progressive” JPEG feature that works very similar to GIF’s interlacing feature. The only feature not offered by the JPEG format is transparency. Most Web browsers support the use of JPEG images.

JPEG Compression:

JPEG compression uses complex mathematical algorithms to attain compression ratios of up to 20:1. Typical images achieve compression ratios from 5:1 to 15:1 using a “lossy” compression scheme. This means that some information is lost as the file is compressed. The higher the compression ratio, the more image detail that is lost. The lower the compression ratio, the higher the image quality that is retained. Therefore you should avoid recompressing JPEG images multiple times. You should save and always return to the master image for subsequent changes.

This image was compressed at the minimum quality setting of 0 in Photoshop. Notice the noise around the edges. It is not as sharp as the image above which was compressed with a quality setting of 6.

For more information on the JPEG format you may download the specifications below:
ftp://ftp.uu.net/graphics/jpeg/jpeg.documents.gz

Portable Network Graphics: PNG

The PNG format, pronounced “Ping,” is being recommended as a patent-free replacement for the GIF format. The PNG format was developed by the World Wide Web Consortium and CompuServe to provide a royalty-free GIF replacement. This format was specifically designed to transmit graphics over a network such as the Internet. As soon as the format is in widespread use it should quickly take over as the dominant raster image file format on the Web.

The PNG format is capable of compressing both indexed color (8bit or less) and true color (above 8 bit) images. The PNG format uses a lossless compression scheme that is capable of compressing files about 30% smaller than the GIF format. The progressive feature enables browsers to load the first pass much quicker than the first pass of an interlaced GIF file. Not only does the PNG format support transparency but it also supports full alpha channel blending which enables the use of soft shadows and partial transparency effects. The PNG format also enables built in gamma correction. Images typically appear darker on a PC than they do on a Macintosh. Gamma correction is a way to compensate for this difference.

Once the PNG format is fully supported by the major browsers, it will be best used for high quality images, especially where partial transparency and/or gamma correction is desirable.

As of Nov. 1, 2001, Internet Explorer 5 for Macintosh, Netscape 6 for Macintosh and Netscape 6 for Windows all support PNG, including full alpha channel transparency. Internet Explorer 6 for Windows partially supports PNG but does not support PNG alpha channel transparency. So it’s currently Microsoft’s inferior support that is preventing the widespread adoption of PNG on the Web... The above sample should have a very soft drop shadow with the page background showing through. If it’s in a solid background or without a soft shadow, your browser is not properly rendering the PGN image.

For more information on the PNG format you may find the specifications at the following URL:
http://www.w3.org/pub/WWW/TR/REC-png.html

Please Support Our Continuing Independent Film Making Efforts! Order your Award-winning BlastOff! Special Edition DVD today!