Bildvorschau & Info
Roh‑Base64‑String
Base64-encoded data (no prefix)
Data‑URI
Complete data URI (data:image/...;base64,...)
CSS‑Background
CSS background-image property
HTML‑Bild‑Tag
Ready-to-use <img> element
Konvertieren Sie jedes Bild sofort in einen Base64‑kodierten String. Erhalten Sie Data‑URIs, CSS‑Background‑Snippets und HTML‑img‑Tags – alles in Ihrem Browser verarbeitet, ohne Server‑Uploads.
Base64‑Kodierung ist nur ein Teil des Puzzles. OneStepToRank bietet Ihnen eine komplette Suite an Tools und Optimierungs‑Intelligenz, um Ihre lokalen Suchergebnisse zu dominieren.
Kostenlos startenBase64‑Kodierung ist ein Verfahren, um Binärdaten in Klartext‑ASCII mit 64 druckbaren Zeichen zu konvertieren. Bei Bildern ergibt das einen Textstring, der die gesamte Bilddatei repräsentiert. Dieser String kann direkt in HTML über das <img>-Tag‑Attribut src, in CSS über die Eigenschaft background-image oder in JSON‑Payloads für API‑Kommunikation eingebettet werden. Die Kodierung verwendet die Zeichen A‑Z, a‑z, 0‑9, + und /, mit = als Auffüllzeichen. Jede 3‑Byte‑Gruppe erzeugt 4 Base64‑Zeichen, wodurch das Ergebnis etwa 33 % größer ist als die Originaldatei.
Ein data URI (Uniform Resource Identifier) bettet den Dateiinhalte direkt in die URL ein, wobei die Syntax data:[mediatype];base64,[data] verwendet wird. Bei Bildern bedeutet das, dass Sie das gesamte Bild in Ihr HTML oder CSS einbinden können, ohne eine separate Datei auf dem Server zu benötigen. Das eliminiert einen HTTP‑Request, was bei kleinen Bildern wie Icons, Logos und UI‑Sprites vorteilhaft sein kann. Der Nachteil ist, dass data URIs die Größe Ihres HTML‑ oder CSS‑Dokuments erhöhen, vom Browser nicht separat gecached werden können und etwa ein Drittel größer sind als das ursprüngliche Binärformat. Als Faustregel eignen sich Bilder unter 5‑10 KB gut für das Inline‑Embedding, während größere Bilder als separate Datei mit korrekten Cache‑Headern ausgeliefert werden sollten, um die Gesamt‑Performance zu verbessern.
Obwohl das Eliminieren von HTTP‑Requests das anfängliche Rendering der Seite beschleunigen kann, hat das Einbetten großer Bilder als Base64‑Strings mehrere Nachteile. Die HTML‑ oder CSS‑Datei wird deutlich größer, was den ersten Dokument‑Download verzögert. Der Browser kann das Bild nicht separat vom enthaltenden Dokument cachen. Und der 33 %ige Größen‑Overhead bedeutet mehr Datenübertragung im Vergleich zur direkten Auslieferung der Binärdatei. Für kritische Rendering‑Pfade können kleine Inline‑Bilder die wahrgenommene Ladezeit reduzieren, indem sie render‑blockierende Requests vermeiden. Für Inhalts‑Bilder, Hero‑Banner oder jedes Bild über ein paar Kilobyte hinweg sollten jedoch optimierte Binärdateien mit CDN‑Caching und modernen Formaten wie WebP oder AVIF ausgeliefert werden, um bessere Performance zu erzielen. Nutzen Sie Base64‑Kodierung gezielt für kleine, häufig genutzte Assets, die von einer reduzierten Anzahl an Requests profitieren.