O'Reilly logo

Web Design All-in-One for Dummies® by Sue Jenkins

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 3: Slicing and Optimizing
Web Graphics
In This Chapter
Selecting the appropriate Web graphic format
Choosing the right optimization program or tool
Slicing and optimizing techniques
Choosing the proper optimization settings
Outputting optimized files and graphics
B
efore you begin the optimization process of your Web graphics, you
should have a clear understanding of how the graphics and photos
you use on your Web site need to be different from the ones you might use
in a print project, such as a brochure or annual report. For one, print graph-
ics are high resolution, whereas Web graphics must be set to a low resolu-
tion. For another, print graphics depend on the CMYK color mode, whereas
any graphics used for on-screen and Web presentation must use RGB color.
In this chapter, you find out about all the differences between Web
and print, as well as everything you need to know to create
graphics that are ready for Web optimization. Without this
preparation — and especially without optimization — the
graphics and photos on your Web sites would simply
be too large to transmit over the Web and display in a
browser on a visitor’s computer monitor in an
acceptable time frame.
In the following sections, you find an overview of
Web graphics as compared to print graphics. You
also discover tips about choosing an optimization
program. Following that, you find out about the dif-
ferent Web file formats, including how to select the
right format for different graphic types. The last three
sections of the chapter include the finer points about
selecting different optimization settings, slicing up images
before optimization, and finally, choosing the right optimization
output options to produce the desired output results.
12_417966-bk02ch03.qxp 3/25/09 10:33 PM Page 175
Web Graphics 101
176
Web Graphics 101
When people talk about Web graphics versus print graphics, what they’re
really referring to are the different ways in which Web graphics must be for-
matted compared to graphics intended for print.
Graphics, whether for print or the Web, can be created with a variety of
software programs, the most popular among them being Illustrator,
Photoshop, Fireworks, and Flash for the Web and Illustrator, Photoshop,
QuarkXPress, and InDesign for print. The finished graphics may be then be
saved in a variety of file formats, depending on their intended usage.
Of all the applications you can choose from to create your graphic images,
one primary consideration is whether the artwork needs to be developed
and saved as either vector or raster:
Vector: A vector program uses mathematical equations to generate
paths, lines, and shapes, which enables the image to be scaled up or
down with no loss of resolution. Logos, for example, are best created in
a vector program. When created as vector graphics, the logo artwork
can be colored and scaled for any medium — online, newsprint, embroi-
dered on a hat, printed on the side of a pen, and so on — and still look
great at any size.
Raster: Raster (or bitmap) programs represent images as a collection of
tiny pixels or little squares of color, the size and quantity of which are
determined by the file’s resolution. The number of pixels in an image
determines the image’s quality; typically, the higher the number, the
sharper the image, and the lower the number, the fuzzier the image. An
image set to 300 dpi (dots per inch), for instance, has a high resolution
and therefore is fine and clear enough to use in a printed piece, whereas
an image set to 72 ppi (pixels per inch) has too few bits of information
to print crisply, even though the image might look fine and clear on a
computer monitor.
Table 3-1 shows a comparison of Web and print graphics based on a variety
of key criteria. As you will see, some features of Web and print graphics are
so different from one another that you must take extra care that you don’t
mistakenly set up your files incorrectly. For instance, your Web and print
graphics use different color spaces because print requires CMYK inks and
the Web relies on RGB technology to display color. In the section that fol-
lows, you discover details about each of the features listed for Web graphics
in Table 3-1, along with a few others that can assist you in creating your
graphics appropriately for the Web.
12_417966-bk02ch03.qxp 3/25/09 10:33 PM Page 176

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required