ptg 450 Chapter 19 Photoshop comes complete with everything you will need to properly compress any JPEG Document. The Internet can generally be slow to navigate, and your visitors typically do not have much patience. When you compress a JPEG image, you're essentially removing information from the image to reduce its file size and speed up the loading time. The unfortunate result of that reduction is loss of image quality. Internet graphics are not always the best quality; however, reducing file size is a necessary evil to keep visitors from clicking off your site and moving to another. To keep visitors happy, your JPEG images must load fast, and Photoshop is just the application to help you accomplish that goal. Optimizing a JPEG Document Optimize a JPEG Document Open a document. Click the File menu, and then click Save For Web & Devices. Click the Original, Optimized, 2-Up, or 4-Up tabs to view the document using different layouts. Click one of the sample images to change its default format. Click the Optimized File Format list arrow, and then click JPEG. Select from the following Quality options: ◆ Compression Quality. Click the list arrow, and then select a preset JPEG quality from Low (poor quality) to Maximum (best quality). ◆ Quality Amount. Enter a JPEG quality compression value (0 to 100). The lower the value, the more information (color) is sacrificed for image size. ◆ Blur. JPEG images compress better when the image has soft edges. Apply the Blur option to increase the softness of the image (at a sacrifice of image quality). 6 5 4 3 2 1 4 3 5 6 From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 451 Click the Matte list arrow, and then select from the available options. JPEG images do not support transparency. If your image contains transparent areas, use the Matte option to fill them in using a specific color. Select the Optimized check box to further compress the image. Choose from two additional options: ◆ Progressive. Select the check box to load a JPEG in three progressive scans. Not supported by all browsers. ◆ Embed Color Profile. Select the check box to embed an ICC color profile into the JPEG image. This increases file size but helps maintain color consistency between monitors and operating systems. Choose from three new options to apply to your saved file: ◆ Convert to sRGB. You can choose to have image colors converted to sRGB in the Save process. ◆ Preview. Select from four preview options: Monitor Color (default), Macintosh or Windows with no color management, or Use Document Profile. ◆ Metadata. Select from five options to include no metadata, copyright only, copyright and contact info, all metadata except camera info, or all metadata. Click Save to open the Save Optimized As dialog box where you can choose a location for your saved file. 10 9 8 7 8 9 7 10 From the Library of Wow! eBook ptg 452 Chapter 19 The GIF file format is used primarily for images that contain solid colors with sharp edges, such as clip art, text, line art, and logos. Since the Internet can generally be slow to navigate, using the GIF format for images significantly reduces their file size, and will create fast-loading graphics. The GIF format supports 8-bit color, and creates a document with a maximum of 256 colors (the fewer colors, the smaller the file size). The GIF format has been around long enough for it to be consid- ered a "native" Internet format. A native format is one that does not require a specific plug-in for the browser to display the file. Optimizing a GIF Document Optimize a GIF Document Open a document. Click the File menu, and then click Save For Web & Devices. Click the Original, Optimized, 2-Up, or 4-Up tabs to view the document using different layouts. Click one of the sample images to change its default format. Click the Optimized File Format list arrow, and then click GIF. Select from the following options: Color Options: ◆ Reduction. Click to select a visual reduction method for the image’s colors (Selective is the default). ◆ Colors. Enter or select a value from 2 to 256 maximum colors. ◆ Web Snap. Enter or select a value from 0% to 100% to instruct the GIF compression utility how many of the image colors should be web-safe. 6 5 4 3 2 1 3 4 6 5 From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 453 Dither Options: ◆ Method. Click the list arrow, and then select from the available dithering schemes (No Dither, Diffusion, Pattern, or Noise). Dithering refers to how the GIF format mixes the available colors in the image. ◆ Amount. Enter or select a value from 0% to 100% to instruct the GIF compression utility how many of the image’s colors should be dithered. Transparency Options: ◆ Transparency. Check to keep the transparent areas of a GIF image transparent and choose type of transparency dither (None, Diffusion, Pattern, or Noise). ◆ Matte. Click to fill the trans- parent areas of a GIF image. ◆ Dither. Click to select a dithering scheme (None, Diffusion, Pattern, Noise) and enter an amount for the mixing of the matte color. Other Options: ◆ Interlaced. Check to have the GIF image load in three scans. ◆ Lossy. Enter or select a value from 0 to 100 to instruct the GIF compression utility how much image loss is allowed. Click Save to save the current image using the Save Optimized As dialog box. 7 6 7 From the Library of Wow! eBook ptg 454 Chapter 19 The PNG-8 file format is used primarily for images that contain solid colors with sharp edges—clip art, text, line art, and logos—and was designed as an alternative to the GIF file format. Since the PNG-8 format generates an image with a maximum of 256 colors, it signifi- cantly reduces an image's file size. While similar to the GIF file format, the PNG-8 format is not completely supported by older browsers. However, it is considered a native format for the creation of Flash animation movies. Optimizing a PNG-8 Document Optimize a PNG-8 Document Open a document. Click the File menu, and then click Save For Web & Devices. Click the Original, Optimized, 2-Up, or 4-Up tabs to view the document using different layouts. Click one of the sample images to change its default format. Click the Optimized File Format list arrow, and then click PNG-8. Select from the following options: Color Options: ◆ Reduction. Click to select a visual reduction method for the colors in the image (Selective is the default). ◆ Colors. Enter or select a value from 2 to 256 maximum colors. ◆ Web Snap. Enter or select a value from 0% to 100% to instruct the PNG-8 compression utility how many of the image’s colors should be web-safe. 6 5 4 3 2 1 3 4 6 5 From the Library of Wow! eBook ptg Chapter 19 Designing for the Web and Devices 455 Dither Options: ◆ Method. Click the list arrow, and then select from the available dithering schemes (None, Diffusion, Pattern, or Noise). Dithering is how the PNG-8 format mixes the available image’s colors. ◆ Amount. Enter or select a value from 0% to 100% to instruct the PNG-8 compression utility how many of the image’s colors should be dithered. Transparency Options: ◆ Transparency. Check to keep the transparent areas of a PNG-8 image transparent. ◆ Matte. Click to fill the trans- parent areas of a PNG-8 image. ◆ Dither. Click to select a dithering scheme (None, Diffusion, Pattern, or Noise) and enter an amount for the mixing of the matte color. Other Options: ◆ Interlaced. Check to have the PNG image load in three scans. Click Save to save the current image using the Save Optimized As dialog box. 7 6 7 From the Library of Wow! eBook . ptg 450 Chapter 19 Photoshop comes complete with everything you will need to properly compress any JPEG Document your site and moving to another. To keep visitors happy, your JPEG images must load fast, and Photoshop is just the application to help you accomplish that goal. Optimizing a JPEG Document Optimize. options: ◆ Progressive. Select the check box to load a JPEG in three progressive scans. Not supported by all browsers. ◆ Embed Color Profile. Select the check box to embed an ICC color profile into