TehnoBlog

Animated GIF Ultimate Guide

How to optimize .GIF file size? We will compare several techniques how to generate Animated GIF files (please note that our tutorial how to create GIF files using Photoshop is covered in a separate article) and discuss the results: Animated GIF quality, end result file size and easiness of the task itself. We already know the best way and have the winner, read more to find out yourself…

ANIMATED GIF FORMAT: WHAT IS SO GREAT ABOUT GIF?

Animated GIF is still a very popular image format, despite the video era, mp4 and YouTube explosion, animated GIFs are still the fastest, easiest and best methods for posting educational and funny animations on social networks and forums. No need for any external plugin like Adobe Flash, special HTML5 browser or hardware and they work on pretty much any device these days, even those before the smartphone era.

Today, there are many online services for converting video formats (AVI/MPEG/MJPEG/MP4/MKV…) into animated GIFs with few easy steps: upload, convert, download. Done! Just do a Google Search for: video to GIF, AVI 2 GIF converter, GIF optimizer etc. and you’ll see for yourself.

But, wait, is this the whole story here? What are the differences between online web services and custom-built applications created to run under your Windows, Mac, Linux, iOS or Android device? And is there an ultimate approach/solution that will result in both lowest possible size and highest possible quality?

BEST ONLINE VIDEO TO GIF & GIF OPTIMIZATION TOOLS

We have tested several web-based services which allows you to optimize existing GIF files and convert AVI into GIF. Following online services are the currently best in our opinion and selected upon 2 criterions: no email field requirement (personal data collection) and at least 50 MB video upload size allowed. There are many other services available, but they either require valid email for file reception, or upload limits are well below 15 MB in size at the time of this writing.

(TOP services listed first)

• compressor.io | for GIF size optimization
• ezgif.com | GIF size optimization & video to GIF conversion
• zamzar.com | video to GIF conversion
• files-conversion.com | video to GIF conversion
• image.online-convert.com/convert-to-gif | video to GIF conversion

REVIEW OF OFFLINE GIF APPLICATIONS FOR WINDOWS

There are thousand applications for GIF manipulation and generation, from free/open-source apps, to commercial solutions of various quality. We will focus on Windows applications, since they are the most common one.

1. VIRTUALDUB – ANIMATED GIF WINNER

VirtualDub – yes, you better believe it! VirtualDub is open-source video editing tool that still has many advantages over full-blown video editors, not to mention cosmetic-video apps of many sorts with very little functionality.

You’ve found your favorite movie bit or part from a birthday party and wish to convert it into a meme clip? VirtualDub can help you! Yes, in the era of apps for everything, this might seem like an ancient over-the-top too complicated solution nobody remembers anymore how it used to work, but if you wish to have a complete manual control and achieve great quality along the way, this is how you do it.

However, it is definitely not for everyone out there, it has some learning curve, but for our needs you actually need only few clicks! VirtualDub is our No#1 choice for converting videos into Animated GIFs! Why? First of all, it creates the SMALLEST FILE SIZE out there. Period. No comparison against online tools are possible, it beats our favorite compressor.io online tool with over 5 times smaller GIF file!

Not to mention, more fidelity in colors, for example, red color was shifted to a dark red variant with compressor.io result, where it was faitful to the original with VirtualDub! No compromise. What’s missing? Well, nothing actually. VirtualDub can be used to open and edit existing GIFs as well. Although, not in the traditional image-stripe way, but more of a video-slider way. But it is possible, really, to do almost anything just using Vdub and nothing else (besides internal Vdub plugins and filters).

STEP-BY-STEP VirtualDub GIF Tutorial

1. Open your video file (must be in .avi format or avi-like container, image sequence of .bmp, .jpg or .png files (named with sequential numbers in file name e.g. image001.png, image002.png…) , or use different VirtualDub mods or import filters to import mpeg, mp4, wmv and other file formats, our favorite filter is DirectShow Input Driver, or with recent mp4/h264/aac codecs and smart phones VirtualDub FilterMod (now re-branded as VirtualDub2) + FFMPEG input driver, but before you click to open media file in Vdub you must select different input driver from the drop-down list in the Open Video File dialog). So, if Vdub doesn’t recognize your video and cannot open it right away, it doesn’t mean game over! You just have to try different Vdub edition and change input method and try again, something will eventually [usually] work!
2. Use video slider below the preview panels to seek to the desired start frame, then go to:
   

   Edit menu > Set selection start

3. Again, use position slider to seek to the desired end frame, then go to:
   

   Edit menu > Set selection end

4. Finally, go to:
   

   Edit menu > Crop to selection

   VirtualDub actually allows you to make complex selections, so you can cut/crop your video file with particular scenes only (e.g. segments in the beginning, middle and end of the video file), but that is beyond the scope of this tutorial. Essentially, you can achieve this by making gradual selections with start/end commands, and then use Delete command to delete them, instead of usual crop tool.

5. Once we have a cropped section of our video, we are ready to export it to .gif format (illustrated in above screenshots) – go to:
   

   File menu > Export > Animated GIF

