GIF to Base64 converter

Drop in a GIF and copy it as a Base64 data URI, raw Base64, an HTML img tag or a CSS background. Animated GIFs keep every frame. Switch direction to turn Base64 back into a GIF.

data:image/gif;base64,R0lGOD…

spinner.gif

805 bytes · animated, 8 frames, 800 ms

1,098 characters

data:image/gif;base64,R0lGODlhGAAYAIEAAP///w50kAa21KXz/CH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCgAAACwAAAAAGAAYAAACSYSPqcvtF2J4TU5qhDbWjN9oG9ABH7iII3Kiisq0juAM2J3Aj3zo9YnwNXgZEYWIu9mGP1cCyYKapB7gFEWtLnlWTPbYTYrHiAIAIfkECQoAAAAsAAAAABgAGAAAAkiEj6nL7SeieE1OamTWIPjKWYb3LdaFkKUiLqqDuticDPZA3fih5zfSewQNw0aRhtkxlIsj79d06phAaND53F1tNGwSigyLEwUAIfkECQoAAAAsAAAAABgAGAAAAkqEj6nL7SeieE1OaoY2lsembUA3SkwoItaloAx5OixGZyEV5AHiPvp+6Dl+vJtPV0sCBg4myNiCJlDOotTq7AmjWeO1+aVtleRyAQAh+QQJCgAAACwAAAAAGAAYAAACSISPqcvtN+J4TU5qZNZA+MpZhvct1oWQpSIuqoO62Jy0zgtxN4nYDb6JUIC0WUwRgOkSgWbS5DM4m4xWawq6XKnGZTFaDIsNBQAh+QQJCgAAACwAAAAAGAAYAAACS4SPqcvtN+J4TU5qZNaAL7tF4aVYJAR+XpIyZ4nF7MoItoC0zY2j4sPL0RZBmfGV6LmGhmJJ13TOfoFqIGqrUK1YmfVqPHzD5DKiAAAh+QQJCgAAACwAAAAAGAAYAAACTISPqcvtN+J4TU5qZNaAL7tF4aVYJAR+XpIyZ4nF7OqubWXTqojyzi3DBBwCR+A4XAiWxQXyqGAuGU+D1MpsILFTQDZ2DR7C4rLZUAAAIfkECQoAAAAsAAAAABgAGAAAAkuEj6nL7TfieE1OamTWgC+7ReGlWCQEfl6SMmeJxUlAB1QL1PaD6/fq461kGIHjlRAojSrRYqks4RBQQ7UzpEYB12zjSrQuw+QyogAAIfkECQoAAAAsAAAAABgAGAAAAkuEj6nL7TfieE1OaoI2lsembUA3SkwoItaloAx5OixGG8ItUDCA58/e05kOwd+wVvO9HEXFDtFTQp5EnOdTwi6s2ctRqEV2xeQyogAAOw==

How to convert a GIF to Base64

Choose your GIF, or drag it onto the box. It is read in your browser, so nothing is uploaded.
Pick the format you need: data URI for web pages, raw Base64 for an API or JSON field, or a ready-made img tag or CSS rule.
Copy the result and paste it where the GIF should go.

Base64 rewrites the file's bytes as plain letters and numbers so the GIF can live inside text. Nothing in the image changes: an animated GIF keeps every frame, its timing and its looping, and decoding the Base64 gives back the exact same file. Try the example, an 8-frame loading spinner, to see it still spin in the preview.

Example: the 1 × 1 transparent GIF

The most copied GIF on the web is a single see-through pixel, 42 bytes long. Developers use it as a placeholder src for images that load later, as a spacer, and in email tracking pixels. As Base64 it is short enough to paste straight into your code:

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

Result: 42 bytes became 56 characters. With the 22-character data:image/gif;base64, prefix, the full data URI is 78 characters. Paste it into the tool's Base64 → GIF side to see it (there is not much to see).

Using GIF Base64 in HTML, CSS and JSON

Where to paste GIF Base64 and which format to use
Where it goes	Format	Looks like
HTML image	Data URI	<img src="data:image/gif;base64,…">
CSS background	Data URI	background-image: url("data:image/gif;base64,…");
JSON or API field	Raw Base64	"image": "R0lGOD…"
Email	Link instead	Outlook 2007–2019 for Windows does not show Base64 GIFs, so link a hosted GIF when it must show everywhere

An animated GIF as a CSS background or img data URI plays just like the file would. If an API rejects your GIF, check whether it wants raw Base64: most fail on the data: prefix, while browsers need it.

How big will the Base64 be?

About a third bigger than the GIF. Every 3 bytes become 4 characters, and an animated GIF is already large because it stores every frame. The table shows raw Base64; add 22 characters for the data URI prefix.

GIF file size and the size of its Base64
GIF	File size	Base64
1 × 1 transparent pixel	42 bytes	56 characters
24 × 24 spinner, 8 frames (the example)	805 bytes	1,076 characters
Small animated icon	10 KB	13.3 KB
Short animated banner	100 KB	133.3 KB
Reaction GIF	1 MB	1.33 MB

Base64 suits small GIFs of a few KB, like spinners, pixels and tiny icons, where skipping a separate download is worth it. For bigger animations, link a normal .gif file: it stays smaller, and the browser can cache it and reuse it across pages.

GIF to Base64 in JavaScript, Python and the command line

JavaScript in the browser (gives a data URI)

const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // data:image/gif;base64,R0lGOD…
reader.readAsDataURL(file);

Node.js (gives raw Base64)

const fs = require('fs');
const base64 = fs.readFileSync('loader.gif').toString('base64');

Python

import base64

with open('loader.gif', 'rb') as f:   # 'rb': read as bytes, not text
    b64 = base64.b64encode(f.read()).decode('ascii')

Command line

base64 -w 0 loader.gif      # Linux (-w 0 = no line breaks)
base64 -i loader.gif        # macOS
[Convert]::ToBase64String([IO.File]::ReadAllBytes("C:\images\loader.gif"))   # Windows PowerShell

A common mistake is opening the GIF as text (Python's 'r' instead of 'rb', or reading it line by line). That damages the bytes, and the Base64 comes out short or broken. For a data URI, put data:image/gif;base64, in front of the raw Base64.

Turning Base64 back into a GIF

Switch the tool to Base64 → GIF and paste either the full data URI or just the Base64. It also copes with line breaks, missing = padding and a leftover src="…" or url(…) around it. Check the preview, then download the .gif file.

Quick check: GIF Base64 always starts with R0lGOD, because every GIF file starts with the letters GIF8. R0lGODlh is a GIF89a and R0lGODdh the older GIF87a. If yours starts with iVBOR it is a PNG, /9j/ is a JPEG and UklGR is a WebP; the tool tells you which.

base64 -d loader.txt > loader.gif                        # Linux / macOS
open('loader.gif', 'wb').write(base64.b64decode(b64))   # Python

Frequently asked questions

Does an animated GIF still move after converting to Base64?

Yes. Base64 copies the whole file, every frame included, so a GIF data URI animates in an img tag or CSS background exactly like the original file.

What is the difference between Base64 and a data URI?

Raw Base64 is just the encoded characters (R0lGOD…). A data URI adds data:image/gif;base64, in front so a browser knows it is a GIF. Use the data URI in HTML and CSS, and raw Base64 for most APIs.

Why does my GIF Base64 not show as an image?

Usually the data URI prefix is missing, or the string was cut short when copying. Paste it into the Base64 → GIF side: if it previews there, the Base64 is fine and the problem is where you pasted it.