Folgen Sie diesem Arbeitsbeispiel und passen Sie dann dieselben Steuerelemente an Ihr eigenes Bild an. Bild zu Base64-Konverter öffnen.
Wählen Sie ein Bild aus und sehen Sie sich dessen Identität in der Vorschau an
Öffnen Sie den Bild-zu-Base64-Konverter. Wählen Sie ein Bild oder probieren Sie ein Beispiel aus. Das Beispiel verwendet das 512 × 512 Pixel favicon-orbit.png, das 202,491 Bytes enthält. Der Editor zeigt das Bild über seinem Code an, damit Sie bestätigen können, dass Sie das beabsichtigte Asset ausgewählt haben.
PNG, JPG, WebP, GIF, BMP und AVIF werden unterstützt, wenn Ihr Browser sie für die Vorschau dekodieren kann. Die maximale Dateigröße beträgt 25 MB, mit Begrenzungen von 60 Megapixeln und 16,000 Pixeln pro Seite. SVG-Markup wird von diesem Raster-Konverter nicht akzeptiert.
Das Tool liest die ursprünglichen Dateibytes. Es verwendet die Vorschau nicht, um das Bild neu zu erstellen, in der Größe zu ändern oder neu zu komprimieren. Vorhandene Metadaten und GIF-Animationen bleiben daher in den kodierten Daten erhalten.
Verwenden Sie vor der Kodierung Bild skalieren oder Bildkompressor, wenn Sie ein kleineres Asset benötigen. Base64 selbst reduziert die Bildgröße nicht.
Wählen Sie die Darstellung, die Ihr Projekt erwartet
Öffnen Sie die Einstellungen und wählen Sie für dieses Beispiel HTML-Bild unter Codeformat. Das Ergebnis ist ein img-Tag, das eine Base64-Data-URL enthält. Das alt-Attribut ist anfangs leer; schreiben Sie nützlichen Alternativtext, wenn das Bild Informationen vermittelt.
Die Data URL beginnt mit einem Präfix wie data:image/png;base64, gefolgt von den kodierten Daten. Plain Base64 enthält nur die Daten. CSS-Hintergrund umschließt die Data URL in einer background-image-Deklaration. Diese Darstellungen dienen unterschiedlichen Zielen, kopieren Sie also die von Ihrer Anwendung angeforderte Form, anstatt nur den Dateinamen zu ändern.
Das Code-Panel aktualisiert sich sofort, nachdem Sie das Codeformat geändert haben. Das Kopier-Symbol kopiert die aktuelle Darstellung und gibt die Bestätigung für das Kopieren aus. Wenn der Zugriff auf die Zwischenablage blockiert ist, wird der Code für das manuelle Kopieren ausgewählt.
Ein vollständiges HTML img-Tag ist nicht dasselbe wie eine Daten-URL. Verwenden Sie nur den src-Wert, wenn ein Feld nach einer URL fragt.
Das Beispiel in dieser Anleitung
Beispiel ausprobieren: favicon-orbit.png, 512 × 512 px, 202,491 Bytes. Wählen Sie HTML Bild unter Code-Format. Wählen Sie Start und laden Sie favicon-orbit-base64.txt herunter.
- Original PNG
- 512 × 512 px · 202,491 Bytes
- HTML Textausgabe
- 270,029 Bytes
- Kodierung
- Original-Bytes; keine Neukomprimierung
Laden Sie den Code herunter und verstehen Sie seine Größe
Wählen Sie Start und dann Download. Das Beispiel speichert favicon-orbit-base64.txt mit HTML Bildcode. Seine 270,029 Bytes sind größer als die 202,491-Byte-Quelle. Der Vergleich im Artikel zeigt den tatsächlichen Anfang des heruntergeladenen Textes, der nur zur besseren Lesbarkeit gekürzt wurde.
Base64 konvertiert normalerweise drei Quell-Bytes in vier Textzeichen, was etwa ein Drittel vor dem kleinen Wrapper hinzufügt. Das Einbetten eines kleinen Symbols kann ein Dokument eigenständig machen, aber das Platzieren großer Bild-Strings in HTML oder CSS vergrößert das Dokument ebenfalls und verhindert, dass das Bild als separate Datei zwischengespeichert wird.
Kodierung ist keine Verschlüsselung. Jeder mit dem vollständigen Base64-String kann das zugrunde liegende Bild wiederherstellen. Behandeln Sie den Code mit derselben Sorgfalt wie die Quelle, wenn er private Informationen enthält.
Der gekürzte Auszug in diesem Artikel dient der Erläuterung. Verwenden Sie die vollständige heruntergeladene TXT oder kopieren Sie den vollständigen Code aus dem Tool.
Häufige Fragen
Verringert die Kodierung die Bildqualität?
Nein. Die Kodierung bewahrt die ursprünglichen Bytes. Sie skaliert, komprimiert oder zeichnet das Bild nicht neu.
Warum ist der Base64-String größer als das Bild?
Base64 stellt drei Eingangs-Bytes mit vier Textzeichen dar, daher fügt es normalerweise etwa ein Drittel vor einem Wrapper oder Präfix hinzu.
Werden GIF-Animationen beibehalten?
Die Kodierung bewahrt die ursprünglichen GIF-Bytes, einschließlich Animationen. Eine Vorschau zeigt möglicherweise nur einen Standbild-Frame, während die kodierten Daten alle Frames beibehalten.
Ist Base64 sicher für geheime Bilder?
Base64 ist keine Verschlüsselung. Halten Sie den String privat, wenn das zugrunde liegende Bild privat ist. Der Konverter selbst verarbeitet es lokal in Ihrem Browser.
Verwandeln Sie das richtige Bild in den richtigen Code.
Probiere ein Beispiel oder verwende deine eigene Datei und überprüfe das Ergebnis vor dem Teilen.
