ptg Export 421 Saving files for the Web Optimization is the process by which les are pre- pared for online viewing, within specic format, storage size, and color parameters. When choos- ing settings for Web output as opposed to print output, issues of le size and the transmission of data come into play. e goal is to compress your les enough that they download quickly on the Web while keeping their quality as high as possible. Two main parameters that you’ll need to focus on as you do this are the le size and the le format (GIF or JPEG). File size e length of time it takes for an image to load into a Web page is related directly to its le size. e size of the optimized le, in turn, is deter- mined by the dimensions of the image (in pixels) and the amount and kind of compression that is applied to it. When choosing dimensions for an image, if you keep in mind that most people view the Web in a browser window that’s around 1000 pixels wide, you can consider dimensions of 800 x 600 pixels to be a realistic upper limit. Remember also that Web browsers always display images at 100% mag- nication. In the Save for Web & Devices dialog, you will be able to specify pixel dimensions for the optimized le and preview the results. e GIF and JPEG formats cause a small reduc- tion in image quality as they apply compression, but the resulting smaller le sizes download more quickly on the Web, so it’s a worthwhile trade-o. Bear in mind that some types of images are more compressible than others. For example, a docu- ment with a solid background color and a few solid-color shapes will compress much more than a large document that contains many color areas, textures, or patterns. e JPEG format has more compression power than GIF. File formats GIF and JPEG, the two le formats most com- monly used for Web graphics, are best suited for dierent types of Photoshop documents: GIF ➤ GIF preserves at colors and sharp edges (such as type) better than JPEG, but it’s an 8-bit format, meaning it can save only up to 256 colors. is color restriction makes GIF more suitable for at graphics than for continuous- tone (photographic) images, which contain more colors. ➤ For optimizing images that contain transpar- ency, GIF is your only choice, because unlike JPEG, it supports transparency. ➤ You don’t have to use the full complement of 256 colors when saving a le in the GIF format. If you lower the color depth of a GIF le, you reduce its size and the number of colors it contains, which in turn enables it to down- load more quickly. (e set of colors in a GIF is called the “color table.”) e color reduction may produce dithered or grainy-looking edges and duller colors, but the necessary reduction in le size will be achieved. JPEG ➤ Because it retains a document’s full 24-bit color depth, the JPEG format does a better job of preserving the color delity of continuous-tone images (photographs and the like) than GIF. ➤ Another advantage of JPEG is its compression power: It can shrink an image signicantly without lowering its quality. When saving an image in JPEG format, you choose a quality setting; higher-quality settings produce larger les, lower settings produce smaller ones. ➤ Unfortunately, unlike the GIF format, JPEG doesn’t preserve transparency. ➤ Each time an image is optimized in the JPEG format, some image data is lost; the greater the compression, the greater the loss. Note: When optimizing a 16-bits-per-channel le via the Save for Web & Devices dialog, regardless of the format, the le is automatically converted to 8 bits per channel. Don’t panic! We’ll break down the optimization steps for both formats. ptg 422 Chapter 26 Previewing an optimized file In the Save for Web & Devices dialog, you’ll nd everything you need to optimize your graphics for the Web, including multiple previews that let you test the eects of dierent optimization settings. To use the previews in the Save for Web & Devices dialog: 1. Choose File > Save for Web & Devices (Ctrl- Alt-Shift-S/Cmd-Opt-Shift-S). e dialog opens. A 2. Click the 4-Up tab to display the original image and three previews. Photoshop will use the current optimization settings to generate the rst preview (to the right of the original), then automatically generate two other previews as variations on those settings. You can click any preview and change the settings for just that preview, or choose a dierent download speed for a preview from its individual Download Speed menu. 3. From the Preview menu on the right side of the dialog, choose a gamma value for Photoshop to simulate onscreen (see the sidebar on page 426). ★ 4. After choosing settings for a GIF (see the next two pages) or a JPEG (see pages 425–426), to test the settings for the currently selected tab in your browser, click the Preview button or the browser icon at the bottom of the dialog. Your optimized image will open in the default Web browser application that’s installed on your com- puter. Or to choose a dierent browser that’s installed in your system, from the menu next to the browser icon, choose a browser name or choose Other and locate the desired browser. A Using the Save for Web & Devices dialog, you can choose and preview the eect of dierent optimization settings. Optimization settings Preview the optimized image in a browser (button and menu) Preview tabs Optimization options Download Speed menu ptg Export 423 Optimizing a file in the GIF format e GIF format preserves at colors and sharp edges (such as type), but it saves only up to 256 colors. You must use this format if you need to preserve transparency. To optimize a file in the GIF format: 1. Choose File > Save for Web & Devices (Ctrl- Alt-Shift-S/Cmd-Opt-Shift-S. 2. Click the 2-Up tab at the top of the Save for Web & Devices dialog so you can compare origi- nal and optimized previews of the image. You can change the zoom level for the previews by pressing Ctrl/Cmd + or 3. Do either of the following: To optimize the le using a preset, from the Preset menu, choose one of the GIF options. Leave the preset settings as they are, then click Save. In the Save Optimized As dialog, keep the .gif extension, choose a location, then click Save. To choose custom optimization settings instead, follow the remaining steps. 4. From the Optimized File Format (second) menu, choose GIF. A 5. From the Color Reduction Algorithm menu, choose a method for reducing the number of colors in the image (see the sidebar at right) ( A , next page). 6. Choose a maximum number of Colors for the color table by choosing a preset value from the menu or by entering an exact number in the eld. e fewer the colors, the smaller the le size. 7. Choose a method from the Dither Algorithm menu. Dithering is a process by which Photoshop mixes dots of dierent colors to simulate more colors. Although the Diusion option produces a larger le, it yields the best compromise between quality and le size. With the No Dither option chosen, gradients may have visible bands. Also choose a Dither percentage. e higher the dither value (color simulation), the larger the le size ( B , next page). 8. Check Transparency to preserve any fully trans- parent pixels in the image. is option allows for the creation of nonrectangular image borders. With Transparency unchecked, transparent pixels will be lled with the color that’s currently THE COLOR REDUCTION ALGORITHMS ➤ Perceptual generates a color table based on the colors currently in the document, with a bias toward how colors are actually perceived. ➤ Selective, the default option, generates a color table based on the colors currently in the document, for the purpose of preserving fl at col- ors, Web-safe colors, and overall color integrity. ➤ Adaptive generates a color table based on the part of the color spectrum that represents the predominant colors in the document. This choice produces a slightly larger optimized fi le. ➤ Restrictive (Web) generates a color table by shifting image colors to colors in the standard Web-safe palette, which contains only the 216 colors that the Windows and Macintosh browser palettes have in common. This choice produces the least number of colors and the smallest fi le size but not necessarily the best-looking image. With today’s improved display technology, you don’t need to choose this option. Continued on the following page A To create a GIF le, choose optimization options in the Save for Web & Devices dialog. Optimized File Format menu Color Reduction Algorithm menu Dither Algorithm menu Optimize menu ptg 424 Chapter 26 C i s i m a g e w a s o p t i m i z e d a s a G I F w i t h Transparency checked and Matte set to black. A thin black line appears along the edge of each shape. A i s i m a g e w a s o p t i m i z e d a s a G I F w i t h 3 2 c o l o r s using the Selective algorithm with no Dither. B i s t h e s a m e i m a g e o p t i m i z e d w i t h 1 0 0 % D i t h e r . D i s i m a g e w a s o p t i m i z e d a s a G I F w i t h Transparency checked and Matte set to None. e shapes have hard edges. listed on the Matte menu. Regardless of the Transparency setting, the GIF format doesn’t preserve semitransparent pixels. Leave the Interlaced option unchecked. 9. To control how semitransparent pixels along the edge of an image will blend with the background of a Web page, choose a Matte option. C For the Matte color, choose the background color of the Web page, if you know what that color is. Any soft-edged eects (such as a Drop Shadow) on top of transparent areas will ll with the chosen Matte color. If the background color is unknown, set Matte to None; this will produce a hard, jagged edge. D Another option is to choose Matte: None, then check Transparency and choose one of three options from the Transparency Dither Algorithm menu. ese eects will look the same on any background. Diffusion applies a random pattern to semitransparent pixels and diuses it across adjacent pixels. is method usually produces the most subtle results and allows you to set the dithering amount. Pattern applies a halftone pattern to the semitranspar- ent pixels. Noise applies a pattern similar to Diusion without aecting neighboring pixels. 10. Optional: You can adjust the Lossy value to fur- ther reduce the le size. As the name “Lossy” implies, this option discards some image data, but the savings in le size may justify the slightly reduced image quality. 11. Check Convert to sRGB to convert the color to sRGB, the standard prole for Web browsers. 12. From the Preview menu, choose a display gamma value to be simulated when the optimized image is previewed (see the sidebar on page 426). 13. From the Metadata menu, choose which metadata is to be saved with the le, such as Copyright and Contact Info. is data was assigned to the le by your camera, or by you in Bridge via the Metadata panel or the File Info dialog. 14. In the Image Size area, enter the desired W and H size values in pixels for the GIF le, or enter a scale percentage in the Percent eld. 15. Follow steps 2–4 on page 422 to preview your settings. Make any needed adjustments, then click Save. e Save Optimized As dialog opens. Change the name (if desired), keep the .gif extension, choose a location, then click Save. ptg Export 425 Optimizing a file in the JPEG format JPEG is the best format for optimizing continuous- tone imagery (photographs, paintings, gradients, and the like) because by saving 24-bit color, you enable those colors to be seen and enjoyed by any viewer whose display is set to thousands or millions of colors. Two notable drawbacks to JPEG, however, are that its compression methods discard image data and that it doesn’t preserve transparency. To optimize an image in the JPEG format: 1. Choose File > Save for Web & Devices (Ctrl-Alt-Shift-S/Cmd-Opt-Shift-S). 2. Click the 2-Up tab at the top of the Save for Web & Devices dialog so you can compare the original and optimized previews of the image. You can change the zoom level for the previews by pressing Ctrl/Cmd + or 3. Do either of the following: To optimize the le using a preset, from the Preset menu, A choose one of the JPEG options. Leave the preset settings as they are, then click Save. In the Save Optimized As dialog, keep the .jpg extension, choose a location, then click Save. To choose custom optimization settings instead, follow the remaining steps. 4. From the Optimized File Format (second) menu, choose JPEG. 5. Do either of the following: From the Compression Quality menu, choose a quality level for the optimized image B–C (and A , next page). Choose a Quality value for the exact amount of compression needed. ➤ e higher the compression quality, the better the image quality — and the larger the le size. 6. Increase the Blur value to lessen the visibility of artifacts that the JPEG compression method pro- duces, and to reduce the le size. Be careful not to overblur the image, though, or the details will become too soft. 7. Choose a Matte color to be substituted for areas of transparency in the original image. If you choose None, transparent areas will be changed to white in the optimized image. C i s i s t h e i m a g e o p t i m i z e d a s a J P E G a t M e d i u m Q u a l i t y . Continued on the following page B i s i m a g e w a s o p t i m i z e d a s a J P E G a t H i g h Q u a l i t y . A To create a JPEG le, choose optimization options in the Save for Web & Devices dialog. Optimized File Format menu Optimize menu Compression Quality menu ptg 426 Chapter 26 Note: e JPEG format doesn’t support trans- parency. To have the Matte color simulate trans- parency, make it the same solid background color as that of the Web page (of course you need to know what that color is). Click the Matte color swatch, and enter values in the Color Picker dialog. 8 . Leave Progressive unchecked. 9. Optional: Check Optimized to produce a smaller le size. Note that some older browsers don’t support this option. 10. Check Embed Color Profile. e newest genera- tion of browsers can use a le’s embedded color prole to display a color-managed image. 11. Check Convert to sRGB to convert the opti- mized color to sRGB, the standard prole for Web browsers. Note: Even with this option checked, the conversion of image colors will be more accurate if the embedded color prole is included, as we instructed you to do in the preceding step. 12. From the Preview menu, choose a display gamma value to be simulated when the optimized image is previewed (see the sidebar at right). 13. From the Metadata menu, choose which meta- data is to be saved with the optimized le, such as Copyright and Contact Info. is data was assigned to the le by your camera, or by you in Bridge via the Metadata panel or the File Info dialog. 14. In the Image Size area, enter the desired W and H size values in pixels for the JPEG le, or enter a scale percentage in the Percent eld. 15. Follow steps 2–4 on page 422 to preview your settings. Make any needed adjustments, then click Save. e Save Optimized As dialog opens. Change the name (if desired), keep the .jpg extension, choose a location, then click Save. A i s i s t h e i m a g e o p t i m i z e d a s a J P E G a t L o w Q u a l i t y . CHOOSING A PREVIEW OPTION ★ Monitor Color No gamma change Legacy Macintosh (No Color Management) Mac 1.8 gamma Internet Standard RGB (No Color Management) Windows 2.2 gamma, the most common gamma Use Document Profi le Adjusts the gamma to match the document pro- fi l e , i f t h e fi l e c o n t a i n s o n e CREATING AN OPTIMIZATION PRESET To save the current optimization settings in the Save for Web & Devices dialog, choose Save Settings from the Optimize menu. In the Save Optimization Settings dialog, enter a name (include the .irs exten- sion), keep the location as the Optimized Settings folder, then click Save. Your saved set is now available on the Preset menu in the Save for Web & Devices dialog for any fi le. . compressible than others. For example, a docu- ment with a solid background color and a few solid-color shapes will compress much more than a large document that contains many color areas,. le formats most com- monly used for Web graphics, are best suited for dierent types of Photoshop documents: GIF ➤ GIF preserves at colors and sharp edges (such as type) better than JPEG,. currently in the document, with a bias toward how colors are actually perceived. ➤ Selective, the default option, generates a color table based on the colors currently in the document, for the