Optimizing Files for the Web

In the preceding chapter, we briefly spoke about saving web graphics from Photoshop using the Save for Web command. As you'll see in the following chapter, Illustrator has the same command as well, with extended functionality. In reality, all of this stems from ImageReady itself. Before we begin talking about optimizing web graphics, I want to take a step back and explain what optimizing really means, why it's important, and how ImageReady can help in the entire process.

First, it's important to understand how web graphics differ from those created for print. A designer is faced with specific challenges when it comes to creating graphics that will be displayed on the Web. Of course, there are pros and cons to just about everything, but here's a list of some of the things a designer has to keep in mind when designing web graphics:

Delivery medium Unlike a printed piece, in which a designer can choose an exact size paper to use, a website is displayed on a digital screenon a computer, a PDA, or a cellphone. These devices have specific screen sizes, and a designer has to create images that will fit on these screens. Scrolling is fine for paragraphs of text, but you don't want a user to have to scroll to see an image. What makes this even more difficult is that a designer never knows what kind of device a person will use to view the website, so what might fit nicely on one computer screen might not fit well at all on another.
Color When designing a printed piece, you have the ability to specify exact colors, which can be extremely important when reproducing corporate logos and conveying brand identity. On the Web, however, color isn't so accurate. Some monitors, with modern graphics cards, can display millions of colors. Other monitors can display only up to 256 colors at once. Cellphones and handheld PDA devices have their own color limitations as well. What looks bright red on your computer screen might end up looking like a dull orange on another device.
Technology The Internet as we know it today, with the World Wide Web, has been around for a little over a decade. In that short time, standards have come and gone, and technology continues to evolve. At one time, Netscape Navigator commanded a huge share of the market, and designers could optimize their websites for viewing in that particular browser. For a while, Microsoft's Internet Explorer owned that distinction, and now Apple's Safari browser adds similar challenges among Macintosh users. Mozilla and Opera browsers (such as Firefox) are changing the way we look at the Web by conforming to standards such as CSS. Today's web designers need to be aware of what technologies are in place, what standards are in use, and what file formats are acceptable.
Speed There's no reason to sacrifice quality when it comes to designing a print piece. You can use high-resolution images to reproduce large, clear, and sharp photographs. A variety of fonts are at your disposal to achieve that perfect look and feel. Things are different on the Web, however. All graphics on the Web are 72dpi low-resolution images, for two main reasons. First, a monitor can display only 72 pixels per inch anyway. Second, high-resolution images are large in file size. Not everyone has a speedy connection to the Internet, and the larger an image is in file size, the longer it takes to download and display on a computer screen. On the Internet, speed is king. As a designer, you want to create great-looking images, but not at the expense of a slow-loading website.
Interactivity The Web does offer something that no print piece could ever match, and that's interactivity. Designers can create web graphics that move and change, either on their own or when users interact with them. Web graphics can also call users to action and to respond in ways that print simply cannot. Of course, interactive content isn't required on the Web, but a designer should know when he or she can take advantage of technologies that will enhance the messages to be conveyed.

Did you Know?

In some cases, a designer might know more about the targeted audience for a website and can take advantage of that knowledge. For example, when designing an intraneta website that is accessed only by the internal employees of a companya designer might know that everyone in the company has a monitor that supports more colors, giving the designer freedom to use more colors.

Optimizing graphics for the Web means preparing images that will display appropriately, taking into account all the issues mentioned previously. Sometimes it means finding the lowest common denominator, making for a graphic that will display correctly on any device. On the other hand, a designer might want to weigh the costs of a graphic that looks better but that might not display on all devices.

The good news is that ImageReady has all the tools necessary to optimize graphics for the Web. Even better, ImageReady CS2 contains time-saving features and easy-to-use functions to make the process of optimizing graphics for the Web quite painless. And, of course, having the same user interface as Photoshop means that you don't have to learn a whole new program to create great-looking web graphics.

Color on the World Wide Web

As mentioned previously, color on the Web isn't something a designer can rely onmainly because, as carefully as a designer might choose a color, there's no way to guarantee how that color will look on computers, PDAs, and cellphones throughout the world.

That being said, there's still reason to pay close attention to colors when designing web graphics. First of all, some file formats enable you to control how many colors are saved in a file. The more colors there are, the larger the file size is. If you're smart when choosing colors, you can get significant savings in file size.

Second, when a computer doesn't have enough colors to display an image, the computer uses a process called dithering to simulate the colors it doesn't have. For example, if you create an image that uses millions of colors but try to view that image on a computer with 256 colors, the computer will use the colors it has available to create patterns or areas of color to approximate the color it doesn't have (see Figure 6.9). Sometimes this process produces results that are presentable, but many times, the dithering ends up looking horrible, producing moiré patterns. What's worse, the patterns could interfere with text or graphics and render a website illegible.

Figure 6.9. An example of what dithering looks like.

Web-Safe Colors

As Douglas Adams would say, "Don't panic." You can do a few things to ensure that your art looks great on the Webon any machineby using a Web-safe color. A Web-safe color is one of 216 colors that will not dither when viewed on any computer screen.

