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!
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 .
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.
In beiden Fällen können Sie sich mit sogenannten "Data URLs" behelfen.
URL dieses Artikels:
https://www.heise.de/-7619551
Links in diesem Artikel:
[1] https://www.heise.de/ratgeber/Webentwicklung-Kalender-in-eine-Website-integrieren-praktische-Moeglichkeiten-9311173.html
[2] https://www.heise.de/hintergrund/Webentwicklung-Fullstack-Anwendungen-mit-dem-Next-js-App-Router-9231420.html
[3] https://www.heise.de/hintergrund/Webentwicklung-Die-neue-Generation-JavaScript-Metaframeworks-9207984.html
[4] https://www.heise.de/ratgeber/WebAssembly-Flinkeren-Code-fuer-den-Browser-produzieren-9159159.html
[5] https://www.heise.de/ratgeber/Webentwicklung-Virtual-Reality-mit-WebXR-in-den-Browser-holen-9065192.html
[6] https://www.heise.de/hintergrund/Mit-Daten-URLs-Bilder-und-andere-Daten-in-Textdokumente-integrieren-7619551.html
[7] https://www.heise.de/hintergrund/Webservices-in-C-programmieren-mit-Boost-Beast-7518635.html
[8] https://www.heise.de/hintergrund/Webservices-in-C-JSON-Daten-de-serialisieren-mit-Bibliothek-PropertyTree-7524612.html
[9] https://www.heise.de/hintergrund/Webservices-mit-C-Routing-von-Anfragen-7546634.html
[10] https://www.heise.de/ratgeber/Webentwicklung-mit-React-Event-Streams-im-Frontend-7373389.html
Copyright © 2023 Heise Medien