Bild zu Data-URI / Base64-Konverter
Ziehen Sie Ihr Bild einfach per Drag & Drop oder laden Sie es manuell von Ihrem Gerät hoch oder fügen Sie die Bild-URL aus dem Web ein, um Ihr gewünschtes Bild in das Base64-/Data-URI-Textformat zu konvertieren. Konvertieren Sie Bild in Data-URI-/Base64-Textformat.
Data-URI / Base64 zu Bild-Konverter
Verwendung Bild zu Data-URI / Base64-Konverter
Inhalt lesen
Konvertieren Sie mehrere Ihrer Bilddateien online und kostenlos in das Data-URI- und Base64-Format.
Bild zu Data-URI / Base64-Konverter
Ein Bild-zu-Data-URI-/Base64-Konverter ist ein praktisches Werkzeug, mit dem Sie ein Bild schnell und einfach in eine Textzeichenfolge umwandeln können, die in einer Webseite oder einer anderen Online-Anwendung verwendet werden kann. Dieser Konverter ist nützlich, wenn Sie ein Bild in Ihren Code einbetten müssen, aber keinen externen Datei-Hosting-Dienst nutzen möchten.
Was ist das Bild-zu-Base64-Kodierungssystem
Mussten Sie schon einmal ein Bild in eine Data-URL oder Base64-Zeichenfolge umwandeln?
Bild zu Base64 ist ein Bildkodierungssystem, das beliebige Bilder ohne Datenverlust in ein unlesbares Textformat konvertiert. Die erzeugten Base64-kodierten Texte enthalten Plus-, Schrägstrich-, Gleichheitszeichen, lateinische Buchstaben und Ziffern.
Base64-Kodierung ist eine sehr nützliche Möglichkeit, Binärinformationen im Textformat zu speichern. Das Ziel ist es, Binärdaten (wie Bilder, Töne, Videoclips) mit ASCII-Zeichen (Buchstaben des Alphabets + Zahlen) darzustellen.
Warum Data-URI / Base64?
Ein Bild kann mit einer Methode namens Data-URIs in eine Base64-Zeichenfolge umgewandelt werden. Dies ermöglicht es uns, eine URL für das Bild zu erstellen, die dann in eine Webseite eingebunden werden kann. Der Vorgang umfasst die Umwandlung unserer Originaldatei(en) in ein Byte-Array (eine Sammlung von Bytes). Anschließend können wir unser Byte-Array in eine Base64-kodierte Zeichenfolge umwandeln.
Data-URIs bieten im Vergleich zu lokalen Dateien mehrere Vorteile. Sie sparen Platz im Cache des Clients (Browser), sind kleiner als reguläre Bilder und ermöglichen Websites, größere Bilder mit weniger Bandbreitenverbrauch bereitzustellen. Base64-Zeichenfolgen sind zudem leichter lesbar, da sie mit gängigen Texteditoren einfach angezeigt werden können.
Mit Data-URIs können Sie ein Bild direkt in Ihren HTML-Code einbetten, ohne eine externe Datei laden zu müssen. Das kann die Ladezeiten Ihrer Seite verkürzen und ist eigentlich recht einfach. In diesem Artikel zeigen wir Ihnen, wie Sie Bilder in Sekunden in Data-URIs umwandeln.
Wie man Bilder in Sekunden in Base64-kodierten / Data-URI umwandelt
Haben Sie sich schon einmal gefragt, wie Sie Bilder auf Ihrer Website schneller laden lassen? Eine Möglichkeit ist die Verwendung von Data-URIs. Ziehen Sie Ihr Bild einfach per Drag & Drop oder laden Sie es manuell von Ihrem Gerät hoch oder fügen Sie die Bild-URL aus dem Web ein, um Ihr gewünschtes Bild in das Base64-/Data-URI-Textformat zu konvertieren.
Beispiel für Base64-kodiertes Bild
Base64-kodierte Ausgabe für ein Bild sieht so aus data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....
Verwendung von Base64-kodierten Bildern
Für Bildquelle (img src):
< img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />
Für Hintergrundbild-URL (background-image: url):
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")
Wie man Data-URI / Base64 verwendet
Um den Data-URI-/Base64-Konverter zu nutzen, kopieren Sie einfach den generierten Code an die Stelle Ihres Projekts, an der das eingebettete Bild erscheinen soll. Entfernen Sie keine Zeilenumbrüche oder Leerzeichen aus dem Code, da diese für die korrekte Anzeigeformatierung notwendig sind. Möglicherweise müssen Sie je nach Verwendungszweck der konvertierten Bilder auch einige Einstellungen anpassen – etwa die Abmessungen ändern oder Ränder/Abstände hinzufügen.
Kommentare (0)
Beschreiben Sie das aufgetretene Problem, damit wir es untersuchen und das Tool verbessern können.