Was sind HTML-Grafiken?
In der HyperText Markup Language (HTML) gibt es verschiedene Möglichkeiten, Grafiken in einem HTML-Dokument anzuzeigen und zu erstellen. Die am häufigsten verwendete Art von HTML-Grafiken sind Bilder, die direkt auf der HTML-Seite platziert werden. Diese werden als Inline-Bilder bezeichnet. Es gibt jedoch auch andere Methoden - beispielsweise die Verwendung einer Skriptsprache oder einer kompilierten Webanwendung - mit denen dieselben Ergebnisse erzielt werden können. Für dynamisch generierte Grafiken für Diagramme oder Grafiken können skalierbare Vektorgrafiken (SVG) verwendet werden. Es gibt auch einige grundlegende HTML-Grafiken, die von der Sprachspezifikation unterstützt werden und keine externen Dateien wie horizontale Linien und Aufzählungszeichen in einer Liste erfordern. Komplexere HTML-Grafiken können mithilfe einer Skriptsprache, Cascading Style Sheets (CSS) und des HTML Canvas-Elements erstellt werden. Dies bietet eine native Option für einige Effekte, die zuvor nur über externe Objekte und Plug-Ins möglich waren.
Inline-HTML-Grafiken sind bei weitem die am häufigsten verwendete und einfachste Möglichkeit, ein Bild in ein HTML-Dokument einzufügen. Dies umfasst im Wesentlichen das Erstellen eines Bilds in einem Bildeditor, das Speichern in einem häufig verwendeten Dateiformat und das Angeben des Namens und des Speicherorts der Bilddatei im HTML-Dokument mit dem IMG-Tag. Abgesehen von der Einfachheit, eine Inline-Grafik in ein Dokument zu integrieren, kann die Rendering-Engine in den meisten Webbrowsern die Grafik problemlos in komplexeren Seitenlayouts platzieren, ohne dass Formatierungsartefakte auftreten. Eine Komplikation, die bei einem Inline-Bild auftreten kann, besteht darin, dass die Bildgröße möglicherweise so skaliert werden muss, dass sie bei der Anzeige auf außergewöhnlich große oder kleine Bildschirme passt, wodurch möglicherweise die Bildqualität beeinträchtigt wird.
Skalierbare Vektorgrafiken sind ein komplexerer Stil von HTML-Grafiken. Ein SVG-Bild wird durch Definieren von Formen, Pfaden und Strichstärken erstellt und sofort beim Anzeigen des Dokuments gezeichnet. Dies macht SVG zu einer guten Wahl für die Anzeige dynamischer Daten wie Diagramme oder Grafiken, macht ihre Verwendung für andere Grafiktypen wie die Erstellung fotorealistischer Bilder jedoch sehr unpraktisch. Für einfache HTML-Grafiken und in Situationen, in denen eine externe Bilddatei nicht geladen werden kann, ist SVG möglicherweise eine praktikable Option.
Mit der Entwicklung des HTML 5-Sprachstandards (HTML5) können dynamische HTML-Grafiken innerhalb der HTML-Basissprache erstellt werden. Dies erfolgt durch direktes Zeichnen auf einer speziellen Oberfläche, die als Canvas in einem HTML-Dokument bezeichnet wird. Mithilfe von JavaScript® und CSS können mit dieser Methode Animationen oder Spiele erstellt werden, die auf Benutzereingaben reagieren oder Grafiken anpassen können, abhängig von den Einstellungen des Webbrowsers oder anderen Daten. Das Erstellen einer HTML5-Grafik kann jedoch eine komplexe Prozedur sein, die zu langen Skriptcode-Blöcken führen kann, die auf einigen Computern oder Geräten möglicherweise sehr langsam ausgeführt werden.