Wofür steht das ALT-Attribut in IMAGE-TAGs?
Worin besteht der Unterschied zum TITLE-Attribut?
Was bedeuten die Attribute LONGDESC und LOWSRC?
Für wen ist das von Interesse?
Der Beantwortung dieser Fragen widmen wir uns in diesem kleinen Artikel.
Das ALT-Attribut
Vereinfacht soll das ALT-Attribut (ALT = Alternativ) eine alternative Bildbeschreibung für Blinde beinhalten. Mit „blind“ meine ich hier neben Sehbehinderten auch sämtliche Suchmaschinen-Bots, die ebenfalls nicht „sehen“ können.
Ein korrekt ausgefülltes ALT-Attribut bedeutet zwar keine extreme Verbesserung im Suchmaschinen-Ranking, trägt aber dennoch einen wichtigen Teil zur HTML-Konformität und Barrierefreiheit bei. Zusätzlich kann die Bildsuche bei Suchmaschinen – ein sinnvoll ausgefülltes ALT-Attribut vorausgesetzt - Ihre Produktfotos passend zu den Suchanfragen anzeigen.
Weiterhin verwenden sog. Voicebrowser und Braillezeilen-Lesegeräte das ALT-Attribut zur Bildbeschreibung. Layoutbilder, die nicht zum kontextuellen Inhalt der Seite gehören, sollten daher ein leeres ALT-Attribut beinhalten (ALT=““), damit Ausgaben wie „... HintergrundVerlauf.jpg“ den Lesefluss dieser Ausgabegeräte nicht negativ beeinflussen.
Das ALT-Attribut sollte generell 80 Zeichen nicht überschreiten!
Das TITLE-Attribut
Das TITLE-Attribut wird als Tooltip angezeigt, wenn der Nutzer mit der Maus darüber verweilt. Es macht am meisten Sinn, wenn dahinter ein Link liegt und der Nutzer informiert wird, WOHIN verlinkt wird bzw. WAS passiert, wenn er darauf klickt.
Bei Ihrem Onlineshop könnten vermutlich fast alle TITLE-Attribute mit „zum Vergrößern anklicken“ ausgefüllt sein. Im Gegensatz zum ALT-Attribut ist das TITLE-Attribut für Suchmaschinen eher nebensächlich.
Das LONGDESC-Attribut
Das LONGDESC-Attribut beinhaltet einen Pfad zu einer umfassenden Bildbeschreibung in Form eines HTML-Dokuments (LONGDESC = LONG DEScription). Im Grunde genommen ist dieses Attribut ein aufgebohrtes ALT-Attribut und findet eine sinnvolle Anwendung in Bildergalerien, die nicht von Text umgeben sind, aber deren Bilder einer Beschreibung bedürfen, für die die rund 80 Zeichen das ALT-Attributs nicht ausreichen.
Für Fotos von Gemälden könnten z.B. Hintergrundinformationen, Interpretationen und ähnliches hinterlegt werden.
Das verwendete HTML-Dokument sollte ganz einfach mit Überschriften <h1>, <h2> … und Fließtext in <p>-TAGs aufgebaut sein.
Das LOWSRC-Attribut
Das LOWSRC-Attribut (LOWSRC = LOWSouRCe) kann wie das SRC-Attribut einen Dateipfad zu einer Grafik enthalten. Zu 56k-Modem-Zeiten machte es Sinn, dort den Pfad zu einer klein aufgelösten oder in der Qualität deutlich verringerten Version des eigentlichen Bildes zu hinterlegen. Auch Schwarz/Weiß Bitmap-Grafiken waren sehr beliebte Kandidaten, weil deren Dateigröße einen Bruchteil der eigentlichen Grafik ausmachte.
Zu Unrecht fristet das LOWSRC-Attribut ein Schattendasein. Denn die Einsatzmöglichkeiten bei Webseiten mit vielen Bildern (z.B. Produktkategorie-Übersichts-Seiten) sind vielfältig.
TIPP: Hinterlegen Sie z.B. bei allen Produktbildern den Pfad zu Ihrem Logo als LOWSRC-Attribut, so dass es als Platzhalter beim Laden der Bilder erscheint.
Beispiel für das Ausfüllen der ALT- und TITLE-Tags
Sie verkaufen in Ihrem Online-Shop eine Harpune speziell für den Walfang. Dann wäre folgender ALT-Tag neben dem Bild sinnvoll: „Harpune - speziell für den Walfang“. Damit wissen Sehbehinderte und Suchmaschinen-Bots, WAS auf dem Bild zu sehen ist.
Im TITLE-Attribut könnte in der Produktauflistung „für Produktdetails anklicken“ und in der Detailansicht des Produkts „zum Vergrößern anklicken“ stehen, sofern Ihr Onlineshop diese Funktionen an den entsprechenden Stellen bietet.
Fazit
Mit korrekt ausgefüllten Attributen Ihrer Bilder können Sie einerseits gezielt Ihre Produkte bei Suchanfragen anzeigen lassen und anderseits die Benutzerfreundlichkeit Ihrer Seite für Sehende und Sehbehinderte in Bezug auf das Bildmaterial maximieren.
Weitere Artikel
Kostenlose Bildbearbeitungstools im Web gibt es mittlerweile wie Sand am Meer. Für fast jeden Einsatzweck findet sich ein mehr oder weniger...
Wenn Sie ein Produktbild veröffentlichen wollen, müssen Sie für die Bildvorbereitung schon wissen, ob es in einem Katalog...
Wer kein Fotograf ist, dem fehlt oftmals gutes Bildmaterial, um seine Website, den Onlineshop oder Katalog usw. aufzupeppen....
Was ist Bildrauschen?
Wie lässt sich Bildrauschen vermeiden?
Wie lässt sich Bildrauschen reduzieren?/p...
Filter sind ein wichtiger Bestandteil der digitalen Bildbearbeitung. Kein Grafikprogramm das nicht mit einer Fülle an unterschiedlichsten...
Bei “Produktfotos machen” denken die meisten an Fotostudios, komplexe Aufbauten und professionelle Kameras. Produktfotos, die unter...
Eines der wichtigsten und am häufigsten verwendeten Formate für Bilddateien ist JPEG. Aus dem digitalen Alltag kaum mehr wegzudenken,...
Bildbearbeitungsprogramme und Grafiktools gibt es wie Sand am Meer. Die Professionellen unter Ihnen leisten Erstaunliches, haben aber ihren...
JPG, GIF, PNG, TIFF, oder PSD? Die Antwort: "Kommt drauf an."
Denn tatsächlich hat jedes Bildformat Vor- und Nachteile....
Blog durchsuchen
Bildbearbeitung
Themen
Tipps & Tricks
14. September 2011
Handschuhe
Um zu vermeiden, dass auf Produkten mit glatten Oberflächen unschöne Fingerabdrücke zu sehen sind, ziehen Sie einfach ein Paar weiße Stoffhandschuhe an. Erst dann stellen Sie das Produkt auf den Platz, an dem es fotografiert werden soll.
Stoffhandschuhe bekommen Sie in jedem gut sortierten Drogeriemarkt für 2-3 Euro. Zusätzlich können Sie mit den Handschuhen das Objekt vor dem Aufstellen nochmals polieren.
Kommentar hinzufügen