GIF in Base64

So wandeln Sie ein GIF in Base64 um

1. Legen Sie eine .gif-Datei auf dem Feld ab oder wählen Sie sie über die Dateiauswahl.
2. Lassen Sie Max. Breite, Umwandeln in und Metadaten entfernen (EXIF) unverändert, wenn das GIF animiert ist.
3. Wählen Sie Ausgabe als: Data-URI, CSS background-image, HTML <img>, Markdown oder reines Base64.
4. Drücken Sie Ausgabe kopieren. Die Anzeige zeigt, um wie viel der Text größer ist als die Datei.

Die Vorschau spielt die Animation ab, so prüfen Sie vor dem Kopieren, ob es die richtige Datei ist.

Animation und die Optionen zum Neukodieren

Die Optionen über der Ausgabe zeichnen das Bild neu auf ein Canvas. Ein Canvas enthält ein einzelnes Standbild, und Browser können daraus keine GIF-Dateien schreiben. Ein neu kodiertes GIF kommt daher als PNG (oder als JPEG oder WebP, wenn Sie das wählen) heraus, und zwar nur mit dem ersten Frame. Das ist praktisch für ein statisches Vorschaubild einer Animation; soll die Animation erhalten bleiben, lassen Sie die Optionen ausgeschaltet.

Ist ein animiertes GIF zu groß, muss die Lösung vor diesem Tool ansetzen: Verringern Sie in einem GIF-Editor die Anzahl der Frames, die Abmessungen oder die Farbpalette, oder ersetzen Sie es durch ein kurzes MP4 oder WebM in Endlosschleife, das meist viel kleiner ist als derselbe Clip als GIF.

So sieht GIF-Base64 aus

Das transparente GIF mit 1×1 Pixel unten ist 42 Bytes groß, 56 Zeichen Base64:

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

Früher füllte es Tabellenlayouts, heute taucht es noch als Platzhalter-src für Bilder mit Lazy Loading auf, weil ein gültiges Bild das Symbol für ein defektes Bild und eine zusätzliche Anfrage vermeidet.

Größe animierter GIFs in Base64

Die GIF-Kompression ist nach heutigen Maßstäben schwach, und animierte GIFs speichern jeden Frame. Ein Reaktions-GIF von zwei Sekunden hat schnell ein paar Megabyte, was als Base64-Text mehrere Megabyte ergibt. Betten Sie nur kleine GIFs ein, etwa Lade-Spinner oder winzige Icons. Alles Größere ist als normale Datei besser: Sie kann gecacht und per Lazy Loading geladen werden, während eine Data-URI mit jeder Seite, die sie enthält, erneut geladen wird.

Für E-Mails eignen sich Base64-GIFs schlecht. Gmail und andere Webmail-Clients zeigen keine Bilder aus Data-URIs an, daher werden animierte GIFs in Newslettern als gehostete Dateien verlinkt. Siehe Base64 in E-Mails.

Ein GIF in Node.js kodieren

import { readFileSync } from "node:fs";

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

Base64 in Node.js behandelt Streams und URL-sichere Ausgabe. Um eine Base64-Zeichenkette wieder in eine abspielbare Datei zu verwandeln, nutzen Sie Base64 in GIF.

Häufige Fragen