98 Part I Exploring Web Site Design Methodology

Transcription

1 98 Part I Exploring Web Site Design Methodology Animated GtFs An animated GlFis a sequence of image files that are displayed one at a time to create a movie-like display. You can use animated GIFs to include short movies (animation) in your pages without requiring that the user download a special plugin. However, animated GIFs can only contain GIF files and don't include a facility for adding sound. Animated GIFs are saved in the GIF format and are comprised of images saved as GIFs. A Web page treats an animated GIF like any other image file and downloads the entire animation at once. If you have several, large animated GIFs on one Web page, they can greatly increase the time it takes to download the page. After the animated GIFs are downloaded to the user's browser, they can play repeatedly without being downloaded again. The most difficult part of creating animated GIFs is creating the individual images that go into the final animation. For the GIF to flow smoothly, the images have to transition easily from one image to the next. You can use any standard image-editing tool to create the images for animated GIFs. However, you need a special tool to combine the images and create the animation. Animation tools have become very sophisticated and allow you to control the length of time between individual frames in a GIF and optimize the images in the final animation to help reduce file size. Tip The Animated GIFs page on Yahoo at ho o.com/ Entertainment /Comic s_and_animation/animation / Computer_Animat ~ i on I An i ma ted_g IF s I has links to several informative animated GIF sites. JPEG The Joint Photographic Experts Group (JPEG) file format is the other standard image file format most widely supported by Web browsers. JPEG was created as a way to overcome the color depth limitations of the GIF format. Image files are automatically compressed when they are saved as JPEG files and Web browsers decompress the images before they display them. You can control the level of compression when you create JPEG files. The most significant benefit of JPEG files is that they support up to 16.7 million colors, as opposed to GIF's 256 colors. However, JPEG isn't a lossless format, and when you compress images with deep color depth into the JPEG format, the quality of the graphic may suffer. The more compressed the graphic is the fewer colors it maintains in its color pallet. One of the tricks of building good JPEG files is striking a balance between image quality and image size. Although JPEG supports 16.7 million colors, remember that only 256 colors of those 16.7 million can be displayed at any time. You don't have any control over how the browser reconciles the myriad of colors in a JPEG with the 256 colors it can display. Dithering of JPEGs is the most common reason for degradation of image quality. In general, JPEGs work best with digital photographs and on Web sites where graphic quality is extremely important and bandwidth isn't as much of an issue.

2 Chapter 4.. Graphics 99 Some developers use JPEG for all of their images and build sites that look good and download quickly. If you choose to use JPEG as your file format to take advantage of the color depth, keep a close watch on the file size of individual graphics and for the entire collection of graphics on a Web page. In the Real World The need to have greater color depth without loss of quality is very important to Web design. JPEG 2000 is a new version of the JPEG format that should improve the loss associated with the JPEG format while maintaining the quality of images. PNG Portable Network Graphics (png) is the latest Web graphic file format and is a W3C specification. It was developed with the needs of designers and the drawbacks of GIF and JPEG in mind. PNG has several characteristics you commonly find in GlF or JPEG:.. PNG graphics are loss less.. PNG graphics can be transparent.. PNG graphics can be highly compressed.. PNG graphics can have great color depth The main drawback of using PNG graphics is the lack of consistent browser support. Early versions of the major Web browsers (2.0, 3.0, and early 4.0) do not have support for PNG at all. The first PNG support appeared in Navigator 4.7 and Internet Explorer 5.0. As the 2.0 and 3.0 browsers are phased out, it will be safer to utilize the PNG file format. The most effective use of PNG graphics is on intranet sites where you know more about your audience and the Web browsers they use. If you're fairly sure that your pages will be viewed with 4.0, 5.0, and later browsers, you can safely use PNG. Most major image-editing programs now support PNG, so you can convert old graphics from GIF or JPEG, build new graphics, and save them as PNG files. SVG Scalable Vector Graphics (SVG) is an attempt to bring vector graphics to the Web. SVG uses the Extensible Markup Language (XML) to describe the mathematical equations that make up vector graphics and is being developed by the W3C. As of July 2001, SVG is a Proposed Recommendation, which means that it should soon be a full-fledged specification. Support for SVG is emerging - albeit somewhat slowly. A key benefit of SVG is that XML files are saved as plain-text files and are generally smaller than comparable binary image files. SVG files can also be added to HTML files as XML objects as well as take advantage of the XML object model in browsers that support it. In a browser that supports XML and the XML object model, you can link user events, scripts, and filters to the SVG object. Although SVG represents the future of Web graphics, it's not very practical to use SVG for your graphics, because editing and display tools are still very limited.

