Graphics ... C H p E R EXAM OBJECTIVES. + Role of Web graphics in site design. + Color depth and resolution. + Graphic file formats

Transcription

1 Graphics EXAM OBJECTIVES C H p E R Role of Web graphics in site design + Color depth and resolution + Graphic file formats + Image optimization + Using Jasc Paint Shop Pro

2 Chapter 4.. Graphics 83 Graphics are as essential to Web sites as text and markup. Graphics contribute significantly to the first impression a user has of a site and the usability of the site. Graphics also affect how quickly a site's pages are downloaded over the Web. Being able to use graphics effectively and having the right tools for working with graphics are key aspects of any site designer's skill set. In this chapter, you learn the role graphics play in site design, the fundamentals of how graphics are built, in which file formats you can store graphics, and how to optimize graphics for use on the Web. In addition, you learn how to use a common image development application-paint Shop Pro 6.0-to create and manipulate images for the Web. Images and Site Design ~ Role of Web graphics in site design Rarely do you come across a Web site, or just a Web page for that matter, that doesn't use graphics as an integral part of its design. The graphics you choose for your Web site can have many different roles and contribute to many different aspects of the page, including: +- Navigation. Oftentimes, graphics are used as navigation devices. Users click on buttons and image maps to get from one place in a site to another. You can use text hyperlinks for navigation too, but graphics make the user interface more aesthetically pleasing and provide a richer experience for the user. +- Overall look and feel. A consistent look and feel and a consistent interface are important tenets of Web design. This consistency can be achieved using a collection of similarly themed graphics. +- Branding. In today's business world, consistent branding across all aspects of a company's collateral-products, Web sites, brochures, and the like - is considered a necessity. A standard color scheme and standard graphics contribute significantly to branding. When you incorporate these standard visual elements into a Web site, you can easily make it fit the brand of a particular company or product. During the Web's infancy, graphics were used sporadically, were often not well designed, and didn't contribute significantly to a Web page's content. As the Web has matured and become a standard method of communication for all types of information, the role and quality of graphics have grown Significantly. To use graphics effectively as part of an overall Web design approach, you need to keep an eye on three elements of graphic design:

3 84 Part I.. Exploring Web Site Design Methodology.. Image design and relevance. Does the image fit with the page's overall theme and content?.. Usefulness. Is the image functional? Does it help users navigate or give them more information? Does it promote consistency or brand recognition?.. Size. Does the image download quickly? Of these three elements, the most important and most often ignored is image size. In the following section, we examine the many issues associated with reducing image size without sacrificing the user's experience or image quality. Exam Tip It's important to know the characteristics of a good image. Keeping an eye on image size Second only, perhaps, to shoddy navigation, graphics can make or break a Web site. If your graphics don't compliment your site or they take too long to download, even the most dedicated user won't spend much time on your site. Unattractive graphics that detract from a site are problematic to say the least, but the bigger concern for designers is graphic size and download time. You should strike a balance on your Web pages between aesthetics and file size. You want your pages to look good, to function well, and to promote a solid user experience. At the same time, you're subject to your users' bandwidth limitations. Images contain significantly more information than plain-text files, and, as a result, image files are usually bigger than the HTML pages that reference them. Every graphic that you add to your Web page adds to the total download time for the page. It's up to you, as a Web designer, to use graphics wisely so the pages you build don't take too long to download. High-speed networks such as cable connections, Digital Subscriber Lines (DSL), and fiber-optic lines raise the bandwidth baseline. Fortunately, these high-speed networks are starting to reach the everyday user at home and work. However, many users still connect to the Internet with 28.8 Kbps modems and these users still expect Web pages to appear in relatively short order. This is the lowest common denominator that you have to think about when you're adding graphics to a Web page. There are many different ways to test your Web pages to see how long they take to download over different bandwidth connections:.. Get a stopwatch and test the pages yourself if you have access to several different speed connections to the Internet. Be sure you test your pages at different times of the day as well. A page may take longer to load at 2:00 p.m. when the entire business world is online than it will at 10:00 p.m.

