Save Photoshop Images as GIF for Web and Mobile Devices - dummies

Save Photoshop Images as GIF for Web and Mobile Devices

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Saving files for the web or mobile devices in Photoshop Creative Suite 5 creates a smaller version of your image so it will load quickly. The idea is to make the image as small as possible while keeping it visually pleasing.

Use the GIF format if you have large areas of solid color.

An image with lots of solid color makes a good GIF.
An image with lots of solid color makes a good GIF.

The GIF format isn’t lossy (it doesn’t lose data when the file is compressed in this format), but it reduces file size by using a limited number of colors in a color table. The lower the number of colors, the smaller the file size. If you’ve ever worked in Index color mode, you’re familiar with this process.

Transparency is supported by the GIF file format. Generally, GIF files don’t do a good job on anything that needs smooth transitions from one color to another, because of the format’s poor support of anti-aliasing, which is the method Photoshop uses to smooth jagged edges. When an image transitions from one color to another, Photoshop produces multiple colors of pixels to create an even blend between the two colors.

Because anti-aliasing needs to create multiple colors for this effect, GIF files generally aren’t recommended. In fact, when you reduce the size of a GIF, you’re more apt to see banding (an artifact that appears as streaks in the image) because the anti-aliasing can’t take place with the limited number of colors available in the GIF format.

You can, of course, dramatically increase the number of colors to create a smoother transition, but then you risk creating monster files that take forever to download.

Save as GIF

When you choose File→Save For Web & Devices, you first see the available GIF format options. They may be clearer to you if you have an image open (with lots of solid color in it).

To save a file for the Web as a GIF, follow these steps:

  1. Choose File→Save for Web & Devices.

    The Save for Web & Devices dialog box appears.

  2. At the top, click the 2-Up tab.

    You see the original image on the left and the optimized image on the right (or top and bottom, depending on the image proportions).

    In the lower portion of the display, you see the original file size compared to the optimized file size, as well as the approximate download time. The download time is important. Most people don’t wait more than ten seconds for a web page to appear, so keep each image’s download time to five seconds or fewer.

    Change the download speed by choosing from the Preview menu (look for the arrow on the upper right side of the Save for Web & Devices dialog box).

  3. Choose GIF 32 No Dither from the Preset drop-down list.

    You may see a change already. Photoshop supplies you with presets to choose from, or you can customize and save your own.

  4. Choose whether you want dithering applied to the image by selecting an option from the Specify the Dither Algorithm drop-down list.

    This choice is purely personal. Because you may be limiting colors, Photoshop can use dithering to mix the pixels of available colors to simulate missing colors. Many designers choose the No Dither option because dithering can create unnatural color speckles in an image.

    Choose from presets, or create your own custom settings.
    Choose from presets, or create your own custom settings.
  5. If your image is on a transparent layer and you want to maintain that transparency on a Web page, select the Transparency check box.

Color table in Save for Web & Devices dialog box

When you save an image in GIF format using the Save for Web & Devices dialog box, you see the color table for the image on the right side of the dialog box. The color table is important because it not only lets you see the colors used in the image but also enables you to customize the color table by using the options at the bottom.

You may want to customize your color table by selecting some colors to be Web safe and locking colors so that they’re not bumped off as you reduce the number that’s used.

To customize a color table, follow these steps:

  1. If your image has only a few colors that you want to convert to Web-safe colors, choose the Eyedropper tool from the left of the Save for Web & Devices dialog box and click the color in Optimized view.

    The sampled color is highlighted in the color table.

  2. Click the Web Safe button at the bottom of the color table.

    When you cross over this button, the tooltip Shifts/Unshifts Selected Colors to Web Panel appears.

    A diamond appears, indicating that the color is now web safe.

  3. Lock colors that you don’t want to delete as you reduce the number of colors in the color table.

    Select a color with the Eyedropper tool, or choose it in the color table and then click the Lock Color button. A white square appears in the lower right corner, indicating that the color is locked.

    If you lock 32 colors and then reduce the color table to 24, some of your locked colors are deleted. If you choose to add colors, those locked colors are the first to return.

    Customize colors by using the color table in the Save for Web and Devices window.
    Customize colors by using the color table in the Save for Web and Devices window.

How is the color table created? Based on the color-reduction algorithm method you choose, the Save for Web & Devices feature samples the number of colors you indicate. If keeping colors web safe is important, select the Restrictive (Web) option for the method; if you want your image to look better on most monitors but not necessarily to be web safe, choose the Adaptive option.

  1. Use the Colors drop-down menu or enter a number to add or delete colors from the color table.

  2. If your image uses transparency, select the Transparency check box near the top of the Save for Web & Devices dialog box.

    Remember that transparency is counted as one of your colors in the color table.

  3. Select the Interlaced check box only if your GIF image is large (25K or larger).

    Selecting this option causes the image to build in several scans on the web page — a low-resolution image that pops up quickly and is then refreshed with the higher-resolution image when the download is complete. Interlacing gives the illusion of the download going faster but makes the file size larger, so use it only if necessary.

  4. Click Save.

    Now the image is ready to be attached to an e-mail message or used in a web page.