How to Optimize GIF and PNG Images for Your Social Media Site - dummies

How to Optimize GIF and PNG Images for Your Social Media Site

By Janine Warner, David LaFontaine

If you’re working with a graphic that can be displayed in 256 colors or less on your social media site — such as a logo, cartoon character, or drawing — your best bet is to use the PNG format and reduce the total number of colors used in the image as much as possible to reduce the file size.

To help make up for the degradation in image quality that can happen when colors are removed, GIF and PNG use a dithering trick. Dithering involves alternating pixels in a checkerboard-like pattern to create subtle color variations, even with a limited color palette. The effect can smooth the image’s edges and make it appear to have more colors than it actually does.

To convert an image to a GIF or a PNG in Photoshop, follow these steps. In Photoshop Elements, Fireworks, or GIMP the process is similar although the specific steps may vary.

  1. With the image open in Photoshop, choose File→Save for web & Devices.

    The Save for Web & Devices dialog box appears.

  2. In the top-left corner of the dialog box, choose the 2-Up or 4-Up tab to display multiple versions of the same image for easy comparison.

    4-Up makes it possible to view the original image (in the upper-left corner) as well as three different previews of the same image.

    [Credit: Tom Mccain]
    Credit: Tom Mccain
  3. Click to select any of the four preview images to see the size and adjust its settings.

    The size, format, and other settings of the selected image are shown in the top right of the dialog box. Reducing the number of colors and other options can dramatically affect the image.

    For example, the fourth version, shows the image with only two colors showing. In the other three squares, the image includes more colors — and although they look better, the file size will be larger.

    Changing the preview images in the 4-Up view enables you to compare the original image with up to three different versions using different Colors, Transparency, and other settings, covered in the steps that follow.

  4. On the right side of the dialog box, just under Preset, click the small arrow to open the Optimized File Format drop-down list and choose PNG-24.

    The PNG-24 option produces a better quality image. The quality of the image declines quickly as you reduce the number of colors in the file or change the format to GIF. However, you also reduce the file size.

  5. In the Colors box, select the number of colors.

    image1.jpg

    The fewer colors you use, the smaller the file size and the faster the image will download.

    If you reduce the colors too much, you lose details. The ideal number of colors depends on your image. You want as small an image as possible, but if you reduce the number of colors too far, your image will look terrible.

  6. If you want to maintain a transparent area in your image, select the Transparency check box.

    Any area of the image that was transparent when you created the image in the editor appears transparent in the preview window. If you don’t have a transparent area in your image, this setting has no effect.

    Using transparency is a good trick for making text or an image appear to float because a transparent background doesn’t appear on the web page. You can select transparency as a background option in the New dialog box when you create a new image in Photoshop or Photoshop Elements.

  7. Specify other settings as desired.

    The remainder of the settings in this dialog box can be left at their defaults in Photoshop.

  8. Click Save.

    The Save Optimized As dialog box opens.

  9. Enter a name for the image and save it into a folder that you can quickly and easily locate when it comes time to upload to your chosen social media site.

Repeat these steps for each image you want to optimize as a GIF or PNG for your site.

Trial and error is a great technique in the Save for Web & Devices dialog box. In each of the three preview windows displaying optimized versions the drawing of the house, fewer and fewer colors were used, which reduces the file size with an increasingly degrading effect.