Bilder für Besondere Zwecke

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. Im Allgemeinen benötigen Sie diesen Ansatz, wenn Sie mit Online-Shops zu tun haben. Benutzer sind es gewohnt, auf ein Bild zu klicken und eine Karte mit einer vollständigen Produktbeschreibung und einem Preis zu erhalten.

Um ein Bild klickbar zu machen, können Sie das <img>-Tag in ein <a>-Tag einfügen. Zum Beispiel:

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

Bildunterschrift

Sie können die HTML-Elemente figure und figcaption verwenden, um einer Bildunterschrift auf einer Webseite ein Bild zuzuordnen. Hier ist ein Beispiel:

• figure: Element enthält sowohl die figcaption als auch die img Elemente;
• figcaption: gibt den Bildunterschriftstext an, der für Benutzer sichtbar ist;
• img: gibt das anzuzeigende Bild an.

Bildoptimierung

Dies ist wichtig für Webseiten, bei denen große Bilddateien die Ladezeiten der Seite verlangsamen und die Website träge wirken lassen können. Indem Sie die folgenden Tipps befolgen, können Sie die Gesamtleistung und Zugänglichkeit der Website verbessern.

• Bilder auf die passende Größe anpassen. Passen Sie Bilder auf die Größe an, in der sie auf der Webseite angezeigt werden, anstatt große Bilder hochzuladen und sie mit HTML oder CSS zu skalieren;
• Verwenden Sie geeignete Dateiformate. Im Allgemeinen werden JPEGs für Fotografien, PNGs für Grafiken und Bilder mit Transparenz verwendet. Vermeiden Sie größere BMP- oder TIFF-Dateien;
• Bilder komprimieren. Es gibt eine Vielzahl von Online-Tools, die Bilder komprimieren können, ohne die Qualität zu beeinträchtigen. Machen Sie dies, bevor Sie Bilder auf die Website hochladen.

Hinweis

Sie können die folgenden Quellen verwenden, um Bilder zu komprimieren: Rastergrafik-Optimierung, Vektorgrafik-Optimierung. Was ist der Unterschied zwischen ihnen? - Betrachten Sie dies im nächsten Kapitel.