How I Compress GIFs for Medium — Part 2

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.

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.

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.

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)

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.

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.

The Final Product

And here’s the final GIF nicely compressed for Medium.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arthur Wilton

Arthur Wilton

Software Developer and Video/Post Production Professional. Recent graduate of Flatiron School.