Jedes Bild in eine Base64-kodierte Daten-URL umwandeln
Dieses Tool wandelt ein Bild in eine Base64-Daten-URL um — eine lange Textzeichenkette, die das ganze Bild enthält und mit etwas wie data:image/png;base64,iVBORw0KGgo... beginnt. Da das Bild zu reinem Text wird, können Sie es direkt in HTML, CSS oder JSON einbetten, statt auf eine separate Datei zu verlinken. Der Browser liest die Zeichenkette und stellt das Bild ohne zusätzliche Netzwerkanfrage dar — deshalb werden kleine Icons, Logos und Hintergrundgrafiken oft so inline eingebettet.
Der Kompromiss ist die Größe: Base64-Kodierung macht Daten etwa ein Drittel größer als die Originaldatei, es lohnt sich also für kleine Assets, schadet aber bei großen Fotos. Ein winziges Icon inline einzubetten spart eine HTTP-Anfrage und vermeidet ein kurzes Fehlen des Bildes; ein großes Foto inline bläht Ihr HTML auf und ist meist schlechter als eine normale Datei. Dieses Tool kodiert das Bild vollständig im Browser — nichts wird hochgeladen — und gibt Ihnen die fertige Daten-URL zum Einfügen in Ihren CSS-Hintergrund, ein img-Tag oder eine JSON-Payload.
Base64 stellt Binärdaten nur mit Textzeichen dar, was etwa 33% Mehraufwand hinzufügt. Das ist erwartet und unvermeidlich: Die kodierte Zeichenkette ist immer größer als die Originaldatei, weshalb sich Inlining für kleine Assets eignet, nicht für große Fotos.
Inlining eignet sich am besten für kleine, häufig genutzte Grafiken — Icons, Logos, winzige Hintergründe —, wo das Einsparen einer HTTP-Anfrage die Größenkosten überwiegt. Für große Bilder oder seitenübergreifend gecachte und wiederverwendete Inhalte ist eine normale verlinkte Datei meist schneller.
Es ist der Daten-URL-Header: data: gefolgt vom MIME-Typ (wie image/png), dann ;base64, als Signal für die Kodierung, dann die kodierten Bytes. Browser nutzen dieses Präfix, um zu wissen, wie das Bild direkt dekodiert und angezeigt wird.
Nein. Die Kodierung geschieht vollständig im Browser, das Bild verlässt Ihr Gerät also nie. Sie können private oder unveröffentlichte Grafiken bedenkenlos in Daten-URLs umwandeln.
Bild-Größenänderung · Bild-Kompressor · Bild-Farbwähler · Bildfilter · Bild-Metadaten · SVG-zu-PNG-Konverter