How did someone come up with the number 216? Well, it's like this: Most people out there have monitors that can display 256 colors (VGA is 256 colors). These 256 colors are in what's called the system palette, which is built into your operating system. The Windows system palette and Macintosh system palette, however, differ slightly. To be exact, 40 colors do not match up between the two system palettes. So if you eliminate those 40 colors, you are left with 216 colors that are identical on both platforms.

By using colors from the Web-safe color palette, you can be sure that the colors you choose will not dither. The Color palette inside ImageReady enables you to use web color sliders, making it easy to choose a Web-safe color. Simply choose Web Color Sliders from the Color palette fly-out menu (see Figure 6.10).

Figure 6.10. Choosing to use Web-safe colors in ImageReady's Color palette.

Slicing Images

Web slicing is possibly the best thing to come around since sliced bread. In simple terms, web slicing is the process of cutting a large image into several smaller images (see Figure 6.11). This is desirable for various reasons.

Figure 6.11. An image with slices specified.

First of all, there's perception. If you tried to load a web page that had one single large image on it, you would sit there impatiently waiting for it to download and appear on the page. But when an image is sliced into smaller parts, each smaller image loads faster, and it feels like the image is loading faster.

On that same note, you can apply different optimization settings to each image slice, which could save some valuable file size space, making for a faster-loading graphic overall. As you'll see later, these settings directly impact the final file size (read: download time) of your total image.

Slicing is also helpful if parts of a graphic need to be updated often. Instead of always creating larger images, you can update just a part of the image. Swapping out a slice or two can be more efficient than having to work with one large, bulky file all the time.

Because each slice is its own image, you can assign a link, or URL, to it, effectively making it a button. If someone clicks on a sliced part of an image, that person is linked to another web page. Of course, you can specify other functionality for such a button as well.

Finally, slices are necessary for creating rollovers, which enable you to specify that a graphic should change when the user interacts with it (such as rolling a mouse over it).

Slices Explained

So what exactly happens when you create a slice? In reality, ImageReady splits a single image into multiple images. An HTML table is created, with each cell of the table containing one of these slices, or pieces of the image. In this way, when you display the web page in a browser, all the sliced-up images appear together, almost like a puzzle. This is an important concept to keep in mind because you can create only rectangular-shape slices.

Creating Slices

You can create slices in ImageReady in several ways. The easiest way is to choose the Slice tool from the toolbox and click and drag in your document window (see Figure 6.12). You'll notice that ImageReady's Slice tool snaps to the edges of other slices, making it easy to use.

Figure 6.12. Drawing a slice with the Slice tool.

One thing to notice as you create slices is that when you draw a slice, other dimmed slices might appear automatically in the document. These are called auto slices (see Figure 6.13). Slices that you create are called user slices. Going back to what we discussed earlier about HTML tables, ImageReady automatically creates a table for your entire graphic, so it creates slices as necessary to complete the table. As you continue to create slices, ImageReady updates the auto slices accordingly.

Figure 6.13. An image with auto slices and user slices.

Did you Know?

If you want to convert an auto slice to a user slice, you can choose the slice with the Slice Select tool and choose Slices, Promote to User Slice.

Another way to create slices is to drag guides onto the document (you can add guides by dragging them out of the rulers). When you've positioned the guides where you want them, choose Slices, Create Slices from Guides (see Figure 6.14).

Figure 6.14. Choosing to create slices from guides.

It makes sense to create your slices after you've already finished the design process because after you draw your slices, if your design changes, you might need to readjust your slices. ImageReady does have the capability to create a slice that changes with your designsomething called a layer-based slice. A layer-based slice is a slice that's automatically created to fit the contents of a layer. So, for example, if a layer had some text on it, defining that layer as a layer-based slice would create a slice the exact size of the text. If you changed the text at any point after that, the slice would update accordingly. To create a layer-based slice, highlight a layer in the Layers palette and choose Layer, New Layer Based Slice (see Figure 6.15).

Figure 6.15. Choosing to create a new layer-based slice.

Slice Attributes

You can specify certain attributes for a slice. Remember that a slice is really a cell in an HTML table. So, for example, a slice can have its own background color or URL link. Settings for each slice are specified via the Slice palette (see Figure 6.16), which you can access from the Window menu.

Figure 6.16. The Slice palette.

Web File Formats

Images can be saved for the Web in various formats. Each format has its own strengths and weaknesses. Depending on the use and functionality of your graphics, you can choose the format that's right for the task at hand. Remember that when you slice up an image, you can choose to optimize slices using different file formats. Feel free to mix and match file formats as you see necessary.

In ImageReady, you can choose a file format from the Optimize palette (see Figure 6.17). Start by selecting a slice, and then choose a file format from the pop-up menu in the Optimize palette (see Figure 6.18). Each file format has specific settings, which you can access by clicking on the disclosure triangles in the Optimize palette.

Figure 6.17. The Optimize palette.

