Chapter 4.. Graphics 89 Digital Images Creating and managing digital images effectively requires a good understanding of the different aspects of an image, including:.. The image type.. The image's attributes.. The image's file format Once you're comfortable with how these different aspects work together to affect image quality and image size, you can use your knowledge and a good image-editing tool to optimize your image for both quality and size. The next several sections of this chapter introduce you to the ins and outs of these key aspects of digital images. Image types In general, there are two types of digital images:.. Vector images.. Bitmap images The majority of Web graphics are bitmap images; however, vector images are becoming more prominent as new technologies emerge. In general, line art, shapes, and illustrations work best as vector images, whereas photographs, images with soft or blurry edges, and special effects such as drop shadows work best as bitmap images. The following three sections explain how images of each type are constructed and include tips on how to decide which type is the best one for any given image. Exam Tip Be sure you're familiar with the differences between vector images and bitmap images. Vector images A vector image is essentially a collection of lines defined by mathematical equations. A vector image viewer interprets the mathematical equations and displays the image accordingly. For example, a vector graphic that describes a square simply needs to store information that identifies the square as a four-sided polygon with sides that are the same length. The actual length of the four sides is just a value stored in the graphic. A square that is five pixels in size has the same file size as a square that is five inches in size, because the size information is simply a value. Therefore, vector graphic file sizes are kept relatively small, which is a benefit when file size is important - as it is on the Web.
90 Part I.. Exploring Web Site Design Methodology Graphical viewers that display vector graphics can quickly and easily resize the graphics because they only need to change the values that describe how the graphic should be displayed. Different size-display devices can display the same vector graphic at a size appropriate to the device's size without losing any of the graphic's information. Because vector images are based on mathematical equations, they're best suited to clean graphics without much blurry or fuzzy information. The more transition from one line or color to another there is in a graphic, the more difficult it is to describe the graphic as a series of equations. As mentioned in the previous section, shapes, line art, and illustrations that are composed mainly of clean lines without much transition of color are good candidates for vector graphics. Vector images are a relatively new kind of image and support for them across the major Web browsers and operating systems isn't complete. In fact, to view vector graphics in a Web browser, you usually need a special plug-in (the SVG Viewer from Adobe: www. adobe. com/s vg I ma in. html). When vector graphics are more widely accepted, they can take the place of bitmap graphics where appropriate. Bitmap images Bitmap images are the most common type of images. You'll work with bitmap images frequently as you design Web sites. A bitmap image is a collection of squares, called pixels, of different colors that when merged create an image. The larger a graphic is, the more squares of color it needs to create the image. As mentioned, bitmaps are good for creating images with shadows, many transitions from one color to another, and that are generally complex. In a bitmap graphic, varying shades of colors are used to make edges smooth and colors blend. For example, a black line on white background most likely includes gray bits to make a smooth transition from white to black. If you open a bitmap graphic in your image editor of choice and magnify it so you can see the individual pixels, you'll see that its edges are very rough. However, when you pull away from the individual pixels, the edges tend to be softer. A bitmap graphic can use as many or as few colors as the artist deems necessary. The more colors, the bigger the file size. The larger the graphic, the bigger the file size. Tip The bitmap way of developing graphics is not the same as the Bitmap file format (.bmp). File types such as GIF and JPEG are bitmap files supported by Web " browsers. The benefit of using bitmap images is that they're well supported by every major browser and all operating systems. Bitmap images can also be used to describe very complex images such as photographs. The only problem with using bitmaps is that they can become very large very quickly. Keeping bitmap file size down is possible when you use the right file format and optimizing techniques. See the "Image File Formats" and "Optimizing Images for the Web" sections later in this chapter.
Chapter 4.. Graphics 93 '!II C:\Doculllents and Settillgs\natanya_flittslr.ly 0... ~f3... ( LANWrights 1 File Edit View F3vorites Tools Help Figure 4-2: An image displayed on screen with resolution set to 640 x 480 appears larger than an image displayed on a screen set to 800 x 600. Inthe Real World You have more control over images during design when you have more pixels per inch to work with. When you're building images from scratch, start out at 300 pixels per inch and when you're happy with your image, reduce the pixel count to 72. Image color Images are all about color, and the color attributes for an image affect its final display and file size. The colors you see in an image are controlled by two different factors: color pallet and color depth. The color pallet is the collection of colors that you use to create an image. A color pallet can have as few or as many colors in it as you'd like. You can have a color pallet that is 150 different shades of blue or one that is 500 different shades of rainbow colors. The colors you have in your color pallet are the only options you have for creating an image. Another attribute of an image is its color depth, which is simply the number of colors used to create the image. An image with a color depth of 256 colors has a limited collection of colors from which to draw. An image with a color depth of a million or more colors has a virtually unlimited collection of colors from which to draw. The larger your color depth, the larger the image file size.
94 Part I Exploring Web Site Design Methodology The "Optimizing Images for the Web" section later in the chapter discusses techniques for reducing the number of colors in your image to reduce file size. When color pallets clash Color pallets and color depth work together to display a digital image on a computer screen. A standard 8-bit monitor has a library of millions of colors from which to choose to form a display, but it can only show 256 of those colors at any given time. When you build a graphic in a graphics program, such as Paint Shop Pro, the system creates a pallet specifically for that image. The system also has its own default pallet that it uses for standard display. When the pallet for an image is different from the standard pallet, the system adjusts to display the image. If you have several different images open on the screen at once and they contain colors that are radically different from the system's pallet, you may see flashes on your screen as the system tries to adjust for each graphic. To avoid screen flash and account for a collection of images built with different pallets, Web browsers use a technique called dithering to reconcile the differences between an image's color pallet and the system's color pallet. When the system dithers an image, it simply replaces colors in the image's pallet with system colors. Although this reduces screen flash, it can alter the display of an image drastically. You can guard against dithering in two ways: Test your images in a Web browser on several different computers with different browsers running on different operating systems Use the colors in the Web-safe color pallet The Web-safe color pallet Not only do different operating systems have their own default color pallets, but Web browsers also have their own pallets that may be slightly different from the system pallet. Netscape Navigator's default pallet only includes 216 colors whereas the Windows operating system pallet has 256 colors. The original Browser-Safe Pallet was created by Lynda Weinman and only includes the 216 colors common to the major Web browser pallets and the major operating systems. If you choose to use the safe pallet to create your graphics, you can be comfortable with the display of your graphics in just about any Web browser. The downside to using the pallet is you only have 216 colors to work with, which may limit the quality and complexity of your images. You must decide on a case-bycase basis if you want to trade consistency of display for a limited pallet. You can read more about the safe applet and download a copy of the pallet to use with Photoshop or Paint Shop Pro at W'voJW. 1 ynda. com/ he x. html.
Chapter 4.. Graphics 95 Image File Formats Graphic file formats Understanding the ins and outs of the attributes of digital images is just one piece of the digital image puzzle. Another important piece is understanding the different file formats in which you can save your images and knowing when to use which format. There are a variety of file formats to choose from, but not all of them are supported by Web browsers. Each file format has its pros and cons as well as applications that it works best with. When you have a clear understanding of how file formats work, you can use them to your advantage to affect both image quality and file size. File format options There are different file formats simply because there are different image creation programs and different operating systems. In the infancy of digital images, each image-editing software application had its own proprietary image format. Eventually, it was clear that there needed to be formats that were supported by different applications so users could share images. Several different common file formats emerged, and over time, the list has been reduced to a handful of standard formats that just about every image-editing application supports. Table 4-1 lists the most common image file formats, their corresponding file extensions, and whether they're supported by most Web browsers. Table 4-1 Common Image File Formats Format Extension(s) Native browser support Graphics Interchange Format (GIF).gif Yes. In all versions of all browsers Joint Photographic Experts Group (JPEG).jpg,.jpeg Yes. In 3.0 browsers and later Portable Network Graphics (PNG).png Yes. In some 4.0 and later browser versions Tag Image File Format (TIFF).tif no PostScri pt (PS).ps no Encapsulated PostScript (EPS).eps no Bitmap (BMP).bmp,.pcx no WordPerfect Graphics (WPG).wpg no Scalable Vector Graphics (SVG).svg Only in testbed XML browsers
96 - Part I Exploring W~b Site I;)esign Methodology As Table 4-1 shows, many of the common file formats aren't supported by Web browsers. Therefore, when choosing the file format for your Web graphics, you're limited to a short list of graphic formats. The native file format you choose depends on what kind of image you're working with and your bandwidth limitations. Native Web graphic formats Not all graphic formats are created equal. Some formats are only designed to display on a particular platform, and others only work with particular kinds of software. When Web browsers were first developed, it was clear that they needed to support graphic formats that worked well on any computer and that had a relatively small footprint. The first file format to fit this category was GIF, which was followed shortly thereafter by jpeg. Recently, both PNG and SVG have emerged as options to GIF and jpeg, but neither is as well supported as the old standbys, GIF and jpeg. The following sections briefly describe the different native file formats, catalog the strengths and weaknesses of each, and include recommendations for what kind of images the file format is best suited. Exam Tip Be sure you're familiar with the features and drawbacks for each native Web image file format. GIF The GraphiCS Interchange Format (GIF) was created by CompuServe as a tool for displaying images in their pre-web Internet access software. GIF files are platform independent and work in any graphical browser your users might use. GIF files are limited to a color-depth of 256 colors, which helps keep their file size down. In addition, part of the process of saving an image file to the GIF format is compression that creates a smaller file size than the original image had. The limitations in color depth and the built-in compression of the file format make GIF files naturally smaller than other image files. However, limitations in color depth mean limitations in the quality of the graphic. Also, GIF is designed to be a lossless file format, which means that the graphic's quality doesn't suffer when the image is compressed. This may mean that the image file size won't be as small as other compressed file types (such as jpeg). As a designer, you can't control the level of compression in your file and must rely on the image-editing software tool you use to set the level of compression. In general, the GIF file format is best used for line-art images and on graphic-rich Web pages. GIF is the best-supported file type and will work with even the oldest graphical browsers. Over time, G1F technology has evolved to support a variety of different image needs, including images that blend in with their backgrounds and animated images. Transparent GIFs A transparent GIFis one that blends in with its background. The background color of the Web page shows through as the background of the image, as shown in
Chapter 4 Graphics 97 Figure 4-3. Notice how the picture of Arthur in the "Arthur's Tip of the Day" section blends in with its background. The image's transparency makes this possible. Tip Only GI Ffiles can have transparent elements. ~ Ai, Fate~ CrUf jh~]. ~.~ -VacatioIl IdeM. ~ Tmoll': all:!qi HonevHlonns Off-bP ' ; IlJI~mjl[ii ~ Sinute'S SemQ f$ $,; Othel Speqa[ TI'awterf;:.~ /la.aln tream Trl!el (heaoss! Places on Eli!Ih Shoncut to archives In recent months, mosl oflhe banks in Amenca have' begun adding a 2% surcharge to the 1% charge assessed by ("Iasl e/card and Visa credit cards for the use of those cards in foreiqn countries. MasterCard and \,lisa perform a sen-'ice for th~i( 1 % -namely. th e conversion of foreig. 20 SAtrfll 8aw3111s of j oodon. H.II pf F,m. Travel Message Boards A ~k ' he Experts Abgut the Carjbbean: Hosted by Echo and KeVin Garrett HDt J,:eue!if lho hiqolh: What should P..mericans do about Amtrak? Talk About tha Calihbfil n: Share Your Travel -- lodginus n Get rtll ti me r.jll!s~~ '-)? ;~~ ~-: ill~'. ic, ">STAY"_ -- Rail Travel - T&ktthE:tr.tltl wit/l thol: ElJfo)punr,ittxi>t rtsl C3els aileuroo8 -- Crllises 1~!;r,ip1'. 20.000 $Jilin, ;. up toe~ ", ohi ~~lij P?lckaues - FJsl,ffOld.. t>~&..:-<"1lir. t. o t~ckr.vl/lll ' g8.today.com.. ~.. Figure 4-3: The picture of Arthur in the "Arthur's Tip of the Day" section is a transparent image. Even when the background color of a page changes, transparent images continue to be transparent and show the current background color. This makes it easy to change the background color of a page, or reuse a single graphic on different pages with different backgrounds, without having to keep different versions of the graphic. The technology behind transparent images is fairly simple. One particular color in the image is the transparent color. This information is saved as part of the graphic and when a browser displays the image, it ignores the transparent color and lets the background color on the page show through. A good image editor makes building transparent images a snap. The "Creating transparent images" section later in the chapter details how to use Paint Shop Pro to make transparent images.