How I Compress GIFs for Medium — Part 2

6 min readApr 20, 2021

Compressing GIFs using Adobe Photoshop

Let’s get those GIFs down to 5 MB!

In my last post I talked about compressing GIFs using imagemagick and gifscile, two free and open source tools that work great but require knowledge of command line tools to operate. If you’re not comfortable using the terminal or maybe you just prefer something with a user interface, you’re in luck. There are many apps available that allow people to create GIFs and compress them, a quick search of “GIF converter” or “GIF maker” on the App Store will reveal dozens of them at various price ranges.

However, this tutorial will be focused on using Adobe Photoshop. Photoshop is a paid program but does offer a free trial for anyone who doesn’t have it already, and after some practice the interface is very intuitive. With the focus of this tutorial being the compression of GIFs as opposed to simply making GIFs, Photoshop is a perfect tool for the job.

Open Photoshop

To begin, take your video or GIF file and open it with Photoshop. This should open it in the Timeline view. If you don’t see a timeline make sure that it’s check in Window > Timeline. Once your clip is opened in the timeline you have a few options that can help with compression.

I’ll be using a GIF I recently posted to LinkedIn, declaring my job search after graduating from Flatiron School, as an example and show you the full process I go through.

Compression Methods

Trim Your Video

The first might not apply to your situation but I’ve seen many GIFs in tutorials that are a few seconds longer than they need to be, and a simple solution to cut down on the size of your GIF is to just shave some frames off of it. To do so simply drag the in and out handles to your desired start and end points.

Lower The Frame Rate

The next thing you can do in the timeline is optional, but I’ve used it a lot to cut GIF sizes almost in half, is to lower the frame rate by half. If your original video is 30fps per seconds,make it 15fps, if it’s 24fps make it 12fps etc. To do this, select the “Set Timeline Framerate” option after clicking on the dropdown menu icon in the top right corner of the Timeline window, and then set a new framerate. This will most likely effect any in and out points you have set so make sure to double check that.

The trade off with this option is that your video can look choppy if the motion is too fast, but for many applications like screen captures for software tutorials it can look perfectly fine. However in the next few steps we’ll look at some other options to compress GIFs that allow you to keep the original framerate.

Open With “Save For Web”

The next step in the process is to open your clip in the Save for Web module by navigating to File > Export > Save For Web (Legacy)

This process might take a minute or two as it processes your GIF with the default settings. Once it loads up you’ll have a window that looks like this.

The main window on the left shows you what your GIF will look like when exported, lets your zoom in and out, and compare it to the original. Most importantly this will show you the approximate size of your final file. In my case here my GIF will be 134.1 MB so looks like I’ve got some work to do to get it down to the 5MB limit for Medium.

Lower The Resolution

The first thing I’ll do is head down to “Image Size” and lower the resolution to 640 x 480. I’ve found this is a good mix between retaining quality and lowering filesize. I may have to lower it more in the end depending on the length of my GIF, but for now it’s a good baseline.

Adjust Color Values

Reducing the resolution got my GIF down to 17 MB but now let’s see where else we can save space. The next thing I’ll do is lower the “Colors” value to 128. Colors is exactly how it sounds, it is the number of unique color values that will be used in the GIF. For live action video I never go below 128, but for screen captures you can easily get down to 64 or even 32 and still retain quality. After lowering the color value, my GIF went down to 13.8 MB.

Try Different Color Reduction Options

The next thing I’ll usually try changing is the color reduction algorithm. You can select between Perceptual, Selective, Adaptive, and Restrictive. My method is to just choose each one and see how it looks and how it effects the quality of the GIF. In my case Perceptual was the right option.

After that I’ll select a dither option. Dithering admittedly will add to the size of the GIF but it really helps maintain some quality in the image. The Diffusion option at about 80% is as much as I’m willing to go in my case to retain some quality.

Fine Tuning

The next useful option is “Lossy” and can be helpful in some circumstances to shave a few MB, and I would never go above 10–15 % lossy, but in my case here I found it hurt the quality too much to be acceptable. Unfortunately though, my GIF is still at 13.8 MB so I need to go back to the option I mentioned before, and cut the frame rate in half to 12fps.

After that my GIF is now 7.31 MB, on a few more MB left! I could try and reduce the color values again, but I’m already pushing it with the quality so I think I’m going to lower the resolution slightly until I get to about 5MB.

After lowering the width to 500px the GIF is now under 5MB, and I’m able to push the dither amount up to 94% to gain a little quality back as well. Now I’ll make sure that the GIF will loop infinitely by choosing “Forever” from Looping Options and save the GIF by hitting “Save.” Make sure not to hit “Done” or the window will simply close out and you might lose the settings you just chose.