Optimizing Web Graphics






Optimizing Web Graphics

The ImageReady Optimize palette lets you select from an array of Web file formats and settings to suit the needs of your Web projects. Using the Optimize palette, you can compare different optimized versions of an image side-by-side to maximize display quality while minimizing file size.

Save for Web command

Photoshop does offer the File>Save for Web command, which uses a slightly stripped-down version of the Optimize palette in ImageReady. Because you’re saving an image for the Web, I really recommend using the full features that the Optimize palette has to offer in ImageReady. Also, working in ImageReady has the fringe benefit of all those great Web tools and features.

Optimizing a GIF

The steps in this section walk you through optimizing an image in the GIF file format with the ImageReady Optimize palette:

  1. Open the image that you want to optimize and save in ImageReady.

  2. Choose Window>Optimize to view the Optimize palette, as shown in Figure.

    Click To expand
    Figure: The Optimize palette contains optimized presets.

    Take a few seconds to look over the Optimize palette. It’s packed with settings!

  3. Click the 2-Up tab in the image window, as shown in Figure.

    Click To expand
    Figure: View your image as a 2-Up so that you can see the original and optimized versions.

    This view displays the original image on the left, and the preview of the optimized image on the right. As you select optimization settings, the optimized preview changes to reflect the settings that you’ve selected.

  4. Use the Preset drop-down list to select an optimized GIF preset combination.

    Even if you want to select custom settings, start with a preset combination to get you going.

    If you like the preset as it is, stop here and move on to the later section “Saving Your Graphics.” To select custom settings, continue with Step 5.

  5. Use the Reduction drop-down list to select a color reduction method.

    The GIF file format uses mathematical formulas to reduce the number of colors (and the file size). Here are the settings that you can choose from:

    • Perceptual: Creates a color table based on the colors in the image and how the eye perceives color.

    • Selective: Creates a color table by using the flat colors and Web-safe colors in the image.

    • Adaptive: Creates a color table based on the part of the color spectrum that contains most of the colors in the image.

    • Restrictive: Creates a color table that shifts the colors in the image to the 216 standard Web-safe colors that Windows and Mac Web browsers have in common.

    The Web Snap slider is used to set how wide a range of colors is automatically set to their Web-safe equivalents. The higher the percentage, the more Web-safe colors are used. Higher settings can result in more dithering and graininess.

  6. Use the Method drop-down list in the Dither area to select a dithering method.

    You can choose from four options: No Dither, Diffusion, Pattern, or Noise. The Diffusion option creates the most subtle results. (To find out more about dithering, turn to “Dithering and anti-aliasing” earlier in this technique.)

    In addition, you can increase the amount of dithering by using the Amount slider in the Dither area.

  7. Select the Transparency check box to preserve any transparent pixels in the image.

    If Transparency is left unchecked, any transparent pixels are colored with the currently selected Matte color. You can select a Matte color in the next step, if you need to.

  8. Select a Matte color in the Transparency area to control how partially transparent pixels along the edge of an image blend with the background of the Web page.

    If you know the color of the Web page’s background, you can use the Matte drop-down list to select the color. Other options that you can select include None, Foreground Color, and Background Color.

  9. In the Options area, select the Interlaced check box if you want to display the image in successively greater detail as it downloads on the Web page.

    You can now save your Web graphic as described in “Saving Your Graphics.”

Optimizing a JPEG

These steps take you through optimizing an image in the JPEG file format with the ImageReady Optimize palette:

  1. Open the image that you want to optimize as a JPEG in ImageReady.

  2. Choose Window>Optimize.

    The Optimize palette shown in Figure opens. If you haven’t used this palette before, take a look at it. It has lots of settings, but it helps you to quickly optimize your image.

    Click To expand
    Figure: Select a preset JPEG setting for starters even if you want to select custom options.

  3. Click the 2-Up tab in the image window, as shown in Figure.

    Click To expand
    Figure: The 2-Up view lets you see both the original image (left) and the optimized version (right).

    This view displays the original image on the left and the preview of the optimized image on the right. As you select optimization settings, the optimized preview changes to reflect the settings that you’ve selected.

  4. Select an optimized JPEG preset combination from the Preset drop-down list.

    Even if you want to select custom settings, start with a preset to give yourself basic settings to work with.

    If you like the preset as it is, stop here and move on to “Saving Your Graphics.” To select custom settings, continue with Step 5.

  5. Use the Quality drop-down list to select a compression quality for the optimized image.

    You can also use the Amount slider to set the exact amount of compression.

    The higher the Quality setting, the lower the compression. This means that you end up with a higher display quality and a larger file size. Fiddle with the settings to see how low you can go before the image quality starts to degrade.

  6. In the Transparency area, select a Matte color to set how partially transparent pixels blend with the background of the Web page.

    The JPEG format doesn’t support transparency, so if you know the color of the Web page background, use the Matte drop-down list to select the color. If the None setting is selected, transparent pixels are automatically colored white.

  7. In the Options area, select the Progressive check box if you want to display the image in successively greater detail as it downloads on the Web page.

    You can now save your Web graphic as described in “Saving Your Graphics,” later in this technique.

Optimizing a Web page that contains both GIFs and JPEGs

With ImageReady, you can optimize GIFs and JPEGs separately even if they are contained within the same Web page.

In order to do this, you must create slices around the different graphic elements on the Web page, select the slices that you want to optimize as GIFs or JPEGs, and then perform the optimization. (To find out how to create slices, turn to Technique 56.)

  1. Shift+click with the Slice Select tool to select the slices containing the graphical elements that you want to optimize.

    You should select only slices containing graphic elements that need to be optimized as GIFs or only the graphical elements that you want to optimize as JPEGs. (You can optimize only one type of graphic at a time.)

  2. If you’re optimizing the selected graphics as GIFs, turn to the section “Optimizing a GIF,” earlier in this technique, and follow the directions. If you’re optimizing the selected graphics as JPEGs, turn to “Optimizing a JPEG,” earlier in this technique, and follow the directions.

Working with Droplets

Droplets are handy little mini-programs that you can quickly create to automate the optimization process.

Time-Saver 

A Droplet saves the settings that you select in the Optimization palette. You can then drag an image or a folder of images over the Droplet icon in order to apply the optimization settings. If you need to optimize many Web graphics with the same optimization settings, Droplets can be a real timesaver.

Droplets can also be used to quickly copy optimization settings from one slice to another.

Here’s how to create a Droplet:

  1. Use the directions in either “Optimizing a GIF” or “Optimizing a JPEG,” earlier in this technique, to select the optimization settings that you need.

  2. Drag the Droplet icon from the Optimize palette onto the desktop, as shown in Figure, or into a folder window.

    Click To expand
    Figure: Drag the Droplet from the Optimize palette onto the desktop.

    Alternatively, you can double-click the Droplet icon and use the Save Optimized Settings As Droplet dialog box to enter a name for the Droplet and select a folder where you want the Droplet to reside.

    The Droplet is now ready for use.

After you create Droplets, you can use them to optimize individual files or a folder of files. Simply drag an image file or folder onto the Droplet icon on the desktop. If ImageReady isn’t running when you use the Droplet, the Droplet automatically launches ImageReady and opens the file(s) in the program.

You can also copy optimization settings from one slice to another. Here’s how:

  1. Select the slice containing the optimization settings that you want to copy with the Slice Select tool.

  2. In the Optimization palette, drag the Droplet icon onto the slice to which you want to copy the settings.

    The settings are automatically copied to that slice.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows