Animated GIFs (No Slides, Please)

This document has been autogenerated from slides.

a low-color, well-compressed image format that supports both still and animated images

Overview
Inside the file format
A pre-web history
The good, the bad, and the ugly
Why make animated GIFs?
Animating the pre-HTML5 web
Animated GIFs today
How to make an animated GIF
Relevant links
Examples
Conclusions

Overview

What is a GIF?

GIF stands for Graphics Interchange Format.

It was created by the internet company, Compuserve, in the mid-80’s, before the Web had been invented.
GIF has a color-depth of 8 bits per pixel = 2⁸ = 256 possible colors.
When GIF was created, most computers could display 256 colors at most.

Inside the file format

Indexed color

Rather than storing a full red-green-blue value for every pixel, a GIF stores a color palette (also called a color table) of up to 256 colors.

Each pixel then references a color in the palette by its index, a single number rather than three.
This indexed approach is a big reason GIF files are so small — there are at most 256 distinct values to store per image instead of millions.
Each frame of an animation can carry its own local color table, or share a single global color table for the whole file.

LZW compression

GIF files are compressed using the LZW (Lempel-Ziv-Welch) algorithm.

LZW is a lossless compression scheme — unlike JPEG, no image data is thrown away, so the decompressed image is pixel-for-pixel identical to the original.
LZW works especially well on images with large areas of flat, repeated color, such as logos, line art, and simple graphics.
It was patents on LZW, held by Unisys and Compuserve, that made the format legally fraught until those patents expired in 2003–2004.

Transparency

GIF supports 1-bit transparency — each pixel is either fully opaque or fully transparent, with no in-between.

One entry in the color palette is designated as the “transparent” color.
This is why GIFs with soft, anti-aliased edges often show an ugly fringe or “halo” when placed over a colored background — there are no partially-transparent pixels to blend the edge.
The later PNG format added 8-bit alpha transparency, allowing 256 levels of opacity per pixel and smooth edges.

Dithering

Because only 256 colors are available, photographic images must be approximated.

Dithering arranges pixels of the available palette colors in patterns that, viewed from a distance, trick the eye into perceiving colors and gradients that are not actually in the palette.
It trades smooth gradients for a slightly speckled texture, and can increase file size because it disrupts the flat areas that LZW compresses well.

Animation and looping

An animated GIF is simply a single file containing multiple frames, each with its own image data and a delay time.

A control setting tells the viewer how to dispose of each frame before drawing the next — for example, whether to keep it or restore the background.
A loop count stored in the file (a Netscape-era extension) tells the browser how many times to repeat the animation, including “forever”.
GIF has no sound and no concept of a timeline beyond this simple sequence of frames.

A pre-web history

Born on CompuServe

GIF was introduced by CompuServe in 1987 (the “GIF87a” specification), years before Tim Berners-Lee invented the World Wide Web in 1989–91.

CompuServe was a commercial online service — users dialed in over telephone modems to access forums, chat, news, and file libraries, long before the public Internet.
GIF was designed as a device-independent format so that images could be exchanged between the many different computers of the day — Apple II, Commodore, IBM PC, Atari — each with its own display hardware.

The world of bulletin boards

In the 1980s and early 90s, images circulated across BBSes (Bulletin Board Systems) and online services like CompuServe, AOL, and Prodigy.

Connections were painfully slow — often 1200, 2400, or 9600 bits per second — so small file size was not a luxury but a necessity.
GIF’s tiny file sizes made it the natural choice for trading pictures over these dial-up links, and it became the de facto standard image format of the pre-web online world.

The GIF89a revision

In 1989, CompuServe released the GIF89a revision of the format.

GIF89a added transparency, interlacing (so an image could appear gradually, low-resolution first), and crucially, support for multiple frames and timing — the foundation of the animated GIF.
When the graphical web browser Mosaic arrived in 1993 with built-in support for inline GIF and JPEG images, GIF carried straight over from the online services into the early Web.
Animated GIFs became an icon of the 1990s “under construction” web, then faded, and have since enjoyed a major revival.

The good, the bad, and the ugly

The good

It supports both still images and animated images.
A low color depth and a good compression algorithm mean small file size.
Small file size means fast download.
Fast download means it is a good format for slow internet connections and slow mobile devices.

The bad

256 is a small number of colors by today’s standards… today’s computer displays can show millions of different colors.
Although the web browsers don’t support animated PNGs yet, they probably will in the future. PNGs allow for more colors.

The ugly

GIFs do not look good when used for photorealistic images, because of limited color-depth.
GIFs depend upon what was originally patented compression technology. They are therefore considered “free” (as in freedom). However, that patent expired in 2004, so anyone is free to use it today.

Why make animated GIFs?

They used to be the only way to add animation to your web page.
They can be displayed by most email clients, other forms of animated imagery usually cannot.
They can be fun.
They are considered trendy in design school circles.

Animating the pre-HTML5 web

Before HTML5, the web had no built-in way to play video or rich animation. There was no <video> element and no <audio> element — the early HTML standards simply had no tag for moving pictures.

To put motion on a page, designers reached for whatever technology they could — and for years that meant a patchwork of competing, often proprietary, approaches.

The contenders

Animated GIFs — the simplest option, supported by every browser with no plug-in, but limited to 256 colors, no sound, and large file sizes for long clips.
Adobe (formerly Macromedia) Flash — by far the dominant approach, a browser plug-in that played .swf files containing vector animation, video, sound, and interactivity. From the late 1990s through the 2000s, Flash powered everything from banner ads to entire websites, games, and YouTube’s original video player.
Java applets — small Java programs embedded in a page via the <applet> tag and run by a plug-in; powerful but heavy and slow to load.
Microsoft Silverlight — a later Flash competitor from Microsoft, also a plug-in, never as widely adopted.

