Bild in Data-URI
Mach aus einem Bild eine vollständige Data-URI, die du direkt in ein HTML-src-Attribut oder einen CSS-url()-Wert einfügen kannst.
Bild in Data-URI wandelt eine Bilddatei in eine Data-URI um: eine Textzeile, die sowohl den Dateityp als auch das Base64-kodierte Bild enthält. Du kannst sie direkt in ein img-src-Attribut oder einen CSS-url()-Wert einfügen, und das Bild wird ohne separate Datei angezeigt. Der MIME-Typ im Präfix stammt aus deiner Datei, und die Bild-Bytes werden nicht verändert.
Anleitung: Bild in Data-URI
- 1
Bild öffnen
Zieh eine beliebige Bilddatei hierher, wähle sie aus oder füge sie ein, zum Beispiel ein Icon, Logo oder eine kleine Grafik.
- 2
Data-URI erhalten
Die vollständige Data-URI, beginnend mit data:image/, erscheint mit ihrer Länge und ungefähren Größe.
- 3
Kopieren
Klicke auf „Data-URI kopieren“ oder nutze „HTML kopieren“ oder „CSS kopieren“ für ein fertiges Snippet.
- 4
In deine Seite einfügen
Nutze sie überall dort, wo eine normale Bild-URL funktioniert, etwa in einem img-Tag oder einem CSS-Hintergrund.
Funktionen
- Korrekter MIME-Typ
- Das Präfix passt zu deiner Datei, zum Beispiel image/png, image/jpeg oder image/svg+xml.
- Original-Bytes
- Die Datei wird so kodiert, wie sie ist. Qualität und Größe ändern sich also nicht durch erneute Kompression.
- Snippets zum Kopieren
- Erhalte ein komplettes img-Tag oder eine background-image-Regel, in der die Data-URI bereits steckt.
- Privat
- Die Data-URI wird in deinem Browser erstellt, das Bild wird also nicht hochgeladen.
Fragen
Was ist eine Data-URI?
Eine Data-URI ist ein Link, der die Datei selbst enthält, statt auf sie zu verweisen. Bei Bildern beginnt sie mit data:image/png;base64, oder einem ähnlichen Präfix, und Browser zeigen sie wie eine normale Bild-URL an.
Wie nutze ich eine Data-URI in CSS?
Klicke auf „CSS kopieren“, um eine background-image-Regel mit der vollständigen URI in url() zu erhalten, und füge sie in dein Stylesheet ein.
Wann sollte ich auf Data-URIs verzichten?
Bei großen Bildern und bei Bildern, die auf vielen Seiten vorkommen. Der kodierte Text ist etwa ein Drittel größer als die Datei, und der Browser kann ihn nicht separat zwischenspeichern.
Funktionieren Bilder als Data-URI in E-Mails?
Das ist unterschiedlich. Viele E-Mail-Programme, darunter einige Webmail-Dienste, zeigen Data-URI-Bilder nicht an. Teste deine E-Mail also oder nutze ein online gehostetes Bild.
Welche Bildtypen werden unterstützt?
Jedes Bild, das dein Browser öffnen kann, etwa JPG, PNG, GIF, WebP, AVIF und SVG. HEIC-Fotos vom iPhone werden zuerst in PNG umgewandelt, ihre Data-URI nutzt daher image/png.