Animated GIFs: From Gimmick to Gestalt

This article is based on a talk I gave at on of out Teaching Tip Live sessions at work. I am thankful to have had the opportunity to share with others something that I’ve been rolling around in my mind for quite some time. A lot has happened with GIFs over the past 20+ years they’ve been around, and the creative work people are doing with the format now is something that has been catching my attention in recent years. GIFs have enjoyed such long-lived durability for a number of reasons. They play natively in all browsers, they speak a short form visual language that embraces popular culture and can be rapidly absorbed, and finally, they are not difficult to create. Despite its age, I think it is a media format with potential that is still largely untapped.

Before talking about GIFs I’d like to set some historical groundwork to set the stage of early animation. The modern zoetrope (above) was invented around 1833 but wasn’t very popular until the 1860s. It was (and still is) a form of entertainment, exploiting our persistence of vision, the blending together of still images in rapid succession to give the illusion of movement. Strips of painted paper were placed inside a drum with narrow windows cut into the side. The viewer spins the drum and looks inside at the painted frames to see the illusion of movement. The word   comes from the Greek, “zoe” meaning life, and “troops” meaning turn – in essence it is a wheel of life.

Fast forward   to 1872 where we encounter Eadweard Muybridge, a British photographer and one of the first people to study motion capture. He pioneered photographic studies in motion and motion picture projection. In 1872 he was hired by the then governor of California,  Leland Stanford, to settle a bet he had made with a friend. Both were fans of horse racing, and the governor even had his own horses. He and his friend could not agree whether or not a horse’s feet were ever off the ground entirely for a moment while the horse was galloping. Stanford thought there was indeed a moment that the horse is essentially airborne. Mouybridge devised a way to photograph a galloping racehorse to settle the bet for the Governor. 1878 he began more in-depth studies of both animal and human locomotion.

Jump ahead almost one hundred years to 1987 where we encounter Steve Wilhite. He was employed by Compuserve where he created the released the GIF (Graphics Interchange Format) image format, which was the first color image format. GIFs can display 256 unique colors and have the ability to support multiple image frames within the same file. It should be noted that he is very clear that the work “GIF” is to be pronounced “JIF”, like the peanut butter. Personally, I choose to ignore this.

The 1990s were filled with animations of dancing babies, bananas, and cliche under construction signs. Around this time we also started noticing the disembodies heads of chuckling smiley faces silently invading our inboxes, tucked within the signatures of emails. The early GIFs were silly, and even a little trashy and by the end of the decade they had firmly embedded themselves as part of popular culture. This was made official in 2000 by the Simpsons episode “The Computer Wore Menace Shoes,” where Homer creates his first web page decorated entirely with animated GIFs. At their height, the old school GIFs had become cliche and annoying.

Over the years the Web 1.0 GIF seemed to fall out of vogue, that is until recently. PBS has produced a short documentary (in the true spirit of the GIF) as part of their  Off Book  series. It recounts some of the historical baggage of the GIF and how people are using the format today. They note that as the curtain of Web 1.0 was drawing to a close , animated GIFs were just as rapidly becoming passé. But something happened. The social platforms of Web 2.0 began making the acts of creating, sharing, and discussing easier than it had ever been before on the Web. Sites like Reddit and Tumblr began greasing the wheels for the return of the GIF, only this time they were smarter and more diverse than they had ever been.

Today
Follow the timeline up to today and you will find that the animated GIF is enjoying a refined renaissance as remixers, artists, journalists and even learners push the GIF format far beyond its conventional boundaries.  Not only are there more places to put these moving pictures, there are a plethora of methods and tools to create them.

GIFs have made so much of a comeback that in 2012 the word “GIF” was made an official word. The US wing of Oxford University Press voted it their word of the year, noting that it had become, “a tool with serious applications including research and journalism.” This re-invigoration of the medium has yielded amazing examples its application.

Remixers
It isn’t hard to see why  GIFs are so popular. The format has a low barrier for participation. Making them is fairly easy and there are many free tools available to do so. I find it fascinating how quickly and effectively they can embody the language of pop culture and engage viewers. Because of this we see a large number of people remixing each others work from all over the Web. Do you remember Muybridge’s animal locomotion studies? In 2006 someone transformed them into animated GIFs – but that wasn’t the end. Someone else remixed that idea:

There are plenty of other remix examples I can post here, but instead, I will list my favorites below and give you the opportunity to visit the creators’ websites to enjoy their entire body of works.

• Kevin Weir’s historical mashups remix the culture of the internet with some very early photography:  https://fluxmachine.tumblr.com/
• ScorpoinDagger remixes old paintings, many from the early Renaissance, with pop culture to create quite witty animated collages: https://scorpiondagger.tumblr.com
• The GIF Connoisseur remixes the work of other GIF remixers by placing the gentleman from Norman Rockwell’s painting “The Connoisseur” in front of the works.

