In the early days of the internet, gifs were the standard image format. Today, you’ll find png and jpg as the dominant file types. Though they’re no longer the preferred format for web images, due to their lower quality, and lack of accessibility, gifs still persist. 

Let’s take a closer look. 

The birth of the gif file format 

In 1987, CompuServe was a major internet service provider. These were the days of dial-up, where data transmission rates were limited by what phone lines could handle. The internet was slow, but we didn’t know any better. 

CompuServe wanted to offer their customers the capabilities to download full-color photos, but at file sizes that would be small enough so that it wouldn’t take hours. 

Computer scientist Steve Wilhite led a team at CompuServe  in developing an image file format that would offer a full-color palette at more compressed file sizes.

As a result, they  developed the Graphics Interchange Format or gif, based on the LZW algorithm. The original iteration, otherwise known as gif87a,  offered 8 bits per pixel and 256 indexed colors. The first color image to appear on the web was of a pixelated airplane flying across an animated cloud background. It looks lofi by today’s standards, but at the time, it was a huge innovation. 

The fall of gifs 

Gifs were the standard web developers used for still images, until they fell out of favor in the mid 1990s. 

In 1994,  the patent holder of the LZW algorithm, Unisys, was no longer happy that their technology was being used for free. Unisys made the business decision to collect licensing fees from those using gifs in commercial software and applications — and people were not happy.

Computers and the internet were also getting better. When gifs were launched, their 24-bit RBG based colors were the norm  for the technology of the time. But with a narrow color palette of 256 colors, the lack of transparent backgrounds, and pixellated renderings of complex images like photos, gifs had their limitations. 

A new file format — the Portable Networks Graphic, or png — came into prominence. It  offered lossless compression and better color capabilities and had an open format, without any copyright holders to collect royalties. 

The gif resurgence

Though they’re no longer suited for high-resolution visuals, you’ll find gif images occupying a niche in web-based communication.

Those memes from the Office that have been your primary way of interacting with your colleagues? Those are gifs. Animated stickers, which are another form of expressing emotion on messaging and social media platforms are also gifs.

The rationale being — why type out a lengthy text when you can just send a short video clip that immediately communicates what you‘re feeling? Say it with a gif and you’ll be instantly understood.

How animated gifs work

Gifs are often created by taking video clips and compressing them into looped animations. Animated gifs are made of individual frames, much like old-school film. This conversion of an animation or video into a succession of synced frames ends up being five to ten times larger than an mp4 file. 

Though they can be a lot bigger, animated gifs can be utilized in modern websites in a number of ways including:

• Video file previews
• Screen recordings
• Animated backgrounds
• App workflow demonstrations
• Loading status animations
• Campy retro graphics

Gifs and accessibility

Though gifs are widely used, they’re not always user-friendly. Those with visual or other impairments may have problems when encountering animated gifs on their web browsers.

First is the issue of infinite looping. The general rule is that after five seconds, a clip should stop playing, or visitors should have the option to stop or pause it. Additionally, if an animated gif file has strobe-like or intense flickering this presents a huge risk for those with seizure disorders. It’s recommended that visuals not exceed flashing in excess of three times per second.

Nick Gard, Senior Software Engineer at Webflow, gave us these tips on using gifs when building on Webflow:

• Gifs should be hidden when users have prefers-reduced-motion enabled in their settings. For those users, swap it with a still image from the gif itself. 
• Always include alt-text — especially when there’s text on the actual gif. This helps those using screen readers can understand what the images represent or are conveying. This will also help out with search engine optimization. 
• To handle all of this, you can use the <picture> element: 

<picture>
 <source
   srcset="moving.gif"
   media="(prefers-reduced-motion: no-preference)">
 <img
   src="still.jpg"
   alt="text that will be applied to whichever image is rendered" />
</picture>

Are gifs here to stay?

Though formats have come along like WebM,  MP4, and Theora, gif stands as one of the longest-running file types making animation possible on web pages, social media platforms, and messaging apps. It‘s surprising that a technological development introduced in 1987 is still being used — but here we are. 

There can be a time and a place for gifs, but it’s inaccessibility to large groups of people, along with its incredibly large and clunky format — makes it lower on our list when choosing a graphic or image. 

If you do choose to use gifs, it’s important to follow the general guidelines of stopping a gif after five seconds or giving users the option to pause, avoiding visuals that flash three times per second, and always adding alt text to your gifs to make them understandable for screen readers.