Anleitung
- Legen Sie ein GIF auf dem Ablagebereich ab, klicken Sie darauf, um eine Datei auszuwählen, oder fügen Sie ein Bild ein.
- Belassen Sie „Konvertieren in“ auf „Original beibehalten“ und „Max. Breite“ auf „Originalgröße“, damit die Animation erhalten bleibt.
- Prüfen Sie die Original- und die kodierte Größe; animierte GIFs werden schnell groß.
- Kopieren Sie die Ausgabe als img-Tag oder CSS-background-image, oder verwenden Sie die Data-URI, reines Base64 oder die Markdown-Version.
Über das GIF-Format
GIF (Graphics Interchange Format, MIME-Typ image/gif) stammt aus dem Jahr 1987. Jedes Einzelbild nutzt eine Palette mit höchstens 256 Farben, die verlustfrei mit LZW komprimiert wird. Transparenz gibt es nur ganz oder gar nicht: Ein Paletteneintrag kann als transparent markiert werden, eine teilweise Deckkraft gibt es jedoch nicht. Eine Datei kann viele Einzelbilder mit jeweils eigener Verzögerung und einer Wiederholungsanzahl enthalten, weshalb GIF zum Format für kurze Animationen wurde.
Das Base64 eines GIFs beginnt bei der üblichen Version GIF89a mit R0lGODlh, bei der älteren Version GIF87a mit R0lGODdh.
Die Animation erhalten
Wenn Sie das Originalformat beibehalten, kodiert das Tool die Dateibytes unverändert. Die Data-URI ist daher genau so animiert wie die Datei, ob Sie sie in einem <img>-Tag oder als CSS-Hintergrund verwenden.
Eine Konvertierung in PNG, JPEG oder WebP oder das Festlegen einer maximalen Breite zeichnet das Bild im Browser neu, und nur das erste Einzelbild bleibt übrig. Das ist praktisch, wenn Sie ein Standbild einer Animation als Vorschau möchten; für die animierte Version lassen Sie beide Optionen deaktiviert.
Wo GIF-Data-URIs noch sinnvoll sind
- Kleine Lade-Spinner und animierte Status-Icons in CSS.
- Das klassische transparente 1x1-Pixel, das als Platzhalter für
srcdient. Es benötigt nur wenige Dutzend Bytes und deutlich unter 100 Base64-Zeichen. - Einfache Strichgrafiken mit wenigen Farben, bei denen GIF kompakt ist.
Große Animationen eignen sich schlecht. Ein 2 MB großes Reaktions-GIF wird zu etwa 2,7 MB Text, der nicht eigenständig zwischengespeichert werden kann; eine gehostete Videodatei oder ein animiertes WebP ist weitaus leichter.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Häufig gestellte Fragen
Ist mein GIF nach der Base64-Kodierung noch animiert?
Ja, solange Sie das Originalformat beibehalten und die Größe nicht ändern. Base64 speichert die vollständige Datei einschließlich aller Einzelbilder und der Schleifeneinstellung.
Warum bewegt sich mein GIF nach der Konvertierung nicht mehr?
Eine Konvertierung in PNG, JPEG oder WebP oder eine Größenänderung rendert das Bild anhand seines ersten Einzelbildes neu. Das Tool kann keine animierten PNG- oder WebP-Dateien erzeugen; behalten Sie also das Original-GIF bei, damit die Bewegung erhalten bleibt.