How To Make Smaller GIFs

Tips for Reducing GIF File Size

Photoshop Elements Save for Web
Using the Save for Web option in your software will let you preview file size and quality as you adjust GIF file options. © S. Chastain

The lowly GIF is making a comeback simply because with the increasing use of smartphones and limited bandwidth users have come to expect almost instant load times. The smaller your web images are, the faster your images will load and the happier your visitors will be. In addition, many Web sites have restrictions on the size of ad banners.

That being said, GIF images are not to be regarded as a one-size fits all solution.

GIf images have a maximum of 256 colors meaning you can expect serious image and color degradation if you aren't careful. The GIF file format, in many respects, is a legacy format that goes back to the earliest days of the web. Prior to the introduction of the GIF format, web images were black and white and compressed using the RLE format.They first appeared on the scene in 1987 when Compuserve released the format as a web imaging solution. At that time, color was just emerging on the desktop and the web was accessed by modems connected to the phone line. This created a need for an image format that kept images small enough to be delivered, through a phone line, to a web browser in short order.

GIF images are ideal for sharp edged graphics with a limited colour palette such as a logo or line drawing. Though they can be used for photographs the reduced color palette will introduce artifacts into the image.

Still the Glitch Art movement and the rise of the Cinemagraph have sparked a renewed interest in the GIF format.

These tips will help you make your GIFs as small as possible.

Difficulty: Average

Here's How:

  1. Crop away any extra space around the image. Reducing the pixel dimensions of your image is the single most effective way to reduce the file size. If you use Photoshop, the Trim command works well for this. If you use Photoshop Elements, we have a free trim action you can download.
  1. When you prepare a gif image, you might want to reduce the output dimensions.
  2. Reduce the number of colors in the image.
  3. For animated GIFs, reduce the number of frames in the image. For a full overview of how to create an Animated GIF you might want to read How To Create An Animated GIF In Adobe Photoshop.
  4. If you use Photoshop CC 2017, you can create a GIF file by using the Export As .. menu item. Select File>Export As ... and when the menu opens select GIF as the file format and reduce the physical dimensions- Width and Height-  of the image.
  5. If you use Adobe Photoshop Elements 14, select File>Save For web. This will open the Save For Web dialog box that is also found in Adobe Photoshop CC 2017 (File>Export> Save for Web(Legacy) ). When it opens you can apply dithering, reduce the color and physical dimensions of the image.
  6. Avoid dithering. Dithering may make some images look better, but it will increase the file size. If your software allows it, use a lower level of dithering to save extra bytes.
  7. Some software has a "lossy" option for saving GIFs. This option can significantly reduce the file size, but it also reduces image quality.
  8. Don't use interlacing. Interlacing usually increases the file size.
  1. Both Photoshop and Photoshop Elements will show you the download time. Pay no attention to it. It is based on the use of a 56k modem. A more valid number will appear if you select a cable Modem from the pop down menu.

Tips:

  1. Avoid useless animation. Excessive animation not only adds to your web page's download time, but many users find it distracting.
  2. GIF images with large blocks of solid color and horizontal patterns compress better than images with color gradations, soft shadows, and vertical patterns.
  3. When reducing colors in GIFs, you'll get the best compression when the number colors is set to the smallest possible of these options: 2, 4, 8, 16, 32, 64, 128, or 256.

Updated by Tom Green

Format
mla apa chicago
Your Citation
Chastain, Sue. "How To Make Smaller GIFs." ThoughtCo, Jan. 13, 2017, thoughtco.com/how-to-make-smaller-gifs-1699970. Chastain, Sue. (2017, January 13). How To Make Smaller GIFs. Retrieved from https://www.thoughtco.com/how-to-make-smaller-gifs-1699970 Chastain, Sue. "How To Make Smaller GIFs." ThoughtCo. https://www.thoughtco.com/how-to-make-smaller-gifs-1699970 (accessed December 14, 2017).