Rise of the Planet of the GIFs

Rise of the Planet of the GIFs

5 min read

In the beginning of the internet there were no cute cat photos. No memes. Just big walls of text as far as your eyes can see. Sounds terrifying, doesn’t it?

In these early days images could be downloaded but not viewed on a page. Instead of viewing a nice organized gallery of images like you see on Pinterest or Instagram, you were forced to click to download each image you wanted to see. This was a limitation that made it difficult for people to browse and view images and blocked designers from using images as part of their web designs. Mark Andreesen wanted to overcome this hurdle, and in 1993 made a post to a discussion group1 recommending the creation of an <img> element. This new element would allow images to be displayed inline without a separate click. This element gained traction and was implemented into web browsers with two main file types supported: Bitmaps and GIFs.

Bitmaps are larger, uncompressed images that are higher quality, at the cost of being slower to download. The GIF is an alternative which allows the image to be compressed, reducing it’s quality to allow it to load faster. An additional capability of the GIF was the ability to include multiple images in the same file in sequence. Each image would be shown one after another (After a defined delay) which creates a fluid animation that can run for a certain number of loops or indefinitely. Some of the more notorious animations include rotating globes, skulls on fire, and everyones favorite, the “under construction” man:

These simple animations added a certain charm to websites and were common across free AOL and Geocities sites. The lack of easy to use tools for creating GIFs meant that most were limited in quality and there weren’t that many to choose from. Even if you had the skills and tools to create high quality animated GIFs, they had to remain small in size to allow them to be loaded in a reasonable amount of time. Despite having the capability to be compressed, each frame of animation makes the GIF exponentially larger.

As designers started to adopt the design trends of Web 2.0 in the late 90’s and early 2000’s, GIFs fell out of style. Many perceived them as a relic of the early days of the web. The Flash platform rose in popularity, providing much higher quality animations and built-in interactivity. It not only filled the gap where GIFs were once king, it provided features and functionality that were extremely beyond what was possible with a single image. The GIF had lost it’s place in mainstream design.

Return to the Planet of the GIFs

Over time web browsers started evolving, adding new features that were once only possible with plugins such as Flash, Realplayer, or Quicktime. Flash was being used in innovative ways, but also frustrated many people due to it’s use in advertisements, constant updating, and excessive load times2. Developers and designers started to have a much clearer idea as to what they wanted and needed websites to do. The closed nature of Flash and Apple’s anti-plugin stance on the iPhone forced designers and developers to start looking for and creating Flash alternatives to ensure they were supporting the modern web.

As our internet speeds increased the amount of content available expanded at a rapid rate. Youtube became juggernaut in the content space, highlighting the benefits of moving visuals in capturing people’s attention. Around the same time sites such as Facebook and Twitter emerged and began delivering us small bites of information at a rapid pace. Over time, broadband internet became more widely available removing the roadblock of dialup speeds for accessing websites. This was a perfect storm that a seemingly outdated image format to rise from it’s grave.

Even while it was out of fashion, animated GIFs continued to be supported across a wide range of platforms and devices, including mobile browsers and email. It was taking time for Flash replacements to provide wide support, while the GIF was easily supported most everywhere. Over the years the tools at our disposal were greatly improved making it easier than ever for designers to create animated GIFs.

With the re-popularization of GIFs, new techniques and clever usages started to appear.People on sites such as Tumblr and Twitter started creating GIFs of their favorite TV shows and movies and started posting them. Reaction GIFs caught on, letting people express with a single image their current mood or feelings. People started creating pseudo-3D animations with simple editing tricks. GIFs became a new form of self-expression online that resonated with people within social channels. It became popular enough that the Oxford English Dictionary made “GIF” it’s word of the year in 2012.

Beyond the Planet of the GIFs

With the popularity global acceptance GIFs are a great tool to have in your digital marketing. It is most applicable on your social media channels and emails and can enhance these tactics in the following ways:

Draw attention to specific information

Showcase a number of products in a small area

Add ambiance to an otherwise static page

Catch a person’s attention

Like any content, it’s important to use it in a way that makes sense to the person viewing it. GIFs that are irritating3 or have little value will diminish the quality of your tactics, so use them wisely. Think about how animated GIFs can be used in a way that will enhance the story you’re trying to tell.

The following are few examples of great usages of animated GIFs in marketing. Take some inspiration from what they have done and think about how you can apply it to your next project.

I love the tone of this message, obviously having an approach in mind but open to suggestions. ↩

In Flash’s defense, it was often the fault of the designers developers not truly considering the user experience and instead wanting to make something that was cool or flashy. ↩

Irritating GIFs usually include one of the following: rapid colorful flashing (Also known as strobing), animations that stutter due to lack of frames, extremely large file size, or animations that rotate too quickly. ↩