Chapter 5: Graphically Speaking


If the World Wide Web were made up of just text and hyperlinks, we would probably spend less time surfing and more time working. Pictures-photos, art, graphics, and logos-are what make most Web sites both enticing and useful. Pictures can even make or break your visitors' interest in what you have to say: How many times have you skipped over an eBay listing because it lacked a photo of the item? Nowadays, Web visitors demand pictures, and it's your job to deliver.

You have to walk a fine line, though. Overusing pictures can clutter your site and slow its load time to a crawl, and cheesy clip art (especially the blinking, winking, and jumping variety) can cheapen the look of your site. In this chapter, we show you what you need in order to work with pictures in your Web pages-the pitfalls and tricks and, of course, how to use the Expression Web graphic tools.

Note 

We adopted the Expression Web term pictures to refer to all Web graphics, including photos, graphics, clip art, screen snapshots, and logos.

Understanding the Quirks of Web Pictures

Your goal, when using pictures in your Web site, is to get the highest-quality pictures with the shortest load times. The process is relatively straightforward because most graphics software programs have special features for preparing pictures for the Web.

Choosing Web-friendly picture formats

In the morass of graphical file formats and unpronounceable file extensions, you use only three formats to add pictures to your Web pages.

  • JPEG (pronounced "jay-peg" ) is the most common format for Web-ready photographs. If you use a point-and-shoot digital camera, chances are it saves your photos as JPEGs. JPEGs are bitmapped images: They're made up of a bunch of bits, or colored dots. The JPEG format can stuff a wide range of colors with subtle variations into a small file size, which is exactly what makes it good for photos. The problem with JPEGs is that they're notoriously hard to resize. Resized JPEGs end up looking ragged and fuzzy.

  • GIF, pronounced "giff" (or "jiff," depending on whom you talk to), stands for Graphic Interchange Format (which is why we say "giff"; it's a hard g sound, for crying out loud). GIFs are the heavy lifters of simple Web graphics: They're ideal for images that contain a limited color palette, like logos, buttons, text bits with fancy fonts, cartoons, and any other simple line drawings. The GIF format can also pack multiple pictures in a single file to create simple animation, called animated GIFs. A GIF is typically small in file size and can be resized and stretched without affecting the image quality. A GIF can also handle interlacing and transparency. (We talk about these features later in this chapter.) Because a GIF can display only up to 256 colors, it isn't a good choice for photos or complex art with many color variations.

  • PNG, pronounced "ping," stands for Portable Network Graphics. The PNG format, which is the new kid on the block, was developed specifically for the Web. It displays subtle color variations well, like a JPEG does, but scales well, like a GIF. It also handles transparency better than GIF (although some browsers don't always display transparent PNGs properly). Browser support for PNG is continually improving, allowing the PNG format to take its rightful place at the Web graphics table. Look for the forthcoming Internet Explorer 7 to fully support the PNG format.

REMEMBER 

Which graphical format should you use? Your goal is to create the best-looking picture for the smallest file size. For simple line art and logos, choose GIF. You get a scaleable image with a small file size. If you have a more complex graphic with lots of colors, give PNG a try. You can preview your page in different browsers to see what it looks like. (We tell you how in Chapter 2.) For photos, JPEG is your best option.

Tip 

Many graphics programs know how to create pictures specifically for the Web and let you compare the file size and image quality of different formats. In Adobe Photoshop Elements, which is a lighter-weight (and much cheaper) version of its big brother Adobe Photoshop, look for the Save for Web command.

If you want to delve deeper into Web graphics, here are some sites to get you started: The official PNG site, http://www.libpng.org/pub/png, tells you everything you would ever want to know about this format. Read the World Wide Web Consortium's analysis at http://www.w3.org/graphics. A particularly good comparison of image formats and when to use which one appears on http://www.r1ch.net/img-formats.

A word or two about colors

If you happen to hang around with Web designers, you may have heard about the browser-safe or Web-safe palette. This set of colors looks good on all browsers and monitors. The Web-safe palette was developed back in the days when computer monitors weren't as color savvy as they are now. Technology has improved, and now monitors can display millions of colors.

What does this mean for you? The colors that show up on your Web pages in a visitor's browser depend on what colors their monitor is capable of displaying. If your picture contains a color that isn't present in your visitor's system palette, your visitor's Web browser attempts to display the color by dithering-that is, mixing two other colors in a checkerboard pattern to approximate the color in the image. Dithered images, although better than nothing, lack clarity and definition.

REMEMBER 

You have to decide whether to stick to the "safe" colors or venture into the world of color possibilities. If you're unsure what to do, most Web hosting providers gather statistics about their visitors' monitor types. If an acceptable majority of visitors use 24- or 32-bit monitors, use color with abandon. If the few that are still using 8-bit monitors matter deeply to you, stick with the browser-safe palette.

image from book
Revving up your graphics in a graphics program

In general, you should prepare pictures for your Web pages-including file conversions, color editing, and sizing-in a program specifically designed for graphics work and then save the file in the Web-friendly format of your choice. A good choice if you're just preparing pictures for the screen is Adobe Photoshop Elements, the little brother of the full-blown (and expensive) Adobe Photoshop. Another good program is Corel Paint Shop Pro. Watch for the forthcoming release of the Expression Web companion product, Microsoft Expression Design. Expression Design is designed to work closely with Expression Web as part of a suite of Web-development programs.

Many graphics programs are available as free trial versions for a limited time so that you can test-drive a few and decide which one you like best. See http://www.corel.com/paintshop for more information about the Paint Shop suite of products. See http://www.adobe.com/products/photoshopelwin/index.html for information on downloading a trial version of Photoshop Elements. Before the full version of Microsoft Expression Design is available for sale, you can download a pre-release version to play around with by visiting http://www.microsoft.com/products/expression/en/expression-design/free-trial.mspx. (Microsoft Corporation wisely cautions against using beta software for final, production use.)

image from book

Tip 

A good place to go for current statistics about browsers, operating systems, and monitors in use is http://www.w3schools.com/browsers/browsers_stats.asp. You can also read http://www.w3schools.com/html/html_colors.asp to find out more about color on a monitor. If you're looking for a more general discussion of color on the Web, check out Web Design For Dummies, 2nd Edition, by Lisa Lopuck (Wiley).

Creating quick-loading pictures

If your visitors must wait more than a few seconds for your site to appear in their browsers, your site risks falling victim to clickitis, a chronic condition that causes surfers to click elsewhere whenever they must wait a moment for something to download. Keeping load times brief prevents clickitis. Here are some ways to ensure that your graphics don't drag:

  • Reduce image dimensions. Wherever possible, keep the picture file's dimensions small.

  • Limit colors. You can shave precious seconds off the download time while maintaining your picture's quality if you use a graphics program to reduce the number of colors in your pictures.

  • Keep resolution low. Save your picture files at a resolution of 72 ppi (pixels per inch). This resolution, although too low for high-quality print images, is ideal for images that are displayed on a computer monitor. Use anything higher and you're adding unnecessary bulk to your picture's file size.

  • Repeat pictures. As much as possible, use the same pictures throughout your site. Web browsers cache picture files, which means that the browser saves a copy of the picture on the visitor's hard drive. The first time someone visits your site, the browser downloads the picture files from the host server. After the initial download, the browser displays the cached files instead-which load almost instantly. This strategy works especially well for background images. Many Web sites offer downloadable background images that, when repeated, look like a solid pattern. (See the section "Adding a Tiled Background Picture," later in this chapter, for more info about how to do this.)

Practicing graphical restraint

After you get the hang of adding pictures to Web pages, you can easily fall into the "more is better" trap. Exercise some graphical restraint. Each additional picture increases the overall load time of the page and should be added only if seeing the picture is worth the wait. Use only those pictures that communicate your site's purpose and make getting around the site easier or more pleasant for your audience.

Finally, make sure your visitors can understand your site without the pictures. Some surfers turn off their browser's image-loading option to speed up browsing sessions, especially on small-screen mobile devices. (We show you how to deal with this situation later in this chapter by specifying alternative text.)



Microsoft Expression Web for Dummies
Microsoft Expression Web For Dummies
ISBN: 0470115092
EAN: 2147483647
Year: 2004
Pages: 142

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net