Inline PixelGrafik

Inline-PixelGrafik


HTML-Quelltext



Die rechts oben angezeigte Webseite sieht genau gleich aus, enthält jedoch auch die Bild-Daten direkt (Inline) im HTML-Quelltext.

Das src-Attribut des HTML <img>-Elemens enthält den MIME-Typ der Daten (hier image/png) und danach die Grafik-Daten.

Im HTML-Quelltext darf man nur die Zeichen (Buchstaben) des vereinbarten → Zeichensatzes verwenden. Daher muss man die binären Daten der Grafik zuerst in das Format → Base64 umwandeln: Man sieht, dass alle Bytes der Grafik als lesbare Zeichen codiert sind. Base64 braucht dazu allerdings ca. 1/3 mehr Speicherplatz.


Man kann damit jedoch den Unterschied zwischen direkt eingebetteten Inline-Daten und eigenständigen (mit Verweisen angeforderten) Grafik-Dokumenten demonstrieren.


(2) Mini-Webseite mit Inline-Grafik

Laden sie den HTML-Quelltext der ↗ Mini-Webseite mit Inline-Grafik (oben rechts).

Speichern sie den Text in einer Datei *.html am eigenen Arbeits-PC (z.B. als inline.html).

Öffnen sie die Datei mit einem Browser-Programm:
Die Mini-Webseite wird mit Grafik angezeigt.
Diese Version ist ohne weitere Maßnahmen portabel.


Résumé

Die Experimente zeigen, dass man zusammen mit (konventionellen) Webseiten-Dateien immer auch die darin angeforderten Dokumente (Grafik-Dateien, Audio-Dateien, Videos, ...) transportieren muss.

Beim Download wird das meist vom Browser-Programm berücksichtigt: Wenn man eine Webseite als Datei speichert, dann werden normalerweise auch alle damit angeforderten Dateien in einem zusätzlichen Verzeichnis (Ordner) gespeichert.

Beim Upload eigener Webseiten auf den Server eines Web-Providers muss man sich selbst darum kümmern und zusätzlich zur HTML-Datei auch alle darin verwendeten (mit Verweis angegebenen) Dateien hochladen.


Spezialfall Inline-Daten

Man kann binäre Grafik-Daten direkt (Inline) in den HTML-Quelltext einer Webseite einfügen.
In diesem Fall sind auch die Grafik-Daten im HTML-Code enthalten und der Browser kann Webseite + Grafik anzeigen, ohne zusätzlich eine Grafik-Datei zu laden.
Details zur → Base64-Methode und zu ihrer Anwendung mit Inline-Daten.

Die dazu notwendige Base64-Codierung braucht allerdings zusätzliche Prozessor-Zeit zur Codierung und Decodierung und ca. 1/3 mehr Daten zur Übertragung.
Die Programmiersprache PHP und die Datenbanken MariaDB bzw. MySQL bieten Funktionen zur Base64-Codierung.

Diese Methode der Einbettung binärer Dateni ist nur für wenige spezielle Aufgaben sinnvoll, z.B. um eine Web-App von externen Resourcen unabhängig und portabel zu machen.

Javascript Web-API


Binäre Daten (z.B. von Pixel-Bildern) werden dabei meist → Base64-codiert und lassen sich danach Inline in HTML- oder XML-Quelltext einbetten.

Die Details dieser Methoden erfordern fortgeschrittene Kenntnisse von Javascript.