Upload a file
  1. base64hub
  2. Image tools
  3. GIF to Base64

GIF to Base64

Drop a GIF and copy it as Base64, a data:image/gif URI or an <img> tag. Animation survives as long as you leave the resize and convert options alone.

Free no sign-up, no limits Local nothing uploaded Updated Oct 27, 2026
Drop an image here, paste one, or pick it
Input –Output –Size –

Processed in your browser. This page cannot send your data anywhere – how we know

Also try:Base64 to GIFImage to Base64

How to convert a GIF to Base64

  1. Drop a .gif file on the box or pick it with the file picker.
  2. Leave Max width, Convert to and Strip metadata (EXIF) untouched if the GIF is animated.
  3. Choose Output as: Data URI, CSS background-image, HTML <img>, Markdown or plain Base64.
  4. Press Copy output. The meter shows how much larger the text is than the file.

The preview plays the animation, so you can check that it is the right file before you copy.

Animation and the re-encode options

The options above the output redraw the image on a canvas. A canvas holds one still picture, and browsers cannot write GIF files from it, so a re-encoded GIF comes out as a PNG (or JPEG or WebP if you pick one) of the first frame only. That is useful for a static thumbnail of an animation; to keep the animation, leave the options off.

For an animated GIF that is too big, the fix has to happen before this tool: reduce the frame count, the dimensions or the color palette in a GIF editor, or replace it with a short looping MP4 or WebM, which is usually far smaller than the same clip as a GIF.

What GIF Base64 looks like

BytesBase64Meaning
GIF89aR0lGODlhGIF89a: animation, transparency
GIF87aR0lGODdhGIF87a: the original 1987 format

The 1×1 transparent GIF below is 42 bytes, 56 characters of Base64:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

It used to fill table layouts and still shows up as a placeholder src for lazy-loaded images, because a valid image avoids a broken-image icon and an extra request.

Animated GIF size in Base64

GIF compression is weak by modern standards, and animated GIFs store every frame. A two-second reaction GIF can easily be a few megabytes, which turns into several megabytes of Base64 text. Inline only small GIFs, such as loading spinners or tiny icons. For anything larger, a normal file can be cached and loaded lazily, while a data URI is downloaded again with every page that contains it.

Email is a poor fit for Base64 GIFs. Gmail and other webmail clients do not show data URI images, so animated GIFs in newsletters are linked as hosted files instead. See Base64 in email.

Encode a GIF in Node.js

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

Base64 in Node.js covers streams and URL-safe output. To turn a Base64 string back into a playable file, use Base64 to GIF.

FAQ

Does an animated GIF stay animated in Base64?

Yes. Base64 copies the file byte for byte, so all frames and timing are kept. Only the resize, convert and strip-metadata options break it, because they redraw the first frame on a canvas and save it as a still image.

What is the smallest transparent GIF as a data URI?

A common one is data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7, a 42-byte 1×1 transparent GIF. It is still used as a spacer or an empty src placeholder.

Why does my GIF Base64 start with R0lGOD?

That is GIF8, the start of the GIF signature. R0lGODlh means GIF89a, the version that supports animation and transparency, and R0lGODdh means the older GIF87a.