4 Chapter 4 Graphics 85 Tip Note that this applies namely to users with dial-up connections. If you're developing a site for an intranet, testing the pages for download time isn't as crucial ~ because intranets usually have dedicated lines with lots of bandwidth. Ask colleagues and friends to take a few moments to test a sample page or two. Ask them to supply you with the time of the test as well as what kind of connection they had to the Internet during the test. Run a test page through one of several online Web sites that test for load time. Our two favorites are Web Site Garage ( i tega rage. net sea pe. com) and Doctor HTML (w ww2. i mag i wa re. eom/ RxHTML). If your first test of a page you've designed leaves you with frightening results, you should think about optimizing your images or removing some of the images in favor of text or form buttons. In general, you don't want your Web pages to take longer than 10 or 15 seconds to download at even the busiest time of day. The reality is that users simply won't stick around that long to wait for your page, no matter how compelling or useful your content is. The best way to get the most bang from your image buck is to have a solid understanding of how images work, which file formats are best suited for which particular kinds of images, and what you can do to optimize your images so their file size is smaller but you don't compromise quality. Several sections in this chapter focus on the important topics of how images work, the ins and outs of file types, and optimizing images. The "Digital Images" section discusses image basics, the "Image File Formats" section covers all information related to choosing the correct format for a given graphic, and the "Optimizing Images for the Web" section discusses several techniques for reducing image file size. Acquiring graphics for your Web pages Before you can use images wisely on your pages, optimize images, or even choose an image file type, you need to have images. A common dilemma for many Web designers is where to get the images that are a prerequisite for a well-built Web site. You have several different options for acquiring images: Build them yourself Pay someone else to build them Use clip art Troll the Web for images The following sections look at the pros and cons of each option as well as issues to think about as you weigh your options.

5 86 Part I Exploring Web Site Design Methodology It's important that you know how to calculate the download time for files to be copied remotely. (Normally, this means from the Internet.) This is important when dealing with images and various types of multimedia in your Web pages. The basic formula is to divide the size of the file(s) or object(s) to be downloaded by the usable bandwidth for your connection. To calculate the total size of files or objects, add up all the sizes of associated files and objects from your Web page; this total must include all images, the HTML document for the Web page itself, associated scripts, style sheets, and so forth. This calculation provides the dividend for your calculation (the number to be divided). Calculating usable bandwidth for a connection means one of two things. The quickand-dirty method is to assume the entire bandwidth is available, and to simply divide the total amount of data (the dividend) by the bandwidth of the connection (the divisor). A more accurate method is to use a bandwidth speed test (like the ones available at ingcent r a l.ms n. com/ inte l' net/speedt est.a sp or athttp : // ba ndw i dt h p 1 ace. coml s peedtes t/) and use the number reported as the divisor in your calculations. To produce a meaningful result from your calculations, however, you must convert the file size and bandwidth numbers into some common unit of measure. This is typically bytes or bits. To convert your file size from kilobytes (KB) to kilobits (Kb), multiply the file size by 8 (1 byte = 8 bits). Bandwidth is normally reported in bps (bits per second), so this conversion will put both numbers into the same unit of measure. Now, divide the number of bits in the file by the number of bits per second for the usable bandwidth of your connection. For example, assume the Web page to download is 150K in size. Convert that to bits by multiplying 150 by 8 (to go from bytes to bits), then by multiplying by 1,024 (to go from kilobits to bits). This produces the formula 150 x 8 x 1024 and calculates to 1,228,800. Let's assume the target user has an ISDN line, running at full capacity at 128 Kbps. In bps, this actually calculates to 128 x 1024 or 131,072. Divide 1,228,800 by 131,072 to produce a result of 9.375, which means the target user can download the file in just a little over 9 seconds. Build your own graphics Build ing your own graphics requires some artistic savvy, a good tool set, and a good sense of design. Not everyone is an artist, but with a good tool set, as well as some practice and guidance from other Web desi gners, you can build solid graphics that can enhance your Web site. We know many Web developers who have become reasonably good at building their own images, so this is a viable option for just about any designer. Hire a professional graphic artist Fo r high-end and corporate sites, the path to the best graphics is often through a professional, Professio nal Web graphic artists can create suites of graphics that can help maintain consistency and branding througho ut an entire site. One of the greatest advantages of using a professional graphic designer is that he or she has

