How to Reduce GIF File Size for Better Web Site Performance

Photoshop Elements Save for Web

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 websites have restrictions on the size of ad banners.

GIF Images and the Web

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 color 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.

How to Reduce GIF File Size for Better Web Site Performance

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

  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.

  2. When you prepare a gif image, you might want to reduce the output dimensions.

  3. Reduce the number of colors in the image.

  4. For animated GIFs, reduce the number of frames in the image.

  5. If you use Photoshop, 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.

  6. If you use Adobe Photoshop Elements, select File > Save For Web. This will open the Save For Web dialog box that is also found in Adobe Photoshop, File > Export > Save for Web (Legacy). When it opens you can apply dithering, reduce the color, and physical dimensions of the image.

  7. 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.

  8. Some software has a "lossy" option for saving GIFs. This option can significantly reduce the file size, but it also reduces image quality.

  9. Don't use interlacing. Interlacing usually increases the file size.

  10. 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.


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