Verwenden Sie diesen kostenlosen Online Base64 Image Maker, um schnell ein Bild hochzuladen und es in eine Base64-Zeichenkette zu konvertieren. Das Bild kann im JPEG-, GIF- und PNG-Format vorliegen.
Base64 ist ein Kodierungsalgorithmus, der es ermöglicht, beliebige Zeichen in ein Alphabet zu konvertieren, das aus lateinischen Buchstaben, Ziffern, Plus und Schrägstrich besteht. Durch diesen Algorithmus können sogar chinesische Zeichen, Emojis und Bilder in eine „lesbare“ Zeichenkette umgewandelt werden.
In der Informatik ist Base64 eine Gruppe von Binär-zu-Text-Kodierungsschemata, die binäre Daten in einem ASCII-Zeichenformat darstellen, indem sie in eine Radix-64-Darstellung übersetzt werden. Der Begriff Base64 stammt von einer spezifischen MIME-Inhaltstransferkodierung. Jede Base64-Ziffer repräsentiert genau 6 Bits Daten. Drei 8-Bit-Bytes (d.h. insgesamt 24 Bits) können daher durch vier 6-Bit-Base64-Ziffern dargestellt werden.
Wie alle Binär-zu-Text-Kodierungsschemata ist Base64 dazu konzipiert, Daten, die in binären Formaten gespeichert sind, über Kanäle zu übertragen, die nur zuverlässig Textinhalte unterstützen. Base64 ist besonders verbreitet im World Wide Web, wo es unter anderem dazu verwendet wird, Bilddateien oder andere binäre Assets innerhalb von textuellen Assets wie HTML- und CSS-Dateien einzubetten. (Wikipedia)
Ursprünglich wurde der Algorithmus als „druckbare Kodierung“ bezeichnet und erst im Juni 1992 definierte RFC 1341 ihn als „Base64“. Die 64 Zeichen repräsentieren die 64 Stellenwerte für die Basis, die je nach Implementierung variieren.
Die Geschichte des Base64-Algoritms begann, als Ingenieure darüber stritten, wie viele Bits ein Byte haben sollte. Vor einigen Jahrzehnten wurden Sieben-Bit-, Sechs-Bit- und Drei-Bit-Bytes verwendet. Aber als das Acht-Bit-Byte als Standard festgelegt wurde, verwendeten viele Systeme alte Standards und unterstützten den neuen nicht. Es traten einige Probleme auf. Beispielsweise könnte ein Mailserver das achte Bit beim Senden von E-Mails verwerfen, oder es konnten nur Texte, aber keine Bilder, Videos, Archive usw. gesendet werden. Also wurde ein neuer Algorithmus entwickelt, um dieses Problem zu lösen - Base64.
Base64 wird am häufigsten verwendet, um binäre Daten wie Bilder oder Sounddateien für die Einbettung in HTML, CSS, EML und andere Textdokumente zu kodieren. Darüber hinaus wird Base64 verwendet, um Daten zu kodieren, die während der Übertragung, Speicherung oder Ausgabe nicht unterstützt oder beschädigt werden könnten. Hier sind einige Anwendungen des Algorithmus:
- Dateien anhängen beim Senden von E-Mails
- Bilder in HTML oder CSS über Data URI einbetten
- Rohbytes kryptografischer Funktionen bewahren
- Binärdaten als XML oder JSON in API-Antworten ausgeben
- Binärdateien in einer Datenbank speichern, wenn BLOB nicht verfügbar ist
Wann sollte man den Base64 Image Maker verwenden?
Base64 zeigt die Bilder nicht an, daher werden die Bilder nie von Google indexiert, da sie nicht in der Bildersuche erscheinen.
Sie können den Base64 Image Maker für nicht so wichtige Bilder verwenden, die keinen Traffic bringen, zum Beispiel soziale Icons. Kleine Icons wie Twitter, Google+, Facebook usw. sind wirklich klein und müssen nicht indexiert werden. Diese kleinen Icons bringen nie Traffic.
Es ist am besten, die Base64-Kodierung nur für winzige Bilder zu verwenden. Wenn Sie versuchen, größere Bilder mit Base64 zu kodieren, enden Sie mit einer großen Menge an Code in Ihrem HTML und verlieren die Leistungsvorteile. Viele Webseiten haben 8 oder 12 soziale Icons, und es ist nicht notwendig, sie herunterzuladen. In diesem Fall ist Base64 die beste Wahl!
Data URIs und Base64-Kodierung gehen Hand in Hand. Data URLs sind ein Uniform Resource Identifier-Schema, das es Ihnen ermöglicht, Datenelemente direkt in einer Webseite einzubinden, als ob sie als externe Ressourcen referenziert würden. Data URLs sind eine Form von Uniform Resource Locators, obwohl sie tatsächlich nichts entfernt lokalisieren. Stattdessen sind die Ressourcendaten direkt in der URL-Zeichenkette selbst als base64-kodierte Zeichenkette enthalten. Dies spart dem Browser zusätzliche HTTP-Anfragen für externe Ressourcen und kann so die Seitenladezeit erhöhen.
Data URLs reduzieren die Anzahl der HTTP-Anfragen, die der Browser stellen muss, um ein HTML-Dokument anzuzeigen. Die Minimierung der Anzahl von Browseranfragen ist ein wichtiger Teil der Optimierung der Ladezeiten von Webseiten. Daher können Data URLs vorteilhafte Auswirkungen auf die Leistung haben.
Data URLs können das Herunterladen kleiner Dateien beschleunigen.
Die Datenübertragung über TCP startet langsam, und jede externe Ressource startet eine neue TCP-Verbindung zum Server. Die Übertragungsgeschwindigkeit kann daher durch den Overhead der TCP-Kommunikation beeinträchtigt werden.
Weniger Bandbreitennutzung.
Data URLs verbrauchen weniger Bandbreite, wenn der Overhead der Kodierung der Daten als Data URL kleiner ist als der Overhead einer HTTP-Anfrage. Zum Beispiel würde die erforderliche Base64-Kodierung für ein 600 Byte großes Bild 800 Bytes betragen, so dass, wenn eine HTTP-Anfrage mehr als 200 Bytes Overhead benötigen würde, die Data URI effizienter wäre.
Schnelleres HTTPS.
HTTPS-Anfragen haben viel größeren Overhead als gewöhnliche HTTP-Anfragen aufgrund der SSL-Verschlüsselung. Wenn Ihre Webseite über HTTPS bereitgestellt wird, kann das Bereitstellen von Ressourcen über Data URLs die Leistung erheblich verbessern.
Wie sieht eine Data URL aus?
Eine Data URL ist eine Zeichenkette, die mit data: beginnt, gefolgt vom MIME-Typ-Format. Zum Beispiel hat ein PNG-Bild den MIME-Typ image/png, gefolgt von einem Komma und dann von den eigentlichen Daten.
Text wird normalerweise in Klartext übertragen, während binäre Daten normalerweise base64-kodiert sind.
Hier ist ein Beispiel, wie eine solche Data URL aussehen könnte:
<img src="data:image/png,ABQCAIAAABtUGDWAA..." />
Hier ist, wie eine base64-kodierte Data URL aussieht:
data:image/png;base64:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..." />
Sie können die base64-kodierte Zeichenkette in CSS verwenden. Sie können die Zeichenkette kopieren und so in Ihren Code einfügen:
.example { background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUh...'); }