| You're not limited to using predefined settings to optimize your images. You can fine-tune these settings further by using the collection of drop-down menus, check boxes, and sliders available in the Settings portion of the Save for Web dialog box. For example, if you want your JPEGs to retain a little more image quality as they're compressed for the Web, you can change the default quality setting for a Medium JPEG image from 30 to 45, improving its sharpness and detail without increasing its download time. As you make adjustments, refer to the optimized image preview to the left of the Settings column. There, you can see how your changes affect the image, as well as its file size and download time. To apply custom JPEG optimization settings to an image 1. | Open the image you want to optimize, then choose File > Save for Web to open the Save for Web dialog box.
| 2. | From the Preset drop-down menu, choose one of the predefined JPEG settings (Figure 10.11).
Figure 10.11. If you like, you can choose one of the predefined JPEG settings to use as a baseline for your own custom settings. 
You don't have to choose one of the predefined JPEG settings, but they can serve as a good jumping-off point for building your own settings. For instance, if you decide that small file size and quick download time are priorities, you might want to start with the predefined JPEG Low setting and then customize the settings from there.
| 3. | Verify that JPEG is selected from the Optimized file format drop-down menu, or if you've decided to skip step 1, choose JPEG from the Optimized drop-down menu (Figure 10.12).
Figure 10.12. Optimization formats can be changed at any time from the drop-down menu. 
| 4. | To set the image quality, do one of the following:
- From the compression quality drop-down menu, choose a quality option (Figure 10.13).
Figure 10.13. You can choose from five basic quality options for JPEG images: Low, Medium, High, Very High, and Maximum. 
- Drag the Quality slider while referring to the optimized preview (Figure 10.14).
Figure 10.14. Once a quality option has been selected, use the slider control to fine-tune it. 
The Quality slider has a direct impact on the Quality drop-down menu, and vice versa. When the slider is set between 0 and 29, the level in the Quality drop-down menu will be Low. A setting of 30 through 59 registers as Medium, 60 through 79 as High, and 80 through 100 as Maximum. Just remember that a quality setting in the Maximum range will usually create a file six to eight times larger than one saved in the Low range.
| 5. | Select the Progressive check box if you want your image to build from a low-resolution version to its final saved version as it downloads in a Web browser (Figure 10.15).
Figure 10.15. The Progressive feature draws your image incrementally on a Web page as it downloads, eventually displaying the image in its final state. 
This option is more critical for large, high-quality images with download times in the tens of seconds. Rather than leaving a blank space, the low-resolution image appears almost immediately, giving your Web page visitors something to look at until the complete file is downloaded.
| 6. | Select the ICC Profile check box if you've previously saved a color profile with your image and want that information preserved in your optimized image.
Unless your photo or art contains some critical color (a logo with a very specific corporate color, for instance), you should leave this box unchecked. Not all Web browsers support color profiles, and the inclusion of the profile information can increase a file's size significantly.
| 7. | If your original image contains transparency, see "Making a Web Image Transparent" later in this chapter.
| 8. | Click the OK button in the Save for Web dialog box to rename and save your optimized image.
|
To apply custom GIF optimization settings to an image 1. | Open the image you want to optimize, then choose File > Save for Web to open the Save for Web dialog box.
| 2. | From the Preset drop-down menu, choose one of the predefined GIF settings, or choose GIF from the Optimized file format drop-down menu (Figure 10.16).
Figure 10.16. Choose the GIF setting to optimize illustrations, vector art, or type. 
| 3. | From the Color Reduction Algorithm drop-down menu, choose the color lookup table that you want applied to your image (Figure 10.17). (For more information, see the sidebar "About Color Models and Color Lookup Tables" earlier in this chapter.)
Figure 10.17. The GIF format offers several schemes for interpreting and displaying the color in your image. 
| 4. | From the Colors drop-down menu, choose the maximum number of colors that will be displayed in your image by specifying the number of colors that the image's palette will contain (Figure 10.18).
Figure 10.18. A GIF image can contain from 2 to 256 colors. 
You can choose from the list of eight standard color palette values, use the arrows to the left of the text box to change the values in increments of one, or simply enter a value in the text box and press Enter/Return.
When formatting GIF images, the number of colors you specify will have a larger impact on final file size and download time than any other attribute you set. Naturally, the fewer colors you select, the smaller the image file size will be, so experiment with different values, gradually reducing the number of colors, until you arrive at a setting you find acceptable (Figure 10.19).
Figure 10.19. This illustration was optimized with three GIF color palettes containing progressively fewer colors. From left to right, the illustrations were saved with palettes of 16, 8, and 4 colors, creating file sizes of roughly 32K, 19K, and 12K, respectively. 
| 5. | Use the Dither slider to specify a percentage for the dither (Figure 10.20).
Figure 10.20. Since diffusion is the default dither option for any GIF image you create in the Save for Web dialog box, you can control the amount of dithering that occurs: from 0 to 100 percent. 
Higher percentages create finer dither patterns, which tend to preserve more detail in images where limited color palettes have been specified.
Although not accessible from the Save For Web dialog box, Photoshop Elements gives you the option to save a GIF image with one of three different Dither options. (For more information, see the sidebar "Choosing Dithering Options.")
| 6. | If you want your image to build from a low-resolution version to its final saved version as it downloads in a browser, select the Interlaced check box (Figure 10.21).
Figure 10.21. The Interlaced feature works like JPEG's Progressive option to draw your image incrementally on a Web page as it downloads. 
Interlacing a GIF image works in much the same way as applying the Progressive option to a JPEG image. If you choose not to select the interlace option, your image won't display on a Web page until it's completely downloaded.
| 7. | If your original image contains transparency, see "Making a Web Image Transparent" later in this chapter.
| 8. | Click the OK button in the Save for Web dialog box to rename and save your optimized image.
|
 Tip