The trouble with plug-ins

These plug-in technologies all shared the same fundamental weaknesses.

They were proprietary — controlled by a single company, not by an open web standard.
They had to be downloaded and installed separately, and constantly updated.
They were a notorious source of security holes, crashes, and battery drain.
Their content was invisible to search engines and inaccessible to assistive technology — a Flash site was essentially an opaque box.

The iPhone changes everything

When Apple launched the iPhone in 2007, its mobile Safari browser supported the emerging HTML5 standard — including, soon after, the new <video> element — but it never supported Flash.

In 2010, Steve Jobs published an open letter, “Thoughts on Flash”, arguing that Flash was unreliable, insecure, a battery hog, and unfit for the touch-based mobile era.
Suddenly the world’s most influential device could not view the millions of Flash sites and videos that defined the desktop web. To reach iPhone users, sites had to switch to open standards.

HTML5 wins

The <video> and <audio> elements let browsers play media natively, with no plug-in at all.

Combined with CSS animations/transitions and JavaScript (including the <canvas> element), the open web could finally do everything Flash had done — animation, video, games, interactivity — with no proprietary software.
YouTube and other video sites moved from Flash to the HTML5 <video> player.
Adobe stopped developing Flash for mobile in 2011, and Flash reached its official end-of-life on December 31, 2020, when browsers removed support entirely.
This shift is a big part of why the humble, plug-in-free animated GIF endured — and was perfectly placed for its revival.

Animated GIFs today

The reaction GIF

Far from dying out, the animated GIF has become a core part of how people communicate in messaging and social apps.

The short, looping, soundless GIF is perfect for a quick reaction — a laugh, an eye-roll, a celebration — dropped into a conversation.
A whole visual vocabulary of reaction GIFs, often clipped from movies, TV, and sports, now circulates as a kind of internet body language.

Built into the messengers

Most major messaging platforms now include a GIF picker built right into the app.

iMessage, WhatsApp, Facebook Messenger, Slack, Discord, Microsoft Teams, and X/Twitter all let you search for and send GIFs without leaving the conversation.
These pickers are usually powered by GIF search engines like GIPHY and Tenor (Tenor is now owned by Google), which host enormous searchable libraries.

A technical footnote

Ironically, many “GIFs” you send in modern apps are no longer GIF files at all.

To save bandwidth, platforms often deliver these short loops as MP4 or WebM video, which compresses far better and supports millions of colors.
The word “GIF” has come to describe a format of expression — a short, silent, auto-looping clip — more than the specific file format underneath.

How to make an animated GIF

Manually

Make a Photoshop document with a single layer representing each frame of the animation.
Open the Animation panel by going to Window -> Animation.
Click the ‘Add new frame’ button to create as many frames as you have layers.
For each frame, make any visual changes to what is displayed using standard Photoshop tools and techniques.
Set the duration of each frame.

Automatically creating frames from layers

Create a Photoshop document with multiple layers.
In the Animation panel menu, click ‘Make Frames From Layers’.
This creates one frame for each layer, where only one layer is visible in each frame.
Customize each frame as manually above.

Adding a tween

A tween is an automatic transition between two frames. You can tween a layer’s position, opacity, and effects.

With the Animation panel open, create a frame that represents the start of the tween.
Duplicate the first frame to create a second frame that represents the end of the tween.
With the second frame selected, in the Animation panel menu, select Tween.
In the settings, enter how many new frames you’d like to create as key frames between these two.
- More frames creates a smoother animation.
- The maximum number of frames per second depends upon the limitations of the software used to display the image.

Reverse the order of frames

Select frames you want to reverse, and click ‘Reverse Frames’ in the Animation panel menu.

Convert video to animated GIF

In Photoshop, select File -> Import -> Video Frames To Layers.
Select your new animated GIF/QuickTime movie and configure how you want to import it in the Import Video To Layers dialog box.
That’s it. You should now have all the frames on separate layers and as frames in the animation palette.

Save as GIF

Photoshop allows you to export files with compression using their Export As options.

File > Export > Save for Web (Legacy)…
1. Select ‘GIF 128 Dithered’ from the Preset menu.
2. Select 256 from the Colors menu.
3. Select ‘Forever’ or another option from the Looping Options menu.
4. Click Preview to make sure the GIF looks good.
5. Click Save… select a destination for your animated GIF file.

No Photoshop? No problem

You do not need to own Photoshop to create animated GIFs — a number of free, browser-based image editors support the format.

Photopea is a free online editor that closely mirrors the Photoshop interface, including a Timeline/animation panel and GIF export, all running entirely in your web browser.
Pixlr E is another full-featured, browser-based editor that can open and save GIF files.
ezgif.com is a dedicated online tool for making and editing animated GIFs — assembling frames, resizing, optimizing, and converting to and from video.
Because these tools run in the browser, they work across operating systems with nothing to install.

Animated GIFs as a design trend

The GIF is Dead. Long Live the GIF, published in Popular Mechanics.
Fresh from the Internet’s Attic, published in New York Times.
Physical GIF Kickstarter project, by by Greg Borenstein.
GIF search engines: Giphy.com and Tenor.com

Tutorials in Photoshop

Tutorials in Photoshop Elements

Examples

Some old-school examples

Conclusions

We have now seen the strengths and weaknesses of the GIF format, and how animated GIFs can be created.

GIFs are a low-color, well-compressed format that work well for simple animations and slow connections, but poorly for photorealistic imagery.
Thank you. Bye.