6. Select appropriate/desired looping method (once / infinite / custom loop count), set output filename and location path and click OK.
7. WAIT & DONE!

 

2. GIFApp

GIFApp is the most promising and easy to use, with solid amount of effects, final image size / dimension option and individual frame duration.

What is missing? You cannot import existing GIFs for additional editing, only static images (JPEG, PNG) for sequence generation. And no video import support. Oh, and very large GIF file sizes, that needs to be optimized either with online tools afterwards, or with VirtualDub (our recommendation).

3. PhotoScape

PhotoScape is open-source, promising app at version 3+ at the moment of this writing, but it still needs to work on stability. It had issues loading GIFs of 5+ MB in size getting our application frozen. It is solid app, with many effects, but if it grows this could become one of the go-to tools for simple image manipulations, including GIFs. For the time being, we are not impressed yet.

4. Microsoft GIF Tool

This is an older 16-bit app, simple if it still works under your computer. Works pretty much like all the standard static images to animated GIF sequencers out there.

5. GIF Animator

This is a commercial tool, very solid app with many options. You can edit/modify existing GIFs as well generate new ones from static images and videos! However, it failed at one important point: GIF Animator’s “optimized” GIFs were in fact larger than imported GIFs! Ouch! Great for creating and editing existing GIFs, but not so shiny when it comes to ultimate small GIF file size optimizations.

6. Adobe ImageReady & Adobe Photoshop

ImageReady is mentioned here only for historical purposes, it was a great tool for creating animated GIFs from static images, although the process was pretty manual. Now this functionality is integrated into Adobe Photoshop, however, you cannot import GIFs and edit them as a single file. It is a one-way street, more or less, so not really into competition here. ImageReady/Photoshop have the same size optimizations technique built-in as VirtualDub does.

 

ANIMATED GIF QUALITY BENCHMARK AND FILE SIZE COMPARISONS

For this test we have hand-picked only the best Animated GIF tools from above lists (both online services and offline Windows apps) and compared the end result.

#	Application / Service	Animated GIF File Size [MB]	Animated GIF Quality [Subjective]
1	VirtualDub	0.333 MB	Excellent (lowest color fidelity loss)
2	ezgif.com	1.76 MB	Good (considerable red color shift / loss of color fidelity)
3	compressor.io	1.83 MB	Good (considerable red color shift / loss of color fidelity)
4	GifApp	4.31 MB	Excellent (poor compression / large size)

There are several important parameters that directly affect output GIF file size: frame size, color bit depth (palette size) and different frame / block compression algorithms used. In many tested applications, we can control all or most of the output file parameters, such as frame size (in pixels) and frame rate, number of colors and noise shaping / dithering, but this is not always the case.

For example, color palette size parameter is internally managed in some apps (cannot be changed manually), so we have to rely on the internal setting. This alone can create unfair / non-scientific conditions for our benchmark, but in the end, this is not so important – because end user only wants [best] results, without getting too technical about the underlying tech.

Frame rate does not directly affect output file size per se, however, some apps/algorithms merge two or more consecutive identical frames and prolong their duration dynamically in order to achieve better compression ratio.

VIRTUALDUB SECRET: HOW VDUB CREATES SMALL ANIMATED GIF FILES?

In order to crack VirtualDub’s secret how it manages to create considerably smaller file sizes with no apparent loss of quality and beat every online GIF optimization tool we’ve tested so far, we need to perform a deep analysis of the generated files. And also take some insights into GIF format standard.

Decomposing generated GIF frames reveals that VirtualDub is saving GIF files into frames, where each frame (except the initial one) stores only the difference between the previous and the current one. So, if an object moves from position 0 to position 1, what will be stored is only the thin line of 1-pixel dimension (being it a width or height, or both) instead of entire frame. Rest of the frame will be filled with base color which was set in the first original frame (or file header).

Let’s take a look at our example:

a) VirtualDub Animated GIF output: decomposed frames

b) compressor.io Animated GIF output: decomposed frames

First, note that compressor.io is doing some optimization with frames which are exaclty the same – merging them into one single frame. This is why you see different frame numbers between the above examples. Frame numbers, thus, cannot be directly compared!

Second, you see that VirtualDub version only stores the difference between each successive frame, while the more common GIF version stores entire information in each frame.

Both methods have drawbacks and advantages: if you lose the original frame from the first GIF file, you will end-up with a complete garbage. While, the second GIF file can be at least played from the healthy part onward. This is in relation to MPEG compression standard and how Intra (I), Prediction (P) and Bi-directional (B) frames work. Similar principle applies here to GIF standard. Obvious advantage of saving only the difference between each frame is considerably reduced file size.

CONCLUSION

When it comes to GIF size optimization Compressor.io was our best online choice, both for easy-of-use and website overall design — from all other online tools tested , however, it was beaten by VirtualDub with > 5x smaller file size with no noticable loss in quality.

If you need a really simple, effective and completely free app for Animated GIF creation and manipulation – VirtualDub is definitely your best choice (beside Photoshop, of course)!