Figure 6.18. Selecting a file format from the Optimize palette.

GIF

Probably the most common image file format present on the Web, the GIF format was developed by the people at CompuServe, one of the pioneers of the Internet and the World Wide Web, though you hardly hear of it today. Seeing the need to send graphics files across modem connections (which in those days were quite slow), they developed a file format that contained a limited number of colors and that was compressed. GIF files can contain a maximum of 256 colors, and they use a lossless method of compression. Lossless compression means that no information is lost in the compression process, and the quality of the image remains intact. A GIF saves space by looking for large areas of contiguous solid color, which makes the format perfect for logos, backgrounds, text headlines, and the like.

The GIF format supports other capabilities, including the capability to control the exact number of colors present in the file, transparency, and the capability to store multiple images in a single GIF filecommonly referred to as an animated GIF file. An animated GIF file displays each image in the file one after the other, giving the appearance of movement, much like a movie. Each image in an animated GIF file is called a frame; we talk about how to create frames and animation later in this chapter.

When you choose the GIF file format in the Optimize palette, you have the following settings (see Figure 6.19):

Color Table The Color Table settings enable you to specify exactly how many colors the GIF will contain. Lower numbers of colors result in smaller file sizes but could result in lower-quality images. Because a GIF can contain a maximum of 256 colors, you can choose from several color-reduction algorithms, including the Restrictive option, which chooses only Web-safe colors.
Dither The Dither settings enable you to control what method of dithering (discussed earlier) will be used when the image is displayed on computers with different colors.
Transparency The Transparency settings enable you to define a single color that will display as transparent in a browser. For example, if you want to place a logo on a colored background, you can specify the background color of the GIF to be transparent, and the background color in the browser will show through those transparent areas. The edges where color meets the transparent edge will usually be white (or the background color you have chosen in your ImageReady document) when displayed in a browser; specifying a matte color that matches the background ensures that the art blends seamlessly with the background.
Options The Options settings enable you to specify some other settings for GIF files, such as adding metadata information, using a unified color table across multiple GIF files, and interlacing, which allows an image to load progressively in a web browser.

Figure 6.19. The available optimization settings for the GIF file format.

JPEG

JPEG (pronounced jay-peg) stands for Joint Photographic Experts Group, and the file format was created to allow photographers to share images using a standard file format. JPEG files can contain millions of colors and use a lossy compression method, meaning that information is lost in the compression process. Digital images usually contain more color information than the human eye can see or detect. By throwing out some of that extra information, JPEG images can achieve amazing file size savings. For example, a 10MB photograph can easily be compressed into a JPEG that's less than 1MB in size.

Because the JPEG format supports millions of colors (as opposed to 256 in a GIF), it's the perfect format to use for photographs or images with complex colors and gradient fills. JPEG files do not support animation as GIF files do.

When you choose the JPEG file format in the Optimize palette, you have the following settings (see Figure 6.20):

Quality The Quality settings enable you to specify how much information is thrown out of a file when the file is compressed. A higher number means that less information will be thrown out, resulting in a larger file but a betterlooking image. One of the most noticeable side effects of compression in a JPEG file is artifacts or stray pixels that appear in the image. Specifying a blur amount can help cover up those artifacts.
Transparency The Transparency setting enables you to specify a matte color for the edge of the graphic. JPEG files do not allow you to specify a single color to become transparent, however, as the GIF format does.
Options The Options settings for JPEG images include the capability to add ICC color profiles and add metadata. The Progressive setting is similar to interlacing, in that it allows the image to appear in low quality quickly in a browser and then, over time, brings the image up to full resolution.

Figure 6.20. The available optimization settings for the JPEG file format.

PNG

The PNG (pronounced ping) format was developed mainly as an alternative to the GIF format. Shortly after the GIF format became popular on the Web, the Unisys corporation, which developed the compression algorithm used in the GIF format, tried to collect royalties on its technology from those who used the GIF format. To get around the legal issues, an open standard called PNG (Portable Network Graphic) was developed. The PNG format utilizes lossless compression and can support millions of colors. Instead of allowing you to specify a single color as being transparent, the PNG format supports 256 levels of transparency, similar to alpha channels inside Photoshop.

Older web browsers require a special plug-in to view PNG files, although most newer browsers can display them natively. PNG files also might not be compatible with some PDA devices and cellphones. PNG files come in two varieties, 8 bit and 24 bit.

The different optimization settings for PNG-8 (see Figure 6.21) are identical to those found for the GIF format, mentioned previously.

Figure 6.21. The available optimization settings for the PNG-8 file format.

WBMP

If you've been paying attention to the world lately, you're aware that it's now becoming possible to access the Internet on handheld PDA devices and also cellphones. These wireless technologies are expanding in both capabilities and the number of people who use them. The WBMP file format, which stands for Wireless Bitmap, is a format that is optimized for wireless devices. These devices usually have slow connections (compared to desktop devices), and many have black-and-white screens. WBMP files are black-and-white images (color isn't supported) and are optimized via a dithering setting (see Figure 6.22).