Animated GIFs

# Animated GIFs

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

---

# Agenda

1. [Overview](#overview)
1. [Inside the file format](#file-format)
1. [A pre-web history](#history)
1. [The good, the bad, and the ugly](#good-bad-ugly)
1. [Why make animated GIFs?](#why)
1. [Animating the pre-HTML5 web](#pre-html5)
1. [Animated GIFs today](#today)
1. [How to make an animated GIF](#how-to)
1. [Relevant links](#links)
1. [Examples](#examples)
1. [Conclusions](#conclusions)

---

# Overview

## What is a GIF?

**GIF** stands for **Graphics Interchange Format**.

- It was created by the internet company, [Compuserve](https://en.wikipedia.org/wiki/Compuserve), in the mid-80's, before the Web had been invented.

- GIF has a color-depth of 8 bits per pixel = 2<sup>8</sup> = 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"](https://web.archive.org/web/20100501010616/http://www.apple.com/hotnews/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](https://giphy.com/)** and **[Tenor](https://tenor.com/)** (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.
  1. Select 256 from the Colors menu.
  1. Select 'Forever' or another option from the Looping Options menu.
  1. Click Preview to make sure the GIF looks good.
  1. 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](https://www.photopea.com/)** 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](https://pixlr.com/e/)** is another full-featured, browser-based editor that can open and save GIF files.

- **[ezgif.com](https://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](https://www.popularmechanics.com/technology/a21457/the-gif-is-dead-long-live-the-gif/), published in Popular Mechanics.

- [Fresh from the Internet's Attic](http://www.nytimes.com/2013/02/14/fashion/common-on-early-internet-gif-files-make-comeback.html), published in New York Times.

- [Physical GIF Kickstarter project](http://www.kickstarter.com/projects/gregab/physical-gif), by by Greg Borenstein.

- GIF search engines: [Giphy.com](http://giphy.com/) and [Tenor.com](https://tenor.com/)

---

## Tutorials in Photoshop

- [CreativeTechs / Build Animated GIFS in Photoshop](http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/)

- [Switched.com / How to Make an Animated GIF from a YouTube Video](http://www.switched.com/2011/02/08/how-to-make-animated-gif-from-youtube-video/)

---

## Tutorials in Photoshop Elements

- [New York Times / Gadgetwise / Q&A: Animating Your Own GIF](http://gadgetwise.blogs.nytimes.com/2012/11/06/qa-animating-your-own-gif/)

- [Photoshop Elements / Optimizing images / create an animated GIF](http://help.adobe.com/en_US/photoshopelements/using/WS287f927bd30d4b1f-118f00f612e28b29a0a-7fff.html)

---

# Examples

## Some old-school examples

- [DeviantART Gallery](http://animated-gif.deviantart.com/gallery/)

- [Animated History of NYC Subway](http://very-appealing.com/misc/subwayhistory/)

- [etc.](https://duckduckgo.com/?q=animated+gif+art&iax=1&ia=images)

---

# 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.