About the GIF to Base64 Converter
A GIF is a container of frames plus timing, and encoding it as Base64 copies that container byte for byte. Every frame, the loop count and the frame delays all survive, so an inlined animation plays exactly as the original did. That is what separates this from converting a GIF through a canvas, which would flatten it to a single still frame.
Two situations make an inline GIF genuinely useful. Spinners and small loading animations need to be visible before any other asset has loaded, and a data URI is present the moment the stylesheet parses. Email templates are the second, since many clients block remote images by default while accepting inline data in some environments.
Pick the output that matches the destination: a bare data URI for a template variable, a CSS declaration for a stylesheet, an img tag for a page, Markdown for a readme, or a JSON object when an API wants the file name and size alongside the encoded bytes. The type is confirmed from the GIF signature in the first six bytes rather than trusted from the extension.
Animated GIFs get large quickly and Base64 adds a third on top, so watch the character count in the status line. Read an existing string back with Base64 to Image.
How to use
- Drop, paste or choose a GIF file.
- Select the output shape you want in the Output as list.
- Copy the encoded string straight into your CSS, template or request.
Common questions
- Does the animation still play once inlined?
- Yes. Every frame and the timing information are encoded, so the data URI animates just like the file.
- Why is the output so long?
- Animated GIFs store many frames, and Base64 adds roughly 33 percent on top of that total.
- Can I inline a GIF in an email?
- Some clients render inline data and others strip it. Test in the clients you care about before relying on it.
- Is transparency kept?
- Yes. GIF transparency is stored in the file itself, and the file is copied without modification.