PNG-Bilder direkt in HTML integrieren

Das Einbetten von PNG-Bildern in HTML ermöglicht die direkte Anzeige im Browser ohne externe Dateireferenzierung. Um dies zu erreichen, verwenden Sie die Base64-Kodierungstechnik:

Base64-Kodierung des PNG-Bildes:

Verwenden Sie Online-Encoder, um das PNG-Bild in eine Base64-Zeichenfolge zu konvertieren. Diese Zeichenfolge stellt die binären Bilddaten im Textformat dar.

Base64-Zeichenfolge in HTML integrieren:

CSS-Option:

Definieren Sie eine CSS-Klasse für das Bild und legen Sie die Eigenschaft „Hintergrundbild“ mithilfe der Funktion url() und der Base64-Zeichenfolge fest. Zum Beispiel:

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

Bild-Tag-Option:

Alternativ können Sie den Base64-String direkt in das -Tag einbetten:

Dadurch wird das PNG-Bild in ein Daten-URI-Schema konvertiert, das es dem Browser ermöglicht, das Bild direkt zu interpretieren und anzuzeigen.