If you want to save an image in the PNG-8 format, you'll find that it uses all the same options as for GIF, and the procedures for applying custom PNG-8 settings will be exactly the same as those for GIF. The only options available for PNG-24 are transparency and interlacing.
Choosing Dithering Options Because a GIF image works with a limited color palette, it's impossible to reproduce most of the millions of colors visible to the human eye, much less subtle gradations of tone and color. GIF optimization employs a little visual trick called dithering to fool the eye into perceiving more colors and softer transitions than are actually there. By reorganizing pixels of different hues and values, dithering can do a surprisingly good job of simulating thousands of colors with a palette of a hundred colors or less (Figure 10.22). Dithering works, quite simply, by mixing two available colors to create the illusion of a third. Blue and yellow pixels mixed together will blend to create green. Black and white pixels mixed in varying proportions will simulate a graduated fill or soft-edged drop shadow. Figure 10.22. The original image (left) relies on thousands of subtle tonal and value changes to define shapes, shadows, and highlights. The GIF-optimized version (right) shows the close-up results of dithering. Since GIF optimization uses a limited palette of colors, it gathers together pixels of whatever colors are available to reproduce an approximation of the original image. 
Any dithered GIF that you create in the Save for Web dialog box is saved with a diffusion dither. But if you save an image from the Save As dialog box (File > Save As) and select CompuServe GIF from the Format drop-down menu, Photoshop Elements offers you a choice of three dithering options. Diffusion is the default scheme for any of the predefined GIF settings; it creates a random pattern that usually yields the most natural-looking results. Diffusion is the only option that allows you to control the percentage of dither present in your image. Pattern, as its name implies, lays down pixels in a uniform grid pattern. It can have the effect of a very coarse halftone screen such as you might see in low-resolution newspaper photography. Noise creates a random pattern similar to Diffusion, but attempts to blend color transitions further by allowing color from one area to spill over slightly into an adjoining one. It occasionally produces an interesting effect, but will rarely be your first choice. |
Optimizing Images to Specific File Sizes Photoshop Elements has yet one more little optimizing trick. There may be times when image quality isn't as critical as the data size of your files. Perhaps you want to email a weekend's trip worth of photos to some friends, but don't want to clog up their mailboxes with megabytes of image files. You can send a batch of mediocre quality images, and then let them pick out the ones they'd like you to create high-resolution copies or prints of. On the right side of the Save for Web dialog box, just next to the main optimization settings drop-down menu, is the Optimize to File Size arrow button. Click the button, and then select Optimize to File Size (Figure 10.23). In the Optimize to File Size dialog box, type in the size you want your file to be (Figure 10.24). In the Start With area of the dialog box, you can also choose from Current Settings, which tells Elements to do its best with your Save for Web settings; or Auto Select, which allows Elements to choose the format that will work best for your image, given the file size constraints. Figure 10.23. Choose Optimize to File Size for additional optimization control. 
Figure 10.24. In the Optimize to File Size dialog box you can choose to have file size take priority over image quality. 
|
|
