Creative agency glossaryWeb, UX/UI, and Design

Graphics Interchange Format (GIF)

A GIF (Graphics Interchange Format) is an image file format that supports simple animation and transparency, which made it the web's default for short looping clips.

What is a Graphics Interchange Format (GIF)?

The GIF dates from 1987 and has outlived almost every format of its era. It stores an image with a palette of up to 256 colors, compressed without loss, and it can hold a sequence of frames that play in order and loop forever. Those two features, the loop and the near-universal support, are why it became the language of reaction clips, product teasers and tiny animations in messages and emails.

Technically it is a poor format for most of what it is used for. 256 colors cannot hold a photograph or a film frame without banding, and an animated GIF of a few seconds can weigh more than an MP4 of the same clip at ten times the quality. It survives because it behaves like an image: it autoplays anywhere, needs no player, loops without being asked and drops into an email, a chat or a slide without a second thought.

Why it matters

Why a GIF matters

The GIF matters as a behavior more than as a file. The short, silent, endless loop is now a native unit of attention: a few seconds of motion that reads at a glance, repeats until you look away and asks nothing of the sound. For a brand it is the lightest form of motion there is, the way a product turn, a logo reveal or a reaction from a shoot travels in a thread, a text or a reply. It is also how a film finds a second life, since the single best two seconds of a thirty-second spot, looped, can travel further than the spot.

In practice

How a GIF works in practice

  1. 01

    Making a good one is editing. Choose the moment: one action, one loop, a start and an end that meet so the repeat is invisible. Trim hard; three seconds is long. Crop to the subject, because the file will be small on screen. Then export with care: a limited palette chosen from the clip, dithering set by eye, frame rate reduced to what the motion needs, and the file size checked against where it is going, since email and chat have limits.

  2. 02

    On the web itself, the honest answer is usually not to use a GIF at all. A short, muted, looping MP4 or WebM does the same job at a fraction of the weight and in full color, and every modern browser autoplays it. The GIF is the right file for the places video cannot go (email, some messaging apps, some CMS fields) and for the libraries people search when they want a reaction.

Watch out

What people get wrong about GIFs

Using a GIF on a web page because it is easy. A 15 MB GIF in a hero is the single most common thing we fix on a slow site, and it should have been a video. Second, exporting at full frame rate and full size, then wondering why the loop stutters in the chat window. Third, ignoring the loop point: a clip that jumps on every repeat looks broken, while one that cycles cleanly can run for an hour without anyone noticing it is three seconds long.

And the pronunciation argument was settled by the format's inventor, who said it with a soft g, which has convinced almost nobody. Say it however you like.

Questions

People also ask

Should I use a GIF or a video on my website?

Video, almost always. A muted, looping MP4 or WebM is smaller, sharper and plays automatically in every modern browser. Use a GIF only where video is not supported, such as in email.

How do I make a GIF smaller?

Shorten it, crop it, lower the frame rate, reduce the dimensions and limit the palette. Most of the weight is in frames and pixels you do not need; a three-second loop at 480 pixels wide and 15 frames per second is usually enough.

Can a GIF have sound?

No. The format holds only frames, which is part of why it travels so well: it plays silently anywhere, without a player. If the sound matters, it is a video.

Next to it in the glossary

  1. Faceted NavigationFaceted navigation is a filtering system that lets visitors narrow a large set of items, such as products or videos, by combining attributes like size, color, price or year.
  2. Front-End DevelopmentFront-end development is the building of the part of a website or app that runs in the browser: the layout, the typography, the motion and the interaction a visitor actually uses.
  3. Full StackFull stack describes a developer, or a team, able to build both the front end that visitors use and the back end that runs behind it.
  4. Grid LayoutA grid layout is the invisible structure of columns, rows and gutters that designers use to align content consistently across a page, a screen or a system.
  5. HeatmappingHeatmapping is the visualization of where visitors click, move, tap and scroll on a page, shown as warm and cool colors laid over the design.
  6. HierarchyHierarchy is the ordering of elements on a page by importance, so that a reader's eye and a search engine's crawler both understand what matters most.

Every Web, UX/UI, and Design term →

In the work

Where it shows up

All our creations →

From the journal

Read around it

The journal →

Talking the talk is one thing

We make the work.

RIOT is a creative agency and production studio in New York. Strategy, brand, film, photography, design and the campaigns that carry them, made by one team. A few lines is enough to start: we read every brief the same day.

    Footage