9Lesson 9: Web Graphics

Objectives By the end of this lesson, you will be able to:  3.3.1: Distinguish between vector and raster graphic types.  3.3.2: Identify and choose appropriate image file formats, including browser- compatibility issues and lowest common denominator in audience usability (e.g., GIF 87a, GIF 89a, JPEG, JPEG 2000, PNG, BMP).  3.3.9: Insert metadata into images to ensure accessibility and to ensure higher page ranking in search engine result pages.  3.3.10: Identify the benefits and drawbacks of using stock photography when developing a site (e.g., license-free vs. licensed stock photos, increase in project speed, reduction in creative control).  4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning).  4.1.5: Identify Scalable Vector Graphics (SVG) characteristics (e.g., XML-based, two- dimensional, searchable, scalable, zoom support).

9-2 Web Design Specialist

Pre-Assessment Questions

1. Name three characteristics of good Web graphics.

2. Web images can be categorized into what two graphic formats?

3. Which term describes the approximation or reconciliation of colors between an image palette and the system palette? a. Palette flash b. Resolution c. Dithering d. Color depth

NOTE: Web Site Images Graphics are not used only for Images are essential in Web site design. Users have come to expect a visually pleasing aesthetics. Images are memorable and experience that can only be achieved with the use of images. Images can also be used for can be used to navigation in the form of image maps and graphical buttons that link to other pages or underscore a point or sell a product. resources. On a corporate site, the organization's logo and trademarks are crucial for Web images should name recognition and branding. be made functional whenever possible. Graphics illustrate content, provide backdrops for other activities, and offer a means of navigating a Web site. Several concepts are important to Web graphic artists.

OBJECTIVE 3.3.10: Stock Using stock images photography in site development Stock photography refers to images for which you can purchase the rights to use the images in printed material or on a Web site. Photographers file their images with an agency that negotiates licensing fees on the photographer's behalf. Stock images are then licensed from the agency.

Many modern stock photography distributors offer still photos, videos and illustrations. Millions of photos are available for licensing, and all images on stock photography Web sites include embedded metadata that makes it easy to search for images based on keywords.

Licensing To use a stock image, you must purchase a license for the image. The license is a one- time fee that allows you to use the image multiple times for multiple purposes. Generally, there is no time limit for using the image, but there is usually a restriction on how many times the image can be reproduced. The specified number of times an image can be reproduced is often referred to as a print run. For example, a license might allow the purchaser to print 500,000 copies of a brochure using the image.

Two types of licensing are available:

• Royalty-free license — allows the buyer to use an image without having to pay a royalty each time the image is used. Royalty-free does not imply that the image is free to use without purchasing a license or that the image is in the public domain. The buyer also does not have the right to resell or transfer the image. The fee for the image is usually based on the size of the digital file. For example, a 600-KB image might cost $50, whereas a 10-MB version of the same image might cost $200.

• Rights-managed license — allows the buyer to "rent" an image through negotiation of a specific price for a specific use. Some rights-managed licenses stipulate exclusivity; that is, the buyer may restrict similar use of the image by others for the duration of license. Rights-managed licenses are usually more expensive than royalty-free licenses, but they allow for much larger print runs. For example, a magazine with a large print run would use a rights-managed license instead of a royalty-free license. Generally, the fee charged is based on the scope of the project. For example, you might pay $200 to use an image in a small brochure, or many thousands of dollars to use an image in a national advertising campaign.

Advantages and disadvantages of using stock images When developing a Web site, there are both advantages and disadvantages to using stock photography.

Advantages include saving time and money. Image databases are quick and easy to search, licenses can be purchased online, and images are downloaded immediately for use. Licenses (especially royalty-free licenses) are much less expensive than hiring a photographer and models for a photo shoot, in most cases.

Even if you were to use internal resources for conducting a photo shoot (thereby saving the cost of the licensing fee), you must consider the time factor. Using stock photos increases project speed. Another advantage to using stock photography is that you know exactly what the finished image looks like, while an assignment photo shoot may deliver photos that require editing.

Disadvantages to using stock photography are (in some cases) the cost associated with the licensing fees, and a reduction in creative control. You have to select from the images that are available, and you may not be able to find exactly what you want.

Online stock photography resources There are numerous stock photography Web sites with large databases of searchable photos and videos. These include but are not limited to the following:

