Konverter Bild zu Base64
Bild ablegen, einfügen oder auswählen und die fertige Data-URI für HTML, CSS oder Markdown kopieren. In die andere Richtung Base64 oder eine Data-URI einfügen, um das Bild zu sehen, den echten Typ zu prüfen und die Datei herunterzuladen.
Das Bild wird in Ihrem Browser gelesen und umgewandelt. Es wird an keinen Server gesendet und nicht auf der Seite gespeichert.
Ergebnis
Noch kein Bild
Wählen Sie ein Bild oder fügen Sie einen Screenshot mit Strg+V ein. Der Code erscheint hier im gewählten Format.
Sie haben Base64, das kein Bild ist, einen Basic-Header oder ein Kubernetes-Secret? Der Base64-Decoder liest Text und jede Datei.
Was ist eine Data-URI
Eine Data-URI steckt die Datei direkt in die Adresse: data:image/png;base64, gefolgt von den Bildbytes in Base64. Der Browser behandelt diesen Text wie eine Bild-URL, deshalb funktioniert er im src eines img-Tags, in url() im CSS, in Markdown und in JSON. Der Teil vor dem Komma gibt den Dateityp an; stimmt er nicht, lehnen manche Browser und Upload-Prüfungen das Bild ab.
Wann man ein Bild einbettet und wann nicht
Einbetten lohnt sich
Icons und Logos von wenigen KB, die sonst je eine Anfrage kosten
Kleine Hintergrundbilder im kritischen CSS, das mit der Seite lädt
Test-Fixtures und API-Mocks, in denen das Bild im JSON mitreisen muss
Besser als Datei
Fotos und Banner: Base64 ist ein Drittel größer und wird nicht getrennt von der Seite gecacht
Das Hauptbild der Seite, weil ein größeres HTML alles Folgende verzögert
Bilder in Marketing-E-Mails, die Gmail und Outlook unter Windows als Data-URI nicht anzeigen
SVG braucht kein Base64
SVG ist Text und kann daher mit Percent-Encoding in die Data-URI, wobei nur <, >, # und % maskiert werden. Das Ergebnis ist meist kleiner als Base64 und bleibt lesbar. Doppelte Anführungszeichen werden zu einfachen, damit der Wert in url("...") im CSS passt. Wählen Sie URL-kodiert in den Optionen, wenn das Bild ein SVG ist.
Uploads und APIs mit Base64-Bildern testen
Viele APIs erwarten das Bild als Base64 im JSON, mit oder ohne das Präfix data:. Für QA zählen zwei Dinge. Größenlimits gelten meist für die dekodierte Datei, und Base64 ist etwa 33 % größer: Aus einem Foto mit 5 MB werden rund 6,7 MB Payload. Dazu kommt der Typ: Sagt die Data-URI image/png und die Bytes sind JPEG, lehnt ein Backend, das die Dateisignatur prüft, sie ab. Der Modus Base64 zu Bild zeigt beide Typen nebeneinander.
Formate, die der Browser anzeigt
PNG, JPEG, GIF, WebP, AVIF, SVG, ICO und BMP erscheinen in jedem aktuellen Browser. HEIC, das Fotoformat des iPhones, öffnet nur Safari; hier wird es trotzdem umgewandelt und heruntergeladen, die Vorschau kann aber fehlen.
Häufige Fragen zu Bildern in Base64
Data-URI, E-Mail, SVG, Uploads und Bilder, die nicht erscheinen.