6 Chapter 4 Graphics 87 access to many graphics resources that you don't. If you can afford to pay a professional, we highly recommend that you do. A concern for many designers is that they feel once they hire a professional graphic artist, they're tied to that artist for all of their graphic needs. Although this is a valid concern, don't feel that it's insurmountable. If you're comfortable with graphic tools, you can usually take the base buttons and graphics the artist builds for you and repurpose them yourself as necessary. Be sure to get all pertinent information from the artist, including which fonts and any special color pallets they used during the creation of the graphics. Also, have the artist deliver all versions of the graphics to you, not just the ones optimized for the Web. Work with clip art Clip art has come a long way with the advent of the Web. You can buy clip art CDs with thousands of images on them for very little money. You can open and tweak the images in standard graphic editing programs such as Photoshop and Paint Shop Pro. Our biggest concern with clip art is that it may be difficult to gather a collection of images to present a consistent look and feel for your pages. However if your resources are limited and you don't want to build all of the graphics yourself from scratch, a good clip art collection will get you started. To find commercial clip art packages, visit your favorite search engine Web site and search for "clip art." Download images from the Web The Web is a wonderful resource for images of all kinds. There are entire Web sites devoted to providing free graphics to Web developers. If you choose to use images you download from the Web on your own pages, be sure to read the terms of use posted on the image distribution site Gust about every graphics site has one). Often, sites restrict the use of graphics to personal use and require that you put a link back to the site from your Web site. If you want to use the graphics on a commercial site, contact the site's owner first to get permission. Possibly the biggest concern you'll face when you choose to download images from the Web is that the images you use on your site may also be used on hundreds of other sites. It's difficult to create a customized look and feel for your site when you download graphics from the Web. In general, we recommend using graphics freely available on the Web for personal home pages but not for company sites in which branding is important. Creating complete image elements Not everyone on the Web can see images, and for those who don't, the use of images still impacts their Web experience. If a user has graphics turned off and is using a graphical browser such as Internet Explorer or Netscape Navigator, he or she will still see place holders for the graphics. If users browse the Web with a text browser, such as Lynx, they know graphics are in the page but they can't see them.

7 88 Part I.. Exploring Web Site Design Methodology When you're. designing for an intranet - as opposed to a Web site for general public consumption -the role of images and your image considerations change a bit The goal of an intranet is to disseminate information efficiently over a network to a wide body of users. An intranet may serve a company of 5 or 5,000. Regardless of the size of an organization, its intranet is still designed to make information easily accessible. Because the focus of an intranet is information dissemination and not promoting brand awareness, selling products, or spreading a marketing message, the look and feel of the intranet doesn't need to be as elaborate as it might be for a corporate Web site. Images on intranet pages should be functional and help guide users to the information they are looking for. Splashy logos or animated graphics don't really have a place on an intranet A benefit intranet designers get over Internet site designers is that you often know more about the standard computer and browser configurations the majority of users have. Most organizations standardize on one or two browsers and one or two operating systems. You can work with an IS department to get good information on the standard user setup, how many users have non-standard setups, and build your pages accordingly. In addition, intranets are often only.available over closed networks; therefore, bandwidth is faster and modems are few and far between. The graphics you do use don't have to be as tightly optimized as those on an Internet site. Because graphics can contribute to the content and functionality of the page, it's important that you provide alternative text for all images that you use in your page so their content and function aren't lost on those who don't or can't view images. Add alternative text to your image using the a 1 t attribute in the i mg tag, like this: <img src="corporate_l ogo.g if" alt=" Computer Serv i ces. Ltd. - Computer Co nsu lting Firm" > Although users may not be able to see the corporate logo embedded in the page with the previous i mg tag, they know what key information the logo conveys: the name of the company and what its primary business is. For images that display bullets or are designed to create white space, an asterisk or dash is a sufficient value for the a 1 t attribute. All other images should have some sort of meaningful description stored in the attribute. To test a Web page to be sure that your alternative text is meaningful and your pages are useful to users without images, clear the cache in your browser, turn off image display in the browser, and load the page. Try to navigate around the page and other linked pages without turning on graphics. If you can't get around or perform activities that you know the page supports, revisit your alternative text and general page layout to find ways to make the page more functional when images aren't displayed.