Einbetten von PNG-Bildern in HTML-Seiten

Die Aufgabe, ein PNG-Bild in eine HTML-Seite einzubetten, ohne auf die Bilddatei zu verlinken, wirft die Frage auf : Wie integriere ich die Bilddaten direkt in den HTML-Code?

Einbettung mit Base64-Kodierung

Base64-Kodierung bietet eine Lösung zum Einbetten von Bildern in HTML. Es sind verschiedene Online-Base64-Encoder verfügbar, es wird jedoch empfohlen, einen robusten Encoder wie den unter http://www.greywyvern.com/code/php/binary2base64 zu verwenden.

Dieses Tool bietet zwei primäre Einbettungsoptionen : mit CSS oder dem -Tag.

CSS-Einbettung

In CSS kann die Einbettung wie folgt erreicht werden:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA);
}

Tag-Einbettung

Alternativ kann das -Tag verwendet werden:

Durch die Verwendung der Base64-Kodierung können Sie PNG-Bilder direkt in HTML-Seiten einbetten und so die Anzeige von Bildern ermöglichen, ohne dass dies erforderlich ist externe Bilddateien.