How to Reduce GIF File Size for Better Web Site Performance

More efficient GIFs lead to speedier download times and less bandwith usage

Photoshop Elements Save for Web

The lowly GIF is making a comeback simply because with the increasing use of smartphones and limited bandwidth, people 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.

GIF Images and the Web

GIF images

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. GIFs 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 new infrastructure 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

To make your GIF as efficient as possible:

  1. Crop 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, reduce the output dimensions. Each graphics-editing program offers different commands for resizing.

  3. Reduce the number of colors in the image. GIFs can only display 256 colors, but if your image only has a few, then reduce the color count anyway. 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.

  4. Reduce the number of frames in the image for animated GIFs. Avoid useless animation, in general — excessive animation not only adds to your web page's download time, but many people find it distracting.

  5. If you use Photoshop, 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 process will open the Save For Web dialog box that is also found in Adobe Photoshop at File > Export > Save for Web (Legacy). When it opens you can apply dithering, reduce the color, and modify the 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.