Artists
Transitions, eternal looping, and subtle animated details emerge as a new tools for artists. They are capturing moments in time and selecting particular aspects of those moments to continue forever in the loop, while the rest of the image is frozen eternally. This makes for some visually compelling work.

• Cinemaphs were created by photographers Kevin Burg and Jamie Beck as a way to manipulate the timeline of a still image as described above. My favorite of these is the image of a young girl in a white dress standing in front of a window. She is young, beautiful and innocent. She will forever remain this way in the image. The only aspect of the composition that is allowed to progress eternally is the breeze coming through the window that blows through her hair.
• Lockie, the creative mind behind GIFs on the Tumblr site TotesYourMate uses a very similar technique, but he experiments more with the manipulation of time, only allowing it to exist in a particular part of a photograph.
• Animated Dribbble shots from the Guifff Tumblr feature designers who are animating icons and illustrations in much more tasteful ways than the first-generation GIFs ever did.
• Robin Davey’s work is another great example of animated illustration.
• Boulet is a comic artist and he created an absolutely gorgeous story of his childhood using animated GIFs

Journalists
It turns out that GIFs are perfect for quickly illustrating sequential processes and summing up concepts in a visually succinct way. Since all browsers display GIFs natively no additional media plugins are required to view them making them very low overhead not only for viewing but also for understanding.

• The NPR Planet Money article, “How a Used Bottle Becomes a New Bottle, in 6 Gifs,” relies heavily on moving images to provide additional context for the details of an article on the process of recycling.
• This example isn’t formal journalism as much as it is marketing, but I’m mentioning it because it was so effective in catching my eye. As I scanned over the details of the Kickstarter Polar Pen project I wasn’t willing to commit time to watching their pitch video because it was too long at the time. As I continued scrolling down the page I noticed their Magnetic Pen Demo, a GIF that features three additional uses for this pen all in the same looping image. Instantly I understood the versatility and multiple applications for this pen. In fact, I got so excited that I went back and watched their video.

Instruction
GIFs are well suited for illustrating sequential processes. Many explanations we may want to share with others do not require all the time involved in shooting a video or creating a screencast. Sometimes these explanations can be most effectively conveyed in just a handful of frames, free of audio narration, excessive bandwidth usage, and extraneous media players.

• How ice cream sandwiches are made. No additional explanation is required to understand this automated process.
• Gary Kaiser’s Science GIFs aren’t the most beautiful animations, but they clearly illustrate a wide array of biological processes at the molecular level.
• This tutorial on creating animated GIFs prefaces the detailed instructions and summarizes the process with an animated GIF. Not sure if this is that tutorial for you? Not sure you want to commit to reading the full page? No problem, just watch the brief animation right a the top of the page.
• As proof that animated GIFs are not difficult to create, I submit to you the student work in ds106. These students create their own work with the aid of a handful of tutorials available on the site, and minimal intervention of the instructors. In the process they learn to manipulate images and video with either paid or free software. They also must consider the message they want to convey and distill it down to a few seconds before optimizing the final product for the web. It is a comprehensive activity that touches on multiple digital literacy skills.

Instruction is one of the areas I want to see animated GIFs used more. As I mentioned before, not every visual explanation requires the overhead of streaming video. In fact, in cases where embedding streaming video is often flaky, such as our WordPress Multi-user installation which supports a number of our courses, GIFs may help alleviate some such problems. I realize it certainly isn’t a cure-all solution, but one that is worth considering in some cases.

GIFs are a form of media that is able to inhabit an ambiguous space that is neither photo nor video,   yet has characteristics of both. It is a sort of short-form visual communication of sorts that allows a moment to exist just barely beyond the snap of a camera shutter in the case of a photograph in the case of some. Other GIFs are frank, illustrative moments that loop to indefinitely convey the essence of an idea. Their versatility has kept the format relevant for over twenty years on the Web, and few other technologies can claim that distinction. I look forward to seeing how people to continue to evolve their use of GIFs.

TOOLS & TUTORIALS

Interested in creating your own animated GIFs? Below I’ve linked some of the better tutorials I’ve come across.

• Online tool: makeagif.com
• Online Tool: GifMaker
• Mobile app: Cinemagram
• Mobile app: 3frames
• Mobile app: Kinotopic
• Mobile app: Motionoto
• Tutorial: Using Fireworks frames
• Tutorial: Using Photoshop frames
• Tutorial: Using Photosop keyframes
• Tutorial: Greating GIFs with Photoshop Elements
• Tutorial: Turn videos to GIFs with Avidemux and Gimp
• Tutorial: Creating Cinemagraphs with Photoshop
• A Pinterest board linking to these tutorials