3 100 Part I Exploring Web Site Design Methodology Choosing the best image format It's important to choose the correct image format for each image that you create, not for a Web site as a whole. A single Web page may contain images saved as both GIFs and JPEGs. When you're deciding which format to use, answer the following questions: Exam Tip Knowing which graphic format to use based on graphic type, design specification, and user settings is an important topic on the exam. What kind of Internet connection do the majority of your users have? If your users generally have low bandwidth connections, small file size is imperative. If your users have the advantage of high bandwidth connections, you can sacrifice a bit of size for a bit of quality. How important is image quality? If rich graphics are fundamental to the success of your site, you want to choose an image format such as JPEG or PNG that supports rich color depth. If you need lossless graphics and can live with 256 colors, go with GIF. What browsers do your users have? If you need to support older browsers (2.0 and 3.0), GIF and JPEG are your best image format choices. If you know your users are on newer browsers (late 4.0 and 5.0), you can begin to take advantage of PNG. Are you building a cutting edge solution? If you want to put together a site that takes advantage of the most current technologies, as either a learning activity or demonstration, you should give some serious thought to trying your hand at SVG. The "Scenarios" section at the end of the chapter presents you with several different image requirements scenarios and asks you which image format you would use to meet the requirements. Optimizing Imagesfor the Web ~ Image optimization An optimized image strikes a careful balance between file size and quality. Optimized images use only the necessary number of colors or a reduced color pallet. In addition, optimized images should use the Web-safe color pallet. There are a variety of tools and techniques you can use to reduce the size of your image without impacting the quality of the image significantly. EXBmTip An understanding of the different techniques for optimizing graphics is important for the exam.

4 Chapter 4 Graphics 101 When you want to add graphics to your Web pages, you can simply save them as a GIF or JPEG and go about your business. Chances are, however, that you could optimize your images so they look better and have a smaller footprint. There are a collection of relatively simple techniques that you can use to optimize your images for both appearance and speed: Reduce the number of colors Avoid anti-aliasing and gradients Slice your graphics into smaller pieces Reuse graphics Use he i ght and wi dth attributes Use optimization tools We discuss these techniques in more detail in the following sections. In the RealWodd The real goal of optimizing images is to find the happiest medium between file size and image quality. As you toy with the different optimizing techniques, you can watch your file size and image quality go from bad to worse and everything in between. Your goal is in between. The amount of file size or image quality you're willing to sacrifice depends entirely on your user's bandwidth limitations and the role images play on your site. Reduce the number of colors An image can utilize millions of colors and be megabytes in size. There's a direct correlation between the number of colors you have in your image and its file size. A good way to reduce your image's file size is to reduce the number of colors in the pallet you use to build your images. You can do this at two different times: Before you build the image. If you limit the number of colors you're working with from the get go, you can keep your image size down without having to worry about quality loss when you remove some of the colors. A down side to this approach is that some of the better tools in graphics programs require that you have a color depth of 16.7 million colors (24 bit) or more to use effects tools. After you build the image. After you're done building the image, get rid of the extra colors you aren't using. This will lighten your image's load and shrink its footprint. The only danger you face when you reduce the number of colors after you build an image is loss of some image quality. You may have to rework the image using fewer colors to get rid of any color at all. Good image editors and image optimizing tools can help you quickly reduce the number of colors in an image and judge the effects the reduction has on the quality of the image.

5 102 Part I Exploring Web Site Design Methodology The "Image Tools" section later in the chapter discusses such tools. Avoid anti-aliasing and gradients Anti-aliasing makes the transition between lines of color in a bitmap smoother by using varying shades of each color to blend the two colors. You get a smoother effect when you take advantage of anti-aliasing, but you add to the number of colors in the image's pallet to accommodate the transitions between colors. When possible, turn off anti-aliasing and create graphics with clean lines. Gradients present the same problem as anti-aliasing does. Gradients are smooth transitions from a darker shade of a color to a lighter shade, or vice versa, and they require many different shades in between to make the gradient smooth. You can avoid a large color pallet by getting rid of the many and varying shades of colors needed to support anti-aliasing and gradients. Slice your graphics into smaller pieces Graphics that are large in file and display size can often be broken into a collection of smaller graphics that when reassembled, looks like the original large graphic. Even though you don't lessen the total file size when you break a large graphic into smaller graphics, you do make the download process less painful for the user. Instead of waiting for one large file to appear, the user can see smaller graphics pop onto the page as each one downloads. The only drawback to this technique is that some browsers may add a bit of white space or even a line break between the images and not reassemble them into a duplicate of the large image. Be sure to test a collection of small images on several different browsers to be sure they reassemble correctly. Resize your browser window to see when images are forced onto new lines. Reuse graphics After a user downloads and views a graphic, a copy of the graphic is saved in the user's cache until it's cleared (either by the user or the browser). When you reference previously viewed graphics in other Web pages, the browser doesn't get a new version of the graphic from your Web site, it uses the one in the user's cache. You can optimize graphic download time by simply reusing graphics wherever possible. Then the user only has to wait for the graphic to download once. This technique applies well to logos and navigation graphics. You want your users to have a consistent look and feel and this optimization technique is an added benefit.

