Why Animated GIFs Suck

Apr 28, 2014 by Matt | Posted in General 126 Comments

Not only does the ever-popular animated GIF have an extremely limited color palette (256 colors), due to its roots in the 1980s, but its primitive compression is a colossal waste of bandwidth. A modern video format produces files a fraction of the size, and with far superior image quality.

Take this clip as an example:

WebM (94KB) & H.264 (141KB) Video

Animated GIF (1741KB)

The fancy HTML video loads in a fraction of the time, and plays more smoothly. Note that, in this example, there’s no quality difference because I converted an existing GIF into a video. (This is the same process GfyCat uses.)

This is a pretty big deal in a world with slow connection speeds and puny cellular data caps. Watching about a thousand GIFs the size of this one (which is fairly modest as far as GIF file sizes ago) would easily put you over a 2GB data cap.

If you’re interested in converting GIFs to a proper image format, I made a fun command-line tool called GIFnuke. You can run it on a file, or a URL, and it will use ffmpeg to produce a tiny WebM file automatically. (No MP4 version yet, you’ll have to do that manually if you need it.)

What You Need to Know About the Heartbleed Bug

Apr 14

If you haven’t already heard, a major exploit in OpenSSL was discovered recently. The Heartbleed Bug, which is as scary as it sounds, allows an attacker to capture potentially sensitive information from a server’s memory by exploiting a flaw in the implementation of the…

Automating Repetitive Text Editing with Vim Macros

Feb 5

Don’t you just hate it when you have to do some repetitive text editing, such as wrapping several lines of text in <li>...</li> tags or just about anything involving tables? (Actually, HTML is a veritable goldmine of repetition…) If you use vim, you can…

Ghost 0.4 Drops, Plugin API Slated for 0.5 Release

Jan 29

Version 0.4 of Ghost, the lightweight Node.js blogging platform, went live this month. Some of the more interesting features include support for static pages, a new way to quickly edit posts by appending /edit to the URL, support for date-based permalinks (e.g. /2014/01/25/example-post instead…

BlogBuzz January 25, 2014

Jan 25

Node.js the Right Way

Jan 8

Looking to quickly get started with Node.js without learning bad habits? Node.js the Right Way is a short and concise—100 pages—book that you can easily read in an afternoon (maybe two if you’re following along with the examples), promising a focused, tutorial-based experience. The…

Vim Tip: Sort Lines Alphabetically

Jan 1

Have a list that you need to alphabetize quickly? Vim has you covered. There’s a handy :sort command (:help sort for optional arguments) that will do just what it says on the box. All you have to do is select the lines in visual…

Illustrating Keyboard Shortcuts with the <kbd> Tag and a Bit of CSS

Dec 27

The HTML spec has long had a (much underutilized) tag called kbd, which is intended to be used for marking up user input. For example, you could write something like this: The browser (by default) renders the kbd tags in a monotype font, just…

Visualizing Directory Structures with the Tree Command

Dec 18

Sometimes good old ls just doesn’t cut it when you’re browsing directories from the command line. Sometimes you just need a more visual overview of the nested files and directories. Well, it turns out there’s a useful command for those cases, and it’s available…

List.js: Table and List Sorting in 5kb of JavaScript

Dec 11

List.js is a tiny (five kilobytes!) library that can add dynamic sorting, searching and pagination to HTML lists and tables. It requires no dependencies, and claims to be able to handle lists with “thousands of items.” It also includes a templating system that makes…