How to use
- Drop a GIF onto the drop area, click to choose one, or paste an image.
- Keep the original format and leave the maximum width empty to preserve the animation.
- Check the original and encoded sizes; animated GIFs grow quickly.
- Copy the img tag or CSS background-image output, or take the data URI, raw Base64 or Markdown version.
About the GIF format
GIF (Graphics Interchange Format, MIME type image/gif) dates from 1987. Each frame uses a palette of at most 256 colours, compressed losslessly with LZW. Transparency is all or nothing: one palette entry can be marked transparent, but there is no partial opacity. A file can hold many frames with individual delays and a loop count, which is why GIF became the format for short animations.
The Base64 of a GIF starts with R0lGODlh for the common GIF89a version, or R0lGODdh for the older GIF87a.
Keeping the animation
When you keep the original format, the tool encodes the file bytes as they are. The data URI therefore animates exactly like the file, whether you use it in an <img> tag or as a CSS background.
Converting to PNG, JPEG or WebP, or setting a maximum width, redraws the image in the browser, and only the first frame survives. That is useful when you want a still preview of an animation, but for the animated version leave both options off.
Where GIF data URIs still make sense
- Small loading spinners and animated status icons in CSS.
- The classic 1x1 transparent pixel, used as a placeholder
src. It takes only a few dozen bytes and well under 100 Base64 characters. - Simple line art with few colours, where GIF is compact.
Large animations are a poor fit. A 2 MB reaction GIF turns into about 2.7 MB of text that cannot be cached on its own; a hosted video file or animated WebP is far lighter.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Frequently asked questions
Will my GIF still be animated after Base64 encoding?
Yes, as long as you keep the original format and do not resize. Base64 stores the complete file, including all frames and the loop setting.
Why did my GIF stop moving after conversion?
Converting to PNG, JPEG or WebP, or resizing, renders the image again from its first frame. The tool cannot create animated PNG or WebP files, so keep the original GIF to keep the motion.