6 Chapter 4.. Graphics 103 Use height and width attributes The hei ght and wi dth attributes let the browser know how much browser window space an image should take. The browser can use height and width information to create a place holder for the image in the window while it waits to receive the image. The browser can also display the image faster because it already knows how big the image really is. Caution Be sure that the height and width you specify for your images is accurate. If you provide the wrong height and width, the browser will scale your image to fit that height and width. The results are not usually good. Use optimization tools Our final optimization technique is to simply invest in an optimization tool that does all of what we've described in this portion of the chapter and more. Optimization tools are good because they show you how an image will look after it's optimized, give you several optimization options, and help you easily choose the happy medium between image quality and file size. Many image-editing tools, such as Adobe Photoshop, Macromedia Fireworks, and Adobe ImageReady, have optimizing utilities built into them. You can also buy stand-alone optimizing tools or take advantage of Web-based optimizers. Most software optimizers are either shareware or commercial optimizers and cost anywhere from $20 to $150. Some of the best are:.. DeBabelizer ( be lizer.com/ ).. GIF Cruncher ( Smart Saver Pro (w ww.ulead.com/ss p/runme. htm) Online optimizers offer the same functionality as software optimizers, but you have to be connected to the Internet to use them. Online optimizers often charge a subscription fee so you can use them as often as necessary for a specific time period. Some good online services are:.. OptiView ( GifBot ( htm).. GifLube( sc ape.com/o=wsg/turbochargel gif_l ube/index.html) A good resource for finding shareware and freeware image optimizing software is the C INet 's Image Editors section at: http ://down l oad. cnet. com/downl oads/o, l0151, l - O,OO.html?t ag =d ir.

7 104 Part I.. Exploring Web Site Design Methodology If you own a professional image editor such as Photoshop, read through its help files to find out how to take advantage of its optimizing utilities. Online image optimizers are few and far between. Search your favorite search engine for "online image optimizer" to keep an eye out for new online services. In Lab Exercise 4-1, you have the opportunity to optimize an image using an online service. Image-Editing Tools Image-editing tools come in all shapes and sizes with a variety of features and capabilities. Generally, the more you pay for an image editor, the more features it has. Image-editing tools fall into two categories:.. Drawing programs.. Paint programs Not surprisingly, these two kinds of programs match up with the two kinds of graphics: Drawing programs are generally used to build vector graphics and paint programs are used to build bitmap graphics. Because bitmap graphics are the current graphic of choice for the Web world, most of the work Web designers do is in paint programs. Drawing programs use mathematical equations to create vector graphics on a grid. Macromedia xres and Adobe Illustrator are both examples of drawing programs and are most commonly used for schematics, charts, and other line-based images. Some graphic artists use drawing tools to build the foundation for Web graphics and then convert the vector images into bitmap images in their favorite paint program. Paint programs such as Adobe Photoshop, Paint Shop Pro, and Image Composer create bitmap graphics and are the tools most commonly used by graphic artists and designers to create Web images. You can use paint programs to create original graphics, open and modify GIF and JPEG images from the Web, turn scanned images into Web-ready pictures, and even work with video frames to generate images. Tip Every Web designer should have at least one image-editing program in his or her tool set, but some of the higher-end tools such as Photoshop and Illustrator can ~ be quite costly. Fortunately, tools are available that are affordable and rich in functionality, such as Paint Shop Pro. Choose your image-editing tool based on your resources and your needs. As you might imagine, understanding how images work is only half the battle. To use your knowledge to create and optimize images for the Web, you need to know how to use a good tool. In the following section, you're introduced to the basic functionality of Jasc Paint Shop Pro 6 and you find out how to use it to build and optimize images.