Was ist ein Inline-Bild?
Ein Inline-Bild ist ein Grafikbild, das in eine Webseite eingefügt wird, um eine visuelle Wirkung zu erzielen, Informationen bereitzustellen oder einen Hyperlink darzustellen. Inline-Bilder sind normalerweise in den Formaten GIF, JPEG oder PNG verfügbar. Sie werden mithilfe des Daten-URI-Schemas in eine Webseite eingebunden.
Daten-URIs ermöglichen das Einbetten von kleinen Daten, die vom Browser sofort abgerufen werden können. Inline-Bilder werden vom Browser zusammen mit dem HTML-Code abgerufen und als Teil des Webdokuments angezeigt. Damit der Browser die Bilder ohne viel Zeit und Mühe abrufen und anzeigen kann, empfiehlt es sich, kleine Inline-Bilder zu verwenden.
Größere Bilder verlangsamen die Ladezeit und verursachen, dass die Site lange auf dem Bildschirm angezeigt wird. Die meisten Webbesucher haben nicht die Geduld, herumzuhängen, um dies zu sehen. Dies würde den Site-Verkehr beeinträchtigen.
HTML-Inline-Bilder stammen vom Server der Website, auf der sie angezeigt werden sollen, oder von anderen externen Servern. Die Verwendung von Inline-Bildern aus externen Quellen ist umstritten, da dies ohne Erlaubnis erfolgen kann. Das img-Tag wird verwendet, um Inline-Bilder in Absätze und Überschriften der Webseite einzufügen. Das img-Tag kann nicht in frei schwebender Form verwendet werden. Es muss in einem anderen Element eingeschlossen sein.
Das erforderliche Attribut des Tags img ist das Attribut src. Das Attribut src gibt die Webadresse oder URL an, von der der Browser die Bilddatei abrufen kann. Neben dem Attribut src können HTML-Inline-Bilder durch drei optionale Attribute definiert werden. Dies sind alt, align und ismap.
Das alt-Attribut bietet eine Inline-Bildtextalternative. Wenn der Browser des Betrachters keine Grafiken unterstützt, wird der Text anstelle des Bildes angezeigt. Die Verwendung des alt-Attributs wird dringend empfohlen.
Der alt-Attributwert kann eine leere Zeichenfolge sein. Wenn beispielsweise ein dekoratives Bild vorhanden ist, ist es nicht erforderlich, einen alternativen Text dafür bereitzustellen. Daher kann der Wert des alt-Attributs leer gelassen werden.
Der Inline-Bildstil kann mit dem align-Attribut festgelegt werden. Das align-Attribut teilt dem Browser mit, wo das Inline-Bild in Bezug auf den Text auf der Webseite angezeigt werden muss. Das Inline-Bild kann am oberen, mittleren oder unteren Rand des angrenzenden Texts auf der Webseite ausgerichtet werden.
Mit dem Attribut ismap kann ein Inline-Bild als aktive Imagemap markiert werden. Dies bedeutet, dass verschiedene Teile des Bildes dazu gebracht werden können, verschiedene Aktionen zu erzeugen, wenn jemand auf die verschiedenen Teile klickt. Wenn zum Beispiel ein Inline-Bild Erde und Saturn zeigt, kann das Klicken auf Erde zu Informationen über Erde und das Klicken auf Saturn zu Informationen über Saturn führen.
Im Gegensatz zu den Attributen "alt" und "align" funktioniert das Attribut "ismap" nicht durch bloße Aufnahme in das Tag "img". Hierfür ist eine Konfiguration auf dem Server erforderlich. Möglicherweise sind auch Programmierkenntnisse erforderlich.