Bild in Base64 / Data-URI
Image to Base64 / Data URI
Kodiert ein Bild als Base64-Zeichenkette oder als fertige Data-URI für CSS, HTML oder JSON.
Ein Bild als Data-URI einzubetten spart eine Anfrage und fügt seiner Größe ein Drittel hinzu, dauerhaft, bei jedem Seitenaufruf – weil eine Data-URI nicht getrennt vom Dokument gecacht werden kann, das sie trägt. Dieses Werkzeug kodiert die Datei und stellt Ihnen beide Hälften dieses Tauschs vor Augen, bevor Sie sie einfügen.
Bild hier ablegen
Wird in diesem Tab kodiert. Base64 ist keine Kompression — es macht die Datei um ein Drittel größer.
So funktioniert es
Legen Sie das Bild ab
Der Typ wird von den Bytes entschieden, nicht von der Endung – ein .png, das in Wirklichkeit ein JPEG ist, ist häufig, und ein eingebettetes Bild mit falschem Typ wird nicht gerendert.
Lesen Sie das Urteil
Unter etwa 4 KB ist das Einbetten umsonst; jenseits von etwa 100 KB verzögert es das erste Zeichnen für eine Ressource, die sonst parallel geladen und gecacht würde.
Wählen Sie die Hülle
CSS gibt Ihnen die url()-Form, HTML ein img-Tag und JSON eine Zeichenkette in Anführungszeichen – direkt eingefügt statt von Hand zusammengesetzt.
Häufige Fragen
Komprimiert Base64 das Bild?
Das Gegenteil. Es kodiert drei Bytes als vier Zeichen, sodass der Text vor jeder Transportkompression genau 33⅓ % länger ist als die Datei. Es ist eine Kodierung, keine Kompression.
Soll ich mein SVG auf diese Weise einbetten?
Nein. Ein SVG ist bereits Text, sodass URL-Kodierung etwa 10 % statt 33 % kostet und das Ergebnis lesbar und diffbar bleibt. Base64 auf einem SVG ist der häufige Fehler, auf den diese Seite hinweist, wenn sie einen sieht.
Warum lehnt es Dateien über 8 MB ab?
Die Data-URI wäre über 10 MB Text in einer Zeile. Die meisten Editoren und die Entwicklerwerkzeuge mehrerer Browser werden bei dieser Größe unbenutzbar – und ein 8-MB-Bild einzubetten war von Anfang an nie die richtige Antwort.
Eingabe aus
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
Platzhalterbild
Placeholder Image
Erzeugt ein einfarbiges oder mit Verlauf gefülltes Platzhalterbild in beliebiger Größe, mit eingezeichneten Abmessungen.
Base64 in Bild
Base64 to Image
Dekodiert eine Base64-Zeichenkette oder Data-URI zurück in ein anzeigbares, herunterladbares Bild.
Base64 kodieren und dekodieren
Base64 Encoder & Decoder
Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Base64 kodieren und dekodieren
Base64 Encoder & Decoder
Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.
Base64 in Bild
Base64 to Image
Dekodiert eine Base64-Zeichenkette oder Data-URI zurück in ein anzeigbares, herunterladbares Bild.
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
SVG als CSS-Data-URI
SVG to CSS Data URI
Kodiert ein SVG als CSS-Hintergrund-Data-URI und maskiert nur, was maskiert werden muss, damit es klein bleibt.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.