Mit Daten-URLs Bilder und andere Daten in Textdokumente integrieren

Zum schnellen Einbauen von Bildern in HTML oder Markdown gibt es Daten-URLs. Außerdem können Sie damit prima Programmabläufe verschleiern. So geht's!

Artikel verschenken
In Pocket speichern vorlesen Druckansicht 1 Kommentar lesen
Lesezeit: 7 Min.
Von
  • Oliver Lau
Inhaltsverzeichnis

Angenommen, Sie verfassen ein Dokument in Markdown, das nicht nur Text, sondern auch Bilder enthalten soll. Typischerweise verlinken Sie Bilder in Markdown mit einer Anweisung wie ![Alternativtext](/Pfad/zur/Bilddatei.png).

Falls Sie ein solches Dokument versenden wollen, müssen Sie sicherstellen, dass Sie auch alle darin erwähnten Bilder mitschicken. Hören Sie schon das genervte "Anhang vergessen?" des Empfängers? Vielleicht pflegen Sie aber auch eine Webseite, die kleine Bildelemente wie Logos enthält. Wenn Sie die alle per <img src="..."> oder per CSS-Attribut (etwa background-image: url(...)) ins Dokument eingebaut haben, verlängert das die Ladezeit der Seite mitunter drastisch.

Mehr zu Webentwicklung

In beiden Fällen können Sie sich mit sogenannten "Data URLs" behelfen.