Klickbare Bilder

Klickbare Bilder sind Bilder auf einer Webseite, die angeklickt werden können, typischerweise um zu einer anderen Webseite zu navigieren oder andere Aktionen auszuführen. Dieses Vorgehen ist insbesondere bei Online-Shops üblich. Nutzer sind es gewohnt, auf ein Bild zu klicken und eine Karte mit vollständiger Produktbeschreibung und Preis zu erhalten.

Um ein Bild klickbar zu machen, kann das <img>-Tag innerhalb eines <a>-Tags platziert werden. Zum Beispiel:

In diesem Beispiel gibt das <a>-Tag die URL an, zu der im href-Attribut verlinkt wird, und das <img/>-Tag bestimmt das anzuzeigende Bild. Wenn der Nutzer auf das Bild klickt, navigiert der Browser zur im href-Attribut angegebenen URL.

Bildunterschrift

Mit den HTML-Elementen figure und figcaption kann einer Abbildung auf einer Webseite eine Bildunterschrift zugeordnet werden. Hier ein Beispiel:

• figure : Element enthält sowohl die figcaption - als auch die img -Elemente;

• figcaption : Gibt den für Benutzer sichtbaren Bildunterschriftentext an;

• img : Gibt das anzuzeigende Bild an.

Bildoptimierung

Dies ist wichtig für Webseiten, da große Bilddateien die Ladezeiten verlangsamen und die Website träge wirken lassen können. Durch die Beachtung der folgenden Hinweise kann die Gesamtleistung und Zugänglichkeit der Website verbessert werden.

• Bilder auf die passende Größe skalieren . Bilder auf die Größe anpassen, in der sie auf der Webseite angezeigt werden, anstatt große Bilder hochzuladen und sie per HTML oder CSS zu skalieren;

• Geeignete Dateiformate verwenden . In der Regel werden JPEGs für Fotografien, PNGs für Grafiken und Bilder mit Transparenz verwendet. Größere BMP- oder TIFF-Dateien vermeiden;

• Bilder komprimieren . Es gibt zahlreiche Online-Tools, mit denen sich Bilder ohne Qualitätsverlust komprimieren lassen. Dies sollte vor dem Hochladen der Bilder auf die Website erfolgen.

Hinweis

Folgende Quellen können zur Bildkomprimierung genutzt werden: Rastergrafik-Optimierung, Vektorgrafik-Optimierung. Was ist der Unterschied zwischen beiden? - Dies wird im nächsten Kapitel behandelt.