• Jupiter Images (www.jupiterimages.com) • Getty Images (http://gettyimages.com) • Shutterstock Images (www.shutterstock.com) In addition to licensing single images, many sites offer access to collections of images on a monthly or yearly subscription basis.

Microstock photography Microstock photography is an offshoot of stock photography. Online microstock photography provider iStockphoto (www.istockphoto.com) pioneered the microstock photography industry. Microstock providers deal almost exclusively over the Internet, accept photographs from amateur photographers as well as professionals, and sell their images at a very low cost (generally from US $0.20 to US $10).

Image prices are based on credits. An image may cost between 1 credit and 20 credits, depending on size, and credits may range from less than US $1 to US $1.40 each.

Contributing photographers categorize their images with keywords and upload them to the site's inspection queue, where they are reviewed for quality. Photographers receive a commission of between 20 percent and 40 percent of every sale. iStockphoto also sells vector graphics and raster illustrations.

Critics of iStockphoto contend that the company is devaluing the stock photography market by selling images so far below accepted price standards. The commission rate is also below the industry norm (50 percent) and is based on much lower purchase fees.

Free images Some Web sites offer free use of digital photos for personal and commercial use. Certain restrictions can apply to these images, such as the domain name of the Web site must not be removed from the photo, the photos may not be resold, and the photographer retains the original copyright. A few sites that offer images free of charge include the following:

• FreeStockPhotos.com (www.freestockphotos.com) • FreeImages.co.uk (www.freeimages.co.uk/) • Freepixels (www.freepixels.com) Another possible source for free images is photosharing Web sites. Although the images do not require a license, photographs on these Web sites are copyrighted to the photographer, and you will need to contact the photographer or owner of the photo to obtain permission to use the images.

Photosharing Photosharing Web sites allow you upload, organize, view, share and download photos and other image files. Some sites are free, while others offer subscription-based services. Free sites generally rely on advertising or the selling of prints for revenue. Some sites offer subscriptions for their premium services, and they offer a free package that has a scaled- down feature set.

Some photosharing sites require you to download an application for uploading and managing photos. Some sites also support only specific platforms or browsers.

NOTE: The best sites allow you to create private and public photo albums (and include Tags and tagging password-protected access); prevent unauthorized downloading of photos (for example, will be discussed in the next section. through right-clicking and selecting a save option); provide online tools for editing photos (cropping, red-eye removal, etc.); offer the ability to buy and sell prints and other gifts; and allow you to search for photos by keyword "tags" or date. Several sites accept pictures taken with cameraphones, and some allow you to upload and share videos as well.

History The first photosharing sites appeared in the late 1990s, offering photo finishing such as touch-ups and red-eye removal, and online ordering of prints.

As digital cameras and cameraphones became more widely used, more and more users signed up for photosharing services. Today, many photosharing sites include social networking and business elements, such as the ability to create and join communities, the ability to create private and public photo albums, and the ability to sell your personal photographs online.

Modern photosharing services strive to make organizing, storing and sharing digital photos convenient, safe and easy. These sites offer various ways to share pictures, including the purchase of prints, and the creation of unique photo gifts such as luggage tags, post cards, mugs, mouse pads, calendars, etc.

Some sites are also geared to professional and semi-professional photography enthusiasts who want to sell their work, or who want a forum where they can display their photos and receive feedback from other photographers around the world.

Selecting a photosharing service When selecting photosharing sites and services, consumers may consider ease of use, tools available for managing photo albums and videos, tools available for photo editing, service fees, storage space and daily upload limits, absence of ads and spam, the ability to buy and sell prints, and password-protected access, among other features. Several sites advertise themselves as "family-friendly," prohibiting photos or other media portraying explicit nudity.

Popular photosharing sites include the following:

• dotPhoto (www.dotphoto.com/) • Webshots (www.webshots.com/) • Fotki (www.fotki.com/us/en/) • Flickr (www.flickr.com) • SmugMug (www.smugmug.com) • Picasa (http://picasa.google.com) • Shutterfly (www.shutterfly.com)

OBJECTIVE 3.3.9: Metadata in Adding metadata to images images Metadata is data about other data. On the Web, metadata often provides a description or synopsis of a Web page, can include keywords used by search engines, and can denote authorship of a file. Including metadata in your pages and images can help visitors find NOTE: your site. Metadata will be discussed in detail in a later lesson. Metadata for photographs typically includes the date and time a picture was taken and the details of the camera settings. Many digital cameras record metatdata in exchangeable image file format (EXIF). tag A key feature of photosharing sites is the ability to tag items in order to categorize them. A user-defined non- hierarchical term A tag is a non-hierarchical keyword or term that you can assign to an item such as a assigned to an item Web page or an image file. Tagging or "image tagging" an item allows it to be found again for categorization by browsing or searching; that is, a tag is metadata. purposes. Tags are considered a bottom-up system of classification, in contrast to hierarchies, which are top-down systems. In a hierarchical system (also called a taxonomy), a designer specifies a limited number of terms that can be used for classification, and there is one correct way to classify each item. In a tagging system, users decide how to tag an item. There is an infinite number of ways to classify an item, and there is no wrong way. An item may have several tags, and thus belong to several different categories.

Many photosharing sites allow users to tag their images, making the pictures highly searchable. Some sites even allow for geotagging, which is the process of adding geographical identification metadata to photos and videos. Geographical metadata usually includes latitude and longitude coordinates, and can also include place names.

NOTE: Using metadata in your images (along with properly naming your Web pages and using Search engine keywords in your pages) can help you achieve higher rankings in searches. optimization (SEO) will be discussed in detail in a later In the following lab, you will use Picasa to add metadata tags to an image. Suppose you lesson. are creating a Web site for a dog trainer, and she has several photos of her "clients" that she wants posted to her Web site. You can add metadata tags to the images so that people searching for photos of dogs or of a particular breed will see some of the images and thereby increase the chance of a visit to her Web site.

Lab 9-1: Adding tags to a photo

In this lab, you will use Picasa to add tags to a digital photo.

1. Desktop: Copy the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson09\Lab_9-1 folder to your Desktop.

2. Browser: Go to http://picasa.google.com and download and install Picasa 3 (The current version as of this writing is 3.6). Accept the suggested defaults. When the installation is complete, close and reopen Picasa.

Note: The picasa36-setup.exe binary file is located in the LabFiles\Lesson09\Lab_9-1 folder of the supplemental materials for this course. You can use this file to install Picasa 3 if you wish.

3. Picasa 3: In the Folder list on the left side of the window, click the Lab_9-1 folder to display its contents in the main portion of the window. Click the image to select it. Notice that file properties for the picture (file name, creation date, picture dimensions and file size) display in the blue bar that separates the upper portion of the window from the lower portion, as shown in Figure 9-1.

Note: If you cannot locate the Lab_9-1 folder, select File | Add File To Picasa, navigate to the Desktop\Lab_9-1 folder, then double-click Age7.jpg.

Figure 9-1: Picasa 3 interface

4. Double-click the Age7 image to open it in an editing window.

5. Select Picture | Properties to display the file properties in a dialog box. A few additional properties such as resolution, JPEG quality and unique ID are indicated. Click OK to close the properties dialog box.

6. Select View | Tags to open the Tags panel on the right side of the window, as shown in Figure 9-2. You use this panel to add tags to your pictures.

Figure 9-2: Picasa 3 Tags panel

7. In the Type In A Tag To Add box, type dog, then click the plus sign (+) to add the tag.

8. Add the following tags to the image: pit bull, female, trampoline, family pet.

9. Redisplay the properties for the picture. Notice that your user-defined tags now display as properties, as shown in Figure 9-3.

Figure 9-3: Updated picture properties

10. Close the properties dialog box. In the top-left portion of the window, click the Back To Library button to exit the editing window, then quit Picasa 3.

11. If time permits, upload the tagged photo to the Web (a Google account is required and you must have Picasa Web Albums installed). Set the visibility for the album to Public and click the View Online button to see the uploaded photo.

In this lab, you added tags to a photo.

Digital Imaging Concepts All digital images have certain attributes that can drastically affect quality and file size. A few of these attributes are discussed in this section.

Pixels NOTE: The term "pixel" is short for "picture element." The pixel is the smallest unit displayed by You were introduced to pixels a computer monitor. Pixels in a grid form the building blocks for images a computer can in the lesson that display. discussed page layout and color theory. Color depth Pixels provide some amount of color information. This information, measured in bits, determines how many colors each pixel can display. For example, pixels with 4 bits of grayscale information can display up to 16 shades of gray. Eight bits of color information NOTE: per pixel produces up to 256 bits of color information, and so forth. Higher bit values Be sure that you (also called bit depths) result in more intense or realistic colors. As the color depth understand the difference between increases, however, so does the file size. image resolution and color depth. Resolution relates to Image resolution the clarity of an image, without A user's monitor resolution determines how large onscreen images will be displayed. regard to color. Screen resolution depends on the number of pixels present in a monitor's height and width. Higher screen resolutions display more pixels per inch (ppi). For example, a 15- inch monitor set to a resolution of 800x600 will not display as many pixels per inch (ppi) as a 15-inch monitor set to 1024x768.

For printing, greater detail is achieved with higher-resolution images, and this detail is measured in dots per inch (dpi). When scanning images from a print source or importing pictures from a digital camera for use on the Web, it is generally accepted that you should set the resolution to 72 dpi in order to display the image on screen at approximately the same size as the original image.

For Web images, the dimensions of the image in pixels — rather than the dpi or ppi — are most important. When designing a Web site, you will typically resize images to the dimensions you want to use on your Web page.

The relationship between actual size and pixel size can be a bit confusing at first. To understand it, consider an image that is 100 pixels wide by 100 pixels tall. If this image is displayed on a 17-inch monitor set to 800x600 resolution, the image will occupy one- eighth of the width and one-sixth of the height available on the monitor screen. If the monitor is set to a resolution of 1280x960, then the image will take up less space on the screen. The monitor has not increased in size, and the image is still 100 pixels by 100 pixels. What has changed is that the monitor is displaying more pixels per inch (ppi). Because monitors can be set at different resolutions, there is no way to specify that an

image should be 1 inch long, for example, on a Web page. Instead, you specify image size in pixels, such as 100 pixels or 224 pixels.

Palettes Although an 8-bit color display can show millions of colors, it can only display 256 colors at one time. The system maintains these 256 colors in a system palette. A 16-bit display can display 65,536 colors at once, and a 24-bit display can show 16.7 million colors at once. Most users currently have the ability to view at least 16-bit color, so limiting the number of colors you use is not as big an issue for Web designers as it was several years ago.

When you create an 8-bit image using a vector or paint program, the program builds a palette based on the colors used in the image. The system palette then adjusts slightly to convey the correct colors when the image is displayed. When you display several images, either in sequence or simultaneously, you might experience a disconcerting flash of colors known as palette flash or palette shift.

Palette flash occurs when a significant discrepancy exists between the image bit depth or palette and the system bit depth or palette. To overcome this limitation, the browser automatically applies a technique called dithering to the image.

NOTE: As discussed in the Dithering lesson about page Dithering is the approximation or reconciliation of colors between an image palette and layout, dithering will the system palette. The dithering process works by placing two colors from the system's not occur if you limit colors to those in palette next to each other in order to trick the eye into seeing a third color that is desired the browser-safe but not part of the palette. Dithering makes it possible to display images that contain color palette. Browser-safe colors more colors than the system displaying them can support. are listed at www.lynda.com/ When a Web browser encounters an image that contains colors not supported by the resources/webpalet current monitor settings, the browser will automatically use dithering to try to approximate te.aspx. the correct colors in the image. Unfortunately, dithering can alter the image's appearance in ways you might not want. In particular, a high-color image such as a photo can appear grainy when displayed on a computer that supports only 256 colors.

When you create Web images using a graphics-editing program, you can specify whether the image should use dithering or whether the graphics application should change the image colors to the closest browser-safe colors. If you use only colors in the safe 216- color palette that can be displayed on both Firefox and Internet Explorer browsers (i.e., browser-safe colors), then your images will not dither when viewed on any browser. However, using only browser-safe colors severely limits the range of colors and types of images you can use on your pages, and is rarely an option for photographic images. The consensus among designers today is that you should use browser-safe colors whenever possible. Fortunately, this issue is becoming less problematic because most computers in use today support resolutions higher than 8-bit display.

Raster vs. Vector Graphics Web images can be categorized into two graphic formats: raster (or bitmap) and vector. OBJECTIVE Each format has different file subtypes. 3.3.1: Vector vs. raster graphics

Raster graphics The most common graphic format is raster, also known as bitmap. Raster graphics use small dots to create images and colors. Raster graphics include the JPEG, GIF and PNG formats.

NOTE: The larger the dimensions of the image, the larger the associated file size. When viewed Raster graphics are with magnification, a raster graphic resembles a series of little squares, each of which frequently called bitmap graphics. It is has a color value that contributes to the overall shape. Because raster graphics are important to created using actual dots of color, making a raster graphic larger decreases the image understand that these two terms resolution. In other words, if a raster graphic has 72 dots per inch (dpi) and is 1 inch mean the same wide, it will have 36 dpi if you make it 2 inches wide using magnification. Figure 9-4 because both terms shows a raster image as it looks when magnified. are widely used.

Figure 9-4: Magnified view of raster image NOTE: For a raster graphic to render its shape, the browser and the available RAM work in It is important to understand the key unison to load the graphic. The information for each pixel is stored, and then rendered in characteristics of the browser to create the image. The reason that larger raster images result in larger file raster images in sizes is that more pixels must be instructed on the values to display. Removing pixels and Web development: They work best for compressing files will decrease file size, but will also reduce image quality. Raster photos, and image graphics are best suited for photographs and realistic graphics. size affects file size. Vector graphics NOTE: Vector graphics are quite different from raster graphics in their rendering process. Vector You can review and apply concepts of graphics store the information about the image in mathematical instructions that are appropriate use for then interpreted and displayed. raster and vector graphics in Activity For example, to create a circle, the vector graphic need only know the center coordinates, 9-1: Identifying graphic formats and radius and color values. With this information, mathematical instructions are used to files. render the graphic. To increase the size of the circle, only the information values need to change, therefore increasing the size of a vector does not increase the file size of the image. Figure 9-5 shows a sample graphic and illustrates how the graphic uses lines to interpret and render the shape.

Figure 9-5: Vector image using mathematical interpretation NOTE: Another advantage of vector graphics is their ability to scale to the output device being It is important to understand the key used. Vector has this ability because it is not resolution-dependent. Vector graphics are characteristics of best suited for line art, shapes and illustrations. vector images in Web development: They work best for line art and Graphics Applications illustrations, and image size does not You can create, retouch and export Web-ready digital images with a variety of graphics affect file size. programs. These programs can be divided into two general groups: vector-based drawing programs and paint-type programs.

Vector-based drawing programs Vector-based drawing programs map shapes that you create onto an invisible grid. Image information is stored as a set of mathematical instructions. As previously discussed, vector graphics are resolution-independent, meaning that computer monitor settings do not affect their size or appearance. Vector files are also smaller than similar paint-type image files. Vector graphics are commonly used in high-end three-dimensional and Virtual Reality Modeling Language (VRML) environments.

Currently, vector graphics cannot deliver truly photo-realistic detail, and they display somewhat more slowly on screens. They also require a browser plug-in or helper application for viewing on the Web. However, vector graphics work very well for industrial, manufacturing, scientific and educational purposes.

If you want to develop your own graphics, vector-based drawing applications commonly used in the industry include the following:

• Adobe Illustrator CS6 • Adobe FreeHand MX • CorelDRAW X5 • Inkscape • Adobe Fireworks CS6 Note that Fireworks supports both vector and raster graphics. You will be introduced to this application later in the course.

NOTE: Paint programs You may find it difficult to Paint-type programs create raster images from scanned photos and video frame captures, remember how to distinguish between or can be used to create original artwork. Raster files can represent highly detailed paint and draw images. As previously discussed, a raster graphic is an arrangement of small dots, and programs. Draw programs use each dot corresponds to a pixel on the screen. Raster images can be edited pixel-by-pixel mathematical if necessary. One drawback of rasters, however, is that the original files are large. Both vectors to draw JPEG and GIF formats are raster graphic types. lines, whereas paint programs can spread color over If you want to develop your own graphics, paint-type applications commonly used in the an area of a industry include the following: bitmap. • Adobe PhotoShop CS6

NOTE: • Microsoft Image Composer You can review and apply concepts of • Corel PaintShop Photo Pro X3 appropriate use for draw-type and • Adobe Fireworks CS6 paint-type applications in Note that Fireworks supports both vector and raster graphics. You will be introduced to Activity 9-1: Identifying graphic some basic functions of this application later in the course. formats and files. Image File Formats

OBJECTIVE Graphic images come in numerous file formats: bitmap (BMP), Tagged Image File Format 3.3.2: Image file (TIFF), Windows Metafile (WMF), Graphics Interchange Format (GIF), Joint Photographic formats Experts Group (JPEG), Portable Network Graphics (PNG) and Scalable Vector Graphics (SVG).

Only GIF and JPEG are natively supported by all browsers; other file formats can be viewed with the aid of a plug-in. Native support means that the browser does not require any special software or plug-in to display the image. When creating Web graphics, designers must choose between GIF and JPEG based on the type of images they want.

Table 9-1 lists various image file formats and their file name extensions.

Table 9-1: Image file formats

File Name File Format Origin Extension NOTE: How many of the file .jpg, jpe, .jpeg Joint Photographic Experts Group Joint Photographic Experts Group formats named here (JPEG) are familiar to you? Have you seen .gif Graphics Interchange Format (GIF) CompuServe Inc. others used on the Web? .tif Tagged Image File Format (TIFF) Aldus Corporation .bmp Bitmap (BMP) Microsoft Corporation .wpg WordPerfect Graphic WordPerfect Corporation (Novell) .png Portable Network Graphics Codelab Inc. .pcx Bitmap (BMP) ZSoft Corporation

Graphics Interchange Format (GIF) NOTE: GIF is a platform-independent file format that is limited to a display of 256 colors. "GIF" is pronounced with a hard G, as in Originally developed by CompuServe for its online service, GIF has been adopted by most "graphic" (not a soft developers because of its small file size. Graphic interlacing (the progressive rendering of G as in "giraffe"). images) is unique to GIFs and is a preferred method for display of large graphic files.

GIF is considered a "lossless" format; this term means that as the image is compressed, no information is lost. Consequently, a GIF file may not compress as much as a JPEG file of the same size. The amount of compression cannot be determined by the designer for a GIF file, though it can for a JPEG file.

GIF files exist in two versions: 87a and 89a. The original 87a format supports most of the GIF's advantageous features, such as small file size, lossless compression and transparency. The 89a version of GIF also supports animation and interlacing.

Animated GIF The 89a version of GIF allows storage and playback of a sequence of still images to create the illusion of animation. GIF files can provide many full animation and video effects without the need for plug-ins.

Regular GIF files contain only one static image; the animated GIF functions much like a cartoon flipbook. Animated GIF files consist of sequential frames that reload from a browser's cache and replay in an infinite or predetermined loop to simulate motion. One advantage that animated GIFs have over other image animation is that they do not depend on client-pull or server-push. Both server-push and client-pull require a file to be downloaded sequentially with numerous exchanges between the user's computer and the server.

Transparent GIF Another advantage that a GIF image has over a JPEG image is that the designer can designate a color of the GIF image to be transparent. This feature removes the constraints of square or rectangular graphics. For example, the designer can create a circular logo in a square image by making the background color transparent. Thus the image appears circular when, in fact, it is square with information for the square background to appear transparent.

Joint Photographic Experts Group (JPEG) NOTE: Graphics in the JPEG format are capable of much greater color depth than GIFs, but "JPEG" is pronounced "jay- usually require more time to download. JPEG files can contain up to 24 bits of color peg." information (16.7 million colors) and work particularly well for photographs. JPEG files are compressed automatically. They are decompressed when they arrive at the Web page. Compression effects vary: The greater the compression, the greater the level of degradation in the final image. JPEG is considered a "lossy" format type; this term means that as the compression of the image is increased, colors are dropped from the image NOTE: color palette, resulting in image degradation. For example, a 100-KB JPEG file can be Considering the compressed to perhaps 10 KB. However, this amount of compression may diminish the many advantages that GIF images image quality to an unusable degree. seem to have over JPEGs, what reasons One drawback to this format is that the designer has no control over how the 24 bits are can you think of to mapped into the 256-color palette used by a client's display. Also, considerable use JPEG images? differences exist between the way Firefox and Internet Explorer display images. Further, the display results of PCs and Macintoshes also differ. Designers should test their images in these two and other browsers, as well as multiple operating systems, before deciding which format best serves their purposes.

JPEG 2000 NOTE: A newer JPEG format enhances the compression feature of standard JPEGs and You can review and apply concepts of improves scalability and editablility. As discussed, the original JPEG format is lossy, effective use for GIF which results in information about the image being discarded upon compression. This and JPEG file loss of data effectively creates "holes" in the image, which are filled and thus create a formats in Activity 9-1: Identifying speckled effect. With JPEG 2000, the compression includes a Wavelet technology that graphic formats and stores the information differently, reducing the amount of speckling that occurs when the files. JPEG is decompressed. The file name extension for JPEG 2000 is .jp2.

Portable Network Graphics (PNG) The PNG file format is emerging as the new format for Web graphics. PNG brings together the best features of the GIF and JPEG formats into one format. PNG files are lossless and support transparency like GIFs, yet also support compression and high bit depth like JPEGs. In addition, PNG bit depth can be adjusted, unlike GIFs or JPEGs, which must be 8-bit and 24-bit depth, respectively. Compression is enhanced in PNGs by using compression filters that can support up to 48-bit color.

NOTE: However, browser support for the PNG format is currently not complete. Older versions of You can compare file size of GIF, JPEG the major browsers offer little support for PNG. Internet Explorer version 6 had and PNG files in incomplete support for transparent PNGs, and Internet Explorer 7 and 8 are unable to Optional Lab 9-1: correctly display PNG images with color correction. PNG-compatible browsers include Comparing image file formats. Apple Safari, Google Chrome, Mozilla Firefox and Opera, with partial support available in the various versions of Internet Explorer. As a result, it is not advisable to rely on PNG as a fully supported format for the Web.

Scalable Vector Graphics (SVG) OBJECTIVE Scalable Vector Graphics (SVG) format is a W3C Recommendation that uses Extensible 4.1.5: SVG Markup Language (XML) to describe certain shapes. Similar to other vector graphics, SVG characteristics is best for working with two-dimensional line art and shapes. To read the SVG 1.1 specification, visit www.w3.org/TR/SVG11.

Because SVG is a vector graphics format, it is also scalable. A circle image stored as a vector graphic has the same file size whether it is saved with a diameter of 90 pixels or 900 pixels. In addition, the use of XML in SVG files allows the graphic to become an object in the X/HTML page, enabling access to the full XML document object model. Therefore, filters, masks, scripting and mouse events can be tied to SVG files. And because SVG graphics are stored as simple XML files, they are searchable and can be easily manipulated NOTE: with Web programs to support zooming, rotation, movement and other types of image This course manipulation. (XML will be discussed in more detail later in this course.) introduces XML in a later lesson. Figure 9-6 shows a brief sample of well-formed SVG code syntax. This example shows XML code, which is case-sensitive but does not strictly require the use of lowercase letters for tags. If this code were XHTML, all of the tags would need to be typed in lowercase letters.

Figure 9-6: SVG image file syntax For more information about SVG, you can visit the following URLs:

• www.w3.org/Graphics/SVG • www.mozilla.org/projects/svg/

NOTE: Creating and Optimizing Images It is important to understand the Creating Web-quality images requires the knowledge and use of a graphics application. concept of This aspect of Web design can be the most difficult to master. Depending on the size of copyright infringement. It is your organization, a graphic artist might design all the images. If you are not artistically commonly believed inclined, many resources on the Web offer images for free use. High-quality graphics are that images and text on the Web not usually free. As an alternative, you can subscribe to Web sites that offer tens of can be "borrowed" thousands of graphics. These subscriptions can range in price from a nominal monthly simply because it is fee to more substantial annual fees. possible — and easy — to copy them. Be sure that any graphics you use on your Web site are copyright free. Web site The ability to copy text must also be your company's original creation or licensed for you to use. material from the Always check the legal statements on any Web site whose material you want to Web does not make borrow. Copyright infringement is illegal and punishable by fine and it legal to do so. imprisonment.

Web images and accessibility OBJECTIVE Good Web graphics must be aesthetically pleasing, relevant to the site's purpose and, 4.1.2: Accessibility most importantly, small in file size. File size directly affects download time and is a key issues with images and animation consideration for the Web developer. Developers must consider bandwidth requirements for the images used on a page.

According to WebSiteOptimization.com (www.websiteoptimization.com), about 95 percent of the Internet connections in the United States are broadband (as of December 2009). Although this does mean that most users can view content that requires high bandwidth, it also means that some users are still connecting with a modem. The most common modem connection speed today is 56.6 Kbps.

Even with a high-speed Internet connection, images that are unnecessarily large will take longer to download than users may be willing to wait. A graphic-intensive page can initiate poor reviews if the content is overwhelmed by a lengthy download time due to image misuse.

If the site is intended for use as an intranet application over a network, then many obstacles are removed. At the same time, remember that an intranet serves a different NOTE: The effect of images purpose than an Internet application. An Internet presence is for public use and on Web page file represents the face of the organization to the outside world. It should provide an size and download enjoyable experience. An intranet is for business purposes; it is intended for quick and times is a key consideration for easy access to information and resources. If an intranet application is too graphical and Web developers. flashy, it reduces worker productivity. You can think of the intranet as more function- oriented, and the Internet as more presentation-oriented.

The alt attribute The alt attribute provides alternative text in place of an image on an XHTML page. The syntax for using the alt attribute is as follows:

For reasons of user accessibility, the XHTML Transitional specification requires the alt attribute for your code to validate to the standard.

NOTE: The alt attribute is useful for several situations: The alt attribute is easy to add to Web • Users who have disabled the image-viewing capability on their browsers can read the page images. This simple addition image name or link destination. does more than make a Web site • Users can read the image name or description while an image loads. more accessible. It also helps sites • Software can provide accessibility options for vision- and hearing-impaired users. appear more thorough and professional even to Image optimization users who do not require it for For the Web designer, none of the benefits of the GIF, JPEG or PNG are realized unless accessibility purposes. optimization is considered. A misconception is that any one of these formats is better than the others. As you learned earlier, each image format has special benefits that make it unique. As a Web designer, you must learn which format to use for any particular graphic. Consistently using GIFs or JPEGs does not ensure that you are optimizing your image use.

Following are some guidelines you can use to help optimize your Web graphics:

• Use colors from the browser-safe color palette. • Use the fewest colors possible. • Use solid colors whenever possible. • Avoid anti-aliasing when possible. • Use optimization utilities.

Optimization sources Many sources are now available to help the Web designer optimize graphics. The basic procedure of optimization is determining the smallest color palette possible and choosing a file format that results in the quality required. The most commonly used optimization tools are included in graphics applications such as PhotoShop CS6, Fireworks CS6 and others. Two other common image optimizers are now in use as well: online versions and desktop versions.

Online image optimizers typically require an annual subscription fee, which varies depending on the number of pages or graphics you want to optimize. Some other services are free. The Web designer simply enters a URL for the images. The online program visits

the site to download and optimize the images. The designer is then granted access to the optimized images. The following services provide online image optimization:

• GIFBot from NetMechanic — www.netmechanic.com/products/accelerate.shtml • SiteScan from OptiView — www.optiview.com/ The desktop image optimizers perform the same process, except the images being optimized need not be made available on the Web for the service to access them. The following services provide desktop image optimization:

• DeBabelizer Pro from Equilibrium — www.debabelizer.com/Internet/Equil/Products/DeBabelizer/index.html • Ulead SmartSaver Pro from Corel — www.ulead.com/ssp/ • GIFCruncher from Spinwave.com — www.webreference.com/services/graphics/gc/ In the following lab, you will evaluate and optimize image files using a free online optimization service. Suppose your project manager tells your Web team that the site you are currently designing is exceeding file size limits recommended by the marketing team for your site's target audience. Your project manager asks you and your team members to review the site pages, and consider ways to reduce download time without sacrificing the content or design you have all been working hard to create. You can suggest using an image-optimizing tool such as this one to evaluate your site's images and reduce file sizes wherever possible.

Lab 9-2: Optimizing images for Web use

In this lab, you will use a free online image-optimization service from NetMechanic called GIFBot. This service will evaluate the graphics and links on a designated page, provide a summary of the site graphics, then provide optimized versions of the graphics for you to choose, download and keep.

1. Browser: Go to www.netmechanic.com/products/accelerate.shtml. You will see the NetMechanic GIFBot page, as shown in Figure 9-7. Click the Try It Now link.

Figure 9-7: NetMechanic — GIFBot page 2. In the GIFBot Free Sample section, enter a URL to any Web site in the URL field (Section 1), as indicated in Figure 9-8. You can use your company Web site or any site you frequently visit and want to test. Or, if you prefer, you can upload a file from your computer by clicking the Browse button.

Figure 9-8: Entering URL to test images

3. Enter an e-mail address (Section 2).

4. Select Both GIF And JPEG from the Output Format drop-down list (Section 3).

5. Click the Test Now button to proceed.

6. The service will begin downloading the images and evaluating them. Notice the progress indicator that appears as the images are being evaluated. When the evaluation is complete, a full report will appear, as shown in Figure 9-9.

Figure 9-9: Image evaluation report 7. Scroll down to view the results. Notice the file size of each image. In the Image Size column (Figure 9-10), click a file size (which is a link) of one of the larger images listed in the report.

Figure 9-10: Image file sizes

8. You will see repetitions of the same graphic as you scroll down the page. Notice that next to each copy is information about the graphic, including type, image quality, size, download time and percentage of file size savings. You can now compare the optimized image with the original image by moving your mouse pointer over each image. As you do, the original image will appear. Move the mouse pointer away and the optimized image will reappear, providing a precise comparison. You may find that you must scroll down to test several images before noticing a change. In the example in Figure 9-11, there is a significant degradation of image quality as the file size is reduced. This indicates that the image is already fully optimized.

Figure 9-11: Comparing optimized image versions

9. If one of the optimized images is acceptable, click that image. The image you select will open in a new browser window.

10. Right-click the image and select Save Image As. Specify a name for the image, then click the Save button. You now have an optimized version of the image.

By optimizing all the images on a page (and a site), you can dramatically reduce download time, providing users with a faster browsing experience.

Image slicing and splicing Another technique that is used to help shorten download time of large images (such as image maps) is a process called slicing.

The slicing process involves dividing images into several smaller images. With the use of HTML tables, the image can be reconstructed or spliced back together in the browser window. Slicing does not change the file size of the image, but rather gives the appearance of faster loading because the user sees portions of the image (the smaller image sections) before the entire image has downloaded.

Many slicing applications are available; some are freeware, whereas others are available for a fee. Essential Graphic Design Concepts Graphic design is a collection of disciplines (from visual arts and age-old printing to page- layout methods) that are used in order to construct a piece of visual communication. You apply various graphic design principles in Web design to create successful Web pages that draw a visitor in, give him the information he wants, and move him around your Web site.

Throughout this course, you will learn graphic design principles and apply various graphic design techniques. The following section discusses three essential concepts of graphic design that you can apply when creating your Web pages. These concepts are: composition, grid-based layout and typography.

Composition Composition is the placement or arrangement of visual elements, whether on a canvas, a printed page or a Web page. Composition involves what draws the viewer's eye into the page, or where the viewer "enters" the page, and deals with how to lead the eye through the page. When considering composition, the designer must determine what the central point of interest on the page will be, and then compose other elements of the page accordingly.

Each page should have a focal point. Avoid the mistake of trying to make everything on the page stand out.

Visual hierarchy When viewing any form of visual communication, the eye is attracted to the point of highest contrast. Consider a painting. Objects that are most important in the work are closer than the less important objects in the background. The artist helps us to see which objects are closer by painting them larger than the rest, and with more intense color, color depth and clarity than objects in the background.

You create a visual hierarchy in a Web page by varying text size, weight and color. Titles, subtitles and body text are used to create this hierarchy because the human eye is trained to look for the points of highest contrast first. By emphasizing the titles, and then to a lesser degree the subtitles, etc., you make the outline of the page readily apparent. This helps the visitor ascertain the organization of the page quickly. An outline is the simplest form of visual hierarchy.

Grouping Grouping related elements on a page helps to define the page's structure. When we first glance at a page, we try to group the elements in our minds in order to simplify the visual field. We use grouping to ignore the details and grasp the main concepts. A good designer facilitates this process by grouping Web page elements on the page.

Grouping occurs when objects have similarities in shape, color, size, location and proximity. Apply the same typeface, color, weight, etc., to all the objects in a group so that a viewer can easily identify all the elements that comprise the group.

Visual cues A basic principle of composition is that the eye follows lines, gesture and movement in the page (whether these are real or implied), and that it rests temporarily on masses before moving on. Masses include images and shapes (remember that words and paragraphs are shapes too). Therefore, the placement of elements on your page will affect or guide how the eye moves around the page.

Human faces and gestures in images play a big part in overall compositional flow. Be sure to place these types of elements so that they point into (and not off of) the page. Our eyes also tend to move around the edges of shapes, including the page or browser borders, so placing visual cues along these boundaries redirects the eye back into the page to discover other levels of your visual hierarchy.

Integration of elements Integration of page elements is achieved when the page appears as a whole unit instead of as a collection of various elements. In order to achieve integration, you should repeat colors, shapes, lines and patterns throughout a page. Repeat this use of color and pattern throughout all the pages of the Web site so that the entire site is unified.

Grid-based layout A typographic grid is a two-dimensional structure consisting of intersecting vertical and horizontal lines. The modern typographic layout grid has been used for producing printed material since the 1940s. But the Web designer's interest in grids is a fairly recent development.

The purpose of the grid is to help designers achieve coherency when organizing a page. As the vertical and horizontal lines of the grid intersect, boxes called grid units are formed. Text and graphics to be placed on the page are placed within the grid units. Because of the regular and balanced occurrence of grid units on the page, Web page elements placed within the grid units are aligned and balanced with each other. The grid becomes an underlying framework for the page, providing spaces in which to "hang" or attach various elements. The grid helps the designer create a balanced, harmonious composition.

The theory behind using grid-based layout is that aesthetics can be constructed. That is, if you use a well-defined grid that fits the purpose of your content, and then you place elements within the grid units, you will most likely have a good start at creating a page that is aesthetically pleasing.

There is no hard and fast rule concerning how many grid units to create, or how far apart they should be spaced, or whether they should be spaced evenly. Grids can be used to underpin one-, two- or three-column layouts, or even more. Some designers prefer evenly sized columns; others prefer to use ratios to determine the size of narrower and wider columns. The key is to determine a grid that is suitable for the content you want to display.

NOTE: Visit The golden ratio www.maths.surrey. Ratios are often used for composition in art and print. For example, the golden ratio (also ac.uk/hosted- called the golden mean, the Fibonacci spiral and the divine proportion) has been used in sites/R.Knott/ Fibonacci/fib.html art and architecture for centuries. This ratio is evident in nature as the number Phi for more information (1.618033988749895) and is found in many places, such as in the spirals of a nautilus on the Fibonacci spiral and the shell, in the petal distribution of various flowers, and in the seed heads of numerous golden mean. plants.

To create a design grid based on the golden ratio, do the following:

• Determine the width of your design area. For example, if you were designing for a monitor with a resolution of 1024x768, the page would not be more than 1004 pixels wide. Let us assume that our design width will be 984 pixels. • Divide the design width by Phi (1.62 is sufficient). 984 / 1.62 = 607.4074. Round to a whole number, to arrive at 607. The width of the wider column (let us call it the main column) would be 607 pixels. • Subtract the width of the main column from the design width to determine the width of the narrower column. 984 – 607 = 377. The narrower column would be 377 pixels wide.

Using these measurements, you would create a two-column layout with a main column that is 607 pixels wide and a secondary column that is 377 pixels wide.

If you were designing for a monitor resolution of 800x600, assume the design width to be 760 pixels. Using the formula in the previous example, the main column would be 469 pixels wide and the secondary column would be 291 pixels wide.

You can also use percentages for a flexible-width layout: 100% / 1.62 = 62% for the main column, leaving 38% for the secondary column. A flexible-width layout adjusts to the size of the browser window.

Typography glyph To a designer, the appearance of words is as important as their meaning. The designer An element of writing. strives to create balance and relationship between the elements on a page. Typography is the art of arranging and designing type and modifying type glyphs. This section is meant to be only a brief introduction to typography.

Definitions Although typography is an ancient craft, many of its terms have fallen out of use and require defining. measure A measure is the name given to the width of a body of type. The three basic units for The width of a body of type. defining the measure's width are as follows:

• One point = 1/72 of an inch • One pica = 12 points • One em (pronounced "em") = the distance horizontally equal to the type size, in points, that you are using. For example, 1 em of 12-point type is 12 points. On a Web page, a pixel may also be used as a unit for defining the width of a measure. leading Leading (pronounced "ledding") is the vertical space in a text block; it is the distance The amount of added vertical from one baseline of text to the next. Leading strongly affects the legibility of text. Too spacing between much leading makes it hard for the eye to locate the next line of text. Too little leading lines of type. makes it difficult to distinguish the lines of text from one another.

Legibility The first thing a viewer sees upon arriving at your Web site is not the title or other details, but the overall pattern and contrast of the page. The repeating patterns

established through the use of organized text and graphics increase legibility and help the reader grasp the organization of your content. Because Web browser windows are resizable and because some users may set their browses to display very large type, it is difficult to arrive at an optimal size for measure. In general, a measure of 52 characters to 78 characters (including spaces) should allow for comfortable online reading. Proper leading will keep the eye moving along the line of text. In print, a simple rule for legibility is that leading should be 2 points greater than the size of the type. On a Web page, you might want to consider making the leading 2 points to 4 points greater than the type size. If you use reverse text (white text on a black background), increase the leading and decrease font weight to improve legibility.

Typeface When designing your pages, you want to create a harmonious fit between the text and the visual flow of content. While there are many typefaces from which to choose, each with its own unique tone, there are still some user systems on which only the default operating system fonts are installed. If the font you specify is not available, the browser will substitute the default font. Make yourself familiar with the fonts that are resident on various operating systems, such as those on a Windows system and those on a Mac. You can find a list of common and equivalent fonts for both of these operating systems at www.ampsoft.net/webdesign- l/WindowsMacFonts.html. Instead of specifying a single font to be used in your Web page, specify a font family that includes at least one font from both operating systems (e.g., Verdana, Geneva, Helvetica). The most conventional scheme for typefaces is to use a serif font for body text and a sans serif font for headings. Whichever fonts you choose, make sure they look good on the screen. You should also consider the nature of your content and how the content on your page will be used. For example, Times New Roman is a good choice for pages with a lot of body text that will most likely be printed. Times New Roman looks good on the screen and it looks good in print as well. Georgia and Verdana were designed specifically for computer screens. They look good on a Web page, but they look oversized and cumbersome in print.

Case Choosing uppercase or lowercase letters has a strong effect on the legibility of your text. As we read, our eyes scan over the text, recognizing words primarily by their shape, not by parsing each letter and then assembling a recognizable word. Words that are formed from all capital letters are shaped like rectangles — they offer no visual clues as to what the word is. Reading text that is in all uppercase letters is tiring and monotonous.

The use of initial caps (capitalizing the first letter of each word) in headings also disrupts a reader's ability to scan for word forms.

Emphasis You will want to add emphasis to various elements on the page in order to give visual clues about the page's structure. Small variations are usually enough to establish visual contrast. A good rule of thumb when working with text is to add emphasis using one parameter at a time. For example, if you want to add emphasis to your section headings,

increase their size by one measure, or keep them the same size as your body text and make them bold.

Bold text gives emphasis because it contrasts in color from the body text. Bold text works well on section subheadings, for example. However, large blocks of bold text lack contrast and lose their effectiveness.

Italic text attracts the eye because its shape differs from the body text. Italic text should be used for specific purposes, such as listing a book title, or for foreign words and phrases. Large blocks of italic text, however, are difficult to read.

Underlining sections of body text or making the text a different color may cause users to assume that the text is a hyperlink. Colored text does work well to distinguish section headings, but you should avoid using colors that are too close to the default Web link colors of blue and magenta.

You can also add extra spacing around a block of text to isolate it and thereby draw attention to it. This is a subtle but effective technique.

Type size and accessibility We have all seen Web sites with absurdly large headings (or perhaps with ridiculously small headings). For this reason, many Web designers avoid using the standard heading tags (H1, H2, etc.). However, these tags help give the document structure.

You can, of course, adjust the size of the headings to something more harmonious and give your page a more unified look. There is much room for artistic impression when determining the relative sizes of your text and headings. For example, since about the 16th century, typographers have been using a series of 16 typeface sizes (between 6 and 72) that have generally been accepted as both legible and pleasing to the eye. The sizes in this series are related to one another. Many designers prefer to use these old and established type sizes, while others seek to create their own relationships among varying sizes of type on the page. Conforming to accessibility standards has made the prospect of specifying type size more daunting than it has been in the past. If you specify your type size in pixels, for example, the size is absolute. This helps you keep a firm hold on how your text will render in the browser and keeps your page design intact;. but it also prevents, for example, a vision-impaired user from enlarging your text so that it is legible.

NOTE: To ensure the scalability of text, the designer must use relative units, such as the em Cascading Style unit, to control aspects such as type size, indents, margins and leading. The W3C Sheets (CSS) will be discussed in detail in recommends that you let the user set the base font size in his browser, and that you set a later lesson. all variations using the em unit. Consider the following line of code from a Cascading Style Sheet (CSS):

P { font-family: arial, "lucida console", sans-serif

Text-indent: 2em }

In this example code, if the user sets his default font size to 12 points, then a 2-em text indent would be 24 points. If the user changes his default font size to 16 points, then the 2-em indent would change to 32 points to reflect the larger size. Ensuring scalability using a method such as this requires that you use a highly adaptable page layout that will accommodate text of varying sizes.

Case Study Online Art Show Adalberto wanted a Web site for selling his paintings. He envisioned an online gallery of photos of his paintings, with information about each piece and sales offerings. He contracted a Web developer named Sonja, and they began talking about the design.

Sonja explained that the most important factor in the design of this online gallery would be ensuring that high-resolution images of the paintings were available without requiring users to wait for large files to download.

Sonja came up with two options. One solution was to create a slideshow of medium-sized images, in which the site visitor could look at one photo at a time and have the option on each page to download a larger version of that photo. The other solution was to create several pages of small, thumbnail photos, each of which the visitor could click to view a larger version of the photo.

Sonja and Adalberto decided to use the thumbnail solution in order to minimize the required download time, while maximizing the number of paintings each site visitor would see.

* * *

Consider this scenario and answer the following questions:

• This case study demonstrated two creative solutions to a problem involving image download times. Can you think of other solutions that might also have worked in this scenario?

• What advantages might there have been to using the first solution offered in this scenario? Would that solution work better for some other type of content or site?

• What other types of Web sites or pages might face challenges related to image download times? What approaches might work better for different types of sites?

Lesson Summary

Application project

Graphic images do more than make your Web site more attractive. They make your site more memorable to users; they reinforce ideas and themes; and they help sell products. Images provide visual information and bring the concepts discussed on your site to life. Good images are critical to a Web site's success.

But where can Web developers acquire good images if they cannot create the images themselves? Remember that any content you find posted on the Web — images, text, animation, music and so forth — is protected by copyright laws that prohibit anyone but the content's creator (or other rightful owner) from using that content without permission. The fact that you are able to copy material from the Web does not mean that you are allowed to use it on your own pages.

If you need graphics and cannot create your own, some Web sites offer graphics that you can download and use for free. Note that these sites may impose certain requirements in exchange for use of their work, including credit attribution or restriction to non- commercial use.

To locate sites that offer free graphics, visit a graphics site such as www.freegraphics.com, or enter "free graphics" in a search engine. Can you find graphics that are suitable for your own Web site? At each site, scroll to the bottom of the home page and look for a copyright notice. Even though the graphics are offered for free use, they are usually copyrighted by the creator and subject to the creator's terms for use. Were there any requirements you were asked to satisfy in exchange for use of these files?

Skills review In this lesson, you learned about the importance of Web graphics. You studied the most common formats, along with the advantages and disadvantages of each. You also learned about the differences between raster graphics and vector graphics. Finally, you studied the tools and techniques that Web designers use to create and optimize graphics.

Now that you have completed this lesson, you should be able to:

 3.3.1: Distinguish between vector and raster graphic types.  3.3.2: Identify and choose appropriate image file formats, including browser- compatibility issues and lowest common denominator in audience usability (e.g., GIF 87a, GIF 89a, JPEG, JPEG 2000, PNG, BMP).  3.3.9: Insert metadata into images to ensure accessibility and to ensure higher page ranking in search engine result pages.  3.3.10: Identify the benefits and drawbacks of using stock photography when developing a site (e.g., license-free vs. licensed stock photos, increase in project speed, reduction in creative control).  4.1.2: Identify accessibility issues and solutions related to Web images and animation (e.g., text-reader capability, captioning).  4.1.5: Identify Scalable Vector Graphics (SVG) characteristics (e.g., XML-based, two- dimensional, searchable, scalable, zoom support).

Lesson 9 Review

1. Why is file size an important consideration when choosing graphics for your Web site?

2. Name two common forms or uses for graphic images in a Web site.

3. What is a pixel?

4. List at least three image file formats (or corresponding file name extensions).

5. Name at least two guidelines for optimizing your image files.