Arbeiten mit Klickbaren Bildern, Bildunterschriften und Optimierung

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. Diese Methode wird häufig bei Online-Shops verwendet. 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:

• View the Code
• Open the Live Page

In diesem Beispiel gibt das <a>-Tag die URL an, zu der im href-Attribut verlinkt wird, und das <img/>-Tag gibt das anzuzeigende Bild an. 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 eine Bildunterschrift einem Bild auf einer Webseite zugeordnet werden. Hier ein Beispiel:

• figure: Element enthält sowohl die Elemente figcaption als auch img;
• figcaption: gibt den Beschriftungstext an, der für Benutzer sichtbar ist;
• 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 Tipps kann die Gesamtleistung und Zugänglichkeit der Website verbessert werden.

• Bilder auf die passende Größe anpassen. Bilder auf die Größe zuschneiden, in der sie auf der Webseite angezeigt werden, anstatt große Bilder hochzuladen und sie mit 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.