Choosing the Right File Format BC9 Bonus Table 1-3 JPEG 2000 Pros and Cons Chapter 1 Pros Cons You have more control over the bal- To use this file format, you may need Prepping Web ance between compression and to install the optional plug-in on the Graphics quality. Photoshop CS5 Install CD. Gives you the ability to target a file size. Your site visitors may also need a plug-in to view JPEG 2000 files on the Web. (Safari users don’t need one.) It can utilize optional lossless JPEG 2000 files can’t be optimized compression. using the Save for Web & Devices feature. Supports 16-bit color and grayscale images. Retains alpha and spot channels. Also supports using a Region of Interest (ROI) to selectively optimize portions of your image using an alpha channel. Supports transparency. Saving a file as JPEG 2000 If you decide that the positives outweigh the negatives, follow these steps to save a JPEG 2000 file. Note that the following options save the file in extended JPEG 2000 (JPF) format. There’s also a standard or minimal JPEG 2000 format (JP2). To save your file in JPF format, follow these steps: 1. Click the Save button. The JPEG 2000 dialog box, shown in Figure 1-4, appears. 2. In the dialog box, select from the following options: • File Size: You can enter a value to set a target size for the saved file. The Quality value adjusts automatically to the best quality for your specified size. • Lossless: Select this setting to compress the image without quality degradation, but create a larger file. If deselected, you can drag the Quality slider to specify a quality setting. Higher values result in better quality but a larger file. But, if you select a quality setting that’s inconsistent with your target file size, the File Size changes. BC10 Choosing the Right File Format Figure 1-4: The JPEG 2000 format offers many advantages over JPEG, but may require a plug-in for previewing on the Web. • Fast Mode: This option allows for faster previewing or encoding of the file. But just be forewarned that Fast Mode doesn’t support the options of file size control, Progressive optimization, or lossy encoding with an integer or wavelet filter. • Include Metadata: Select this option to include file data with the image. JPEG 2000 XML (Extensible Markup Language) is a format specific to XML data used for sharing data across the Internet, XMP (Extensible Metadata Platform) is File Info data. EXIF (Exchangeable Image File Format) is digital camera data. Leaving this option deselected produces a smaller file. • Include Color Settings: Select this option to include ICC (International Color Consortium) profile data. The ICC Profile format option includes the ICC profile specified in the Save As dialog box. The Restricted ICC Profile option saves a restricted profile used for portable devices, such as cellphones and PDAs. This profile is for the JP2 format only. Leaving this option deselected produces a smaller file. For more details on profiles, see Book II, Chapter 3. • Include Transparency: This setting preserves any transparency in the image. • JP2 Compatible: Select this option to create a file that can be dis- played in an application that supports standard or minimal JPEG 2000 format but doesn’t support extended JPEG 2000 format. Choosing the Right File Format BC11 • Wavelet Filter: Specifies the type of numbers used to encode the file. Bonus Integer is a good overall option for providing good image quality. Float Chapter 1 is more accurate, but you can’t use it with lossless compression. Float may also cause some degradation around the edges of an image. Prepping Web • Tile Size: Specifies the size of the tiles used in the image. Use Graphics 1024 x 1024 for a good overall size. If you create a really small image, use a lower size. • Optimization: Your choices include the following: Growing Thumbnail produces a sequence of small thumbnails that get larger until they reach the image’s full size. Progressive creates an image that gradually displays increasingly detailed versions of the image. Note that Progressive JPEGs are large in file size and aren’t sup- ported by all applications. Color displays the image as a grayscale image first and then as a color image. 3. If your image contains one or more alpha channels (saved selec- tions), define a Region of Interest, if you want, by selecting the alpha channel from the Region of Interest pop-up menu. Then, select an Enhance value to increase or decrease the quality of the Region of Interest relative to the rest of the image. Be warned that by enhancing the area inside the region, the area outside the region decreases in quality in order to leave the file size the same. After the alpha channel is used, it’s deleted when the file is completely saved. 4. When you’re done, click OK. PNG pros and cons The use of PNG has finally gotten more widespread with the increase in browser support. Internet Explorer, Safari, Firefox, and Opera all support PNGs without the need for plug-ins. That’s a good thing because the PNG format is a potential GIF-killer. (It also gives JPEG a run for the money. The features built into the PNG format coun- ter most of the objections to GIF. Because of that, the advantages greatly outweigh the disadvantages. So, I focus on the advantages: ✓ It’s free. The PNG specification is a potential advantage because software developers can incorporate it into products without paying for the privilege. ✓ It offers better compression. The PNG format produces files that can be up to 20 percent smaller than the equivalent GIF, but they sometimes can be larger. In fact, one disadvantage is that they can sometimes be larger than the equivalent JPEG file. BC12 Choosing the Right File Format ✓ It isn’t limited to 8-bit, 256-color images. In fact, the PNG format isn’t limited to 24-bit, 16.7 million color images. It can support a selected range of bit depths from 1 to 64 bits, for zillions and zillions of colors. The bottom line is that the PNG format supports Grayscale, Indexed Color, and RGB modes. ✓ It uses a smarter interlacing scheme. The PNG format provides images that fade in faster and better than interlaced GIFs. ✓ It offers four different types of transparency. The PNG format allows 64 to 254 (not 256) different levels of transparency, so even full-color images can float over a background, as shown in Figure 1-5. Figure 1-5: PNG images are able to preserve transparency. The PNG format also offers some technical advantages that aren’t readily visible to the user, such as the capability to adjust for variations in the display of images by certain devices (called gamma correction) and an error- correction routine that patches images that have lost a bit or two in transmission to your computer. Using a Web-Safe Panel and Hexadecimal Colors BC13 Using a Web-Safe Panel and Hexadecimal Colors Bonus Chapter 1 If you’ve tinkered with HTML, then you’ve probably at least heard of hexadecimal colors. Photoshop’s Web-safe panel is a set of 216 colors that Prepping Web should, theoretically, be displayed by any browser, regardless of whether Graphics the user’s video card displays 256 hues, 16.7 million, or something in between. Using only these Web-safe colors is a way to ensure that your image is represented without dithering in any browser. Of course, who views Web pages on a display using only 256 colors these days? Haven’t all computers been furnished with video cards offering a minimum of full 24-bit, 16.7-million-color images for ages and ages and ages? Well, not exactly. You may be working with 256-color images in some instances: ✓ You’re using GIFs. Oops! GIFs always have 256 or fewer colors, even when you’re displaying them on a full-color monitor. ✓ A visitor is using a computer on which resolution is more important than the number of colors. Users who don’t edit graphics may need 1600-x-1200-pixel resolution on their large-screen displays and not care that their older video cards offer only 256 colors at that resolution. ✓ Your visitor is using a PDA, Web-capable cellphone, or some other mobile device. Their LCD displays don’t support more than 256 different shades. If your Web page needs to reach these people, consider a Web-safe panel for at least some of your images. In all these cases, you may need to use the Web-safe panel features to optimize your colors. If you’re going to make a wholesale conversion of the colors in an image to a Web-safe panel, you’re better off using the Save for Web & Devices feature, which is automated and provides visual feedback of your results. Selecting individual Web-safe colors Photoshop lets you select individual colors based on their Web-safeness. You can do that in two ways: ✓ Select the Only Web Colors check box in the Color Picker, as shown in Figure 1-6. If you don’t select the Only Web Colors check box, the Adobe Color Picker still lets you know when you select a nonsafe color. A small cube appears in the dialog box (to the left of the Add to Swatches button). You can click the small swatch below the cube, which gives you a Web-safe color that’s the closest match. ✓ Select Make Ramp Web Safe in the Color panel from the panel options menu. BC14 Using a Web-Safe Panel and Hexadecimal Colors Figure 1-6: Web-safe colors help ensure that your color displays consistently across all browsers. See Book II, Chapter 3 for details on using either of these features with Web- safe colors. So, what are hexadecimal colors? Hexadecimal colors are simply a way of representing hues in the notation used by computer programmers. Hexadecimal values are calculated by using the digits 0 to 9 and the letters A through F. Fortunately, you don’t need to bother with the math. You just need to know that a hex value from 00 (no color) to FF (maximum color) represents the 256 shades of red, green, and blue. For example, a value of F0306F might represent a deep rose color. This cryp- tic value can be broken into three parts: Red — F0 (240 in decimal); Green — 30 (48 in decimal); and Blue — 6F (111 in decimal). The hex numbers are handy because you can enter them into HTML text to reproduce the color. You can read the hexadecimal values of a selected color in the Info panel and use the same values to specify that color in any dialog box (such as the Adobe Color Picker) that accepts them. You’re also likely to use these values when you use HTML or another markup language to specify the text and background colors on your Web page or Web site. Making Type Look Good Onscreen BC15 Keeping Color Consistent in Web Images Bonus Chapter 1 Although getting color consistent and optimal is probably more challenging for print, you need to consider a couple issues for the Web, as well. First, Prepping Web your images will be viewed on a wide variety of monitors, operating systems, Graphics and computer platforms. This alone causes the images to display differently. In addition, many Web browsers don’t take into account an image’s embedded ICC profile. (See Book II, Chapter 3.) Raw RGB color data is all that displays. So, again, how your image is viewed depends on the viewer’s computer system and monitor. Some of the things you can do to help remedy the situation are the same things you do for working with color for print, and a couple are unique: ✓ Set up the optimum image-editing environment. Keep your desktop a neutral gray, eliminate distracting surroundings, and so on. Find more details about setting up your environment in Book II, Chapter 3. ✓ Calibrate your monitor! Set your monitor to its optimum viewing state and keep it that way. I describe calibration in detail in Book II, Chapter 3. ✓ Establish your color settings. I recommend that if you’re cranking out a lot of Web images, use the Web Graphics Defaults as your setting. (Choose Edit➪Color Settings.) This setting enables you to produce images in the sRGB color space and increases the chances that your images display correctly and consistently. I cover color management in — you got it — Book II, Chapter 3. ✓ Convert any non-sRGB profiled documents you have to sRGB. To do this, choose Edit➪Convert to Profile. Select sRGB in the Destination Space area. ✓ Finally, use the Save for Web & Devices feature to save all your Web images. When you use this feature, you have more control over how your images are optimized. You can choose how many colors are displayed, and so forth. Making Type Look Good Onscreen The last thing you may want to consider when prepping your images for the Web is how your type looks. You can make changes while you prepare or edit the image that affect how well your type shows up onscreen. The fol- lowing sections describe some of your options. Anti-aliasing Depending on your typeface and the size, you may or may not want to apply anti-aliasing. Photoshop offers five different anti-aliasing methods: BC16 Making Type Look Good Onscreen ✓ None: Uses no anti-aliasing. Although it depends on the font, this choice is often good for small type. A few fonts are specifically designed for use without anti-aliasing. When used with anti-aliasing turned on, these fonts look atrocious. You may want to check out Pixel fonts. They’re a newer breed of fonts designed spe- cifically for Web display, especially at smaller sizes, used at a specific point size. ✓ Sharp: Applies only enough anti-aliasing to soften the edges of diagonal strokes, keeping the type quite sharp. This is another sensible choice for smaller type. ✓ Crisp: Increases the amount of anti-aliasing a bit, but the type still looks fairly sharp. ✓ Smooth: Provides the maximum amount of anti-aliasing but can slightly affect the sharp- ness of the type. ✓ Strong: Gives the type a heavier appearance. Although these recommendations usually hold true, your results may vary, depending on specific typeface and size; you may want to experiment in some cases. Fractional width/system layout At small sizes and low resolutions, such as those typical of Web display, type can be rendered inconsistently with the default Photoshop type setting of Fractional Widths. In this mode, Photoshop varies the distance between characters by using fractions of whole pixels. At sizes smaller than 20 points, such type may either have too much space between characters or not enough space, causing the characters to run together. To prevent strange type spacing, choose System Layout from the Character panel options menu. System Layout displays text as the operating system would by using a program such as WordPad or TextEdit. Photoshop switches to whole pixel increments and removes all anti-aliasing. The type won’t look quite as neat, but you can prevent the spacing problems. It can also be a good choice for smaller text. Optimizing Images with Save for Web & Devices BC17 Faux styles Bonus Chapter 1 Photoshop cobbles together imitations of italic or bold typefaces for fonts that don’t have them. The program normally does an okay job of slanting the Roman (upright or normal) version of the type, or making the type thicker to Prepping Web Graphics simulate bold. At smaller type sizes and for type displayed online, the results are often less than pleasing. So, when creating type for online display, try to avoid using the Faux styles. To apply these styles, such as those shown in Figure 1-7, select your type layer in the Layer panel, and then choose Faux Bold or Faux Italic from the Character panel options menu or click the Faux Bold or Faux Italic button that appears near the bottom of the Character panel. Figure 1-7: Just because Faux Bold and Faux Italic styles are available doesn’t mean you should use them. Optimizing Images with Save for Web & Devices One thing to keep in mind while you work with Save for Web & Devices is that optimization always involves trading off between two goals that conflict with each other to a certain extent: ✓ Image quality: With a few exceptions confined to the artistic realm, you generally want your image to appear on a Web page as sharp as it possi- bly can be, with the full range of colors shown in the original. The best- quality image should also be sized to fit in well with your Web page design, no matter what size browser window users are viewing a page through. BC18 Optimizing Images with Save for Web & Devices ✓ Download speed: Short download times are desirable, with no excep- tions. The ideal Web page image should appear onscreen as quickly as possible, regardless of the user’s connection speed. Although fast load- ing times are essential when users have pokey dial-up connections, you also want fast download speeds for those using faster cable modem/DSL broadband links. Unfortunately, you can’t fully meet either of these two goals at all times. The best-quality images and the largest and flashiest photos also take the longest to download. Conversely, the images that download the fastest can poten- tially look the worst. But don’t panic yet. You can make trad- eoffs to ensure that your images have the quality you expect and the fast download times that users demand. By choosing the best file format for your image, making some choices about how much quality you’re willing to give up, and tweaking your image with Photoshop, you can frequently get the best of both worlds. Earlier sections in this chapter offer advice on the manual Figure 1-8: The Optimize to File Size prep you can do. Save for Web & command creates a file with your target Devices provides the automated half of file size. that equation. In fact, Save for Web & Devices has the simplest automation tool of all: Optimize to File Size, shown in Figure 1-8. This option is tucked away in the Save for Web & Devices dialog box’s panel menu. (See the following section for more on this dialog box.) Select the file size you want, click a few other settings, and Photoshop gives you a file that meets that file size requirement. Exploring the Save for Web & Devices dialog box You can access the Save for Web & Devices dialog box by choosing File➪Save for Web & Devices from the menu bar. The dialog box shown in Figure 1-9 has four tabbed pages, a Tools panel, a clutch of options and menus, and a generous Preview area that you can use to evaluate your results. The following sections briefly describe each of the dialog box’s key components.