Internetkurse Köln

Seit der Erfindung der digitalen Fotografie spucken Fotoapparate Bilder nicht nur in immer opulenteren Dateigrößen aus, die für die Nutzung im Internet ungeeignet sind. Sie produzieren auch so unschöne Dateinamen wie DSC_2016.jpg. Auch diese haben im Internet nichts verloren, sind dennoch aller Orten immer wieder anzutreffen. Nachdem wir uns kürzlich mit der Bearbeitung von Bildern für das Internet beschäftigt haben und dies ab 2016 auch als Abendkurs anbieten, beschäftigten wir uns heute mit dem Aspekt des richtigen Benennens von Bildern.

Warum Bilder vor dem Veröffentlichen umbenennen?

Jedes Bild, das Sie auf Ihrer Website veröffentlichen, bringt seinen Dateinamen mit. Dieser wird zum maßgeblichen Teil der Adresse (URL), über die dieses Bild aufzurufen ist. Denn natürlich bekommt auch jedes Bild, genauso wie jeder Beitrag oder jede Seite, eine eigene Adresse. Im WordPress-Sprech nennt sich diese Permalink, ohne den WordPress einzelne Elemente einer Website nicht aufrufen könnte.

Der Permalink eines Bildes könnte unter der Motorhaube von WordPress also zum Beispiel wie folgt lauten:

www.ihre-website.de/wp-content/uploads/2016/01/engel.jpg

Sowohl Sie selbst als auch Ihre Nutzer, zu denen auch die Suchmaschinen gehören, wissen sofort, womit sie es zu tun haben: mit dem Bild eines Engels.

Ohne vorherige Umbenennung des Dateinamens könnte der Permalink für das dasselbe Bild aber so lauten:

www.ihre-website.de/wp-content/uploads/2016/01/DSC_666.jpg

Im Beispiel sagt der Dateiname DSC_666.jpg nicht nur nichts über den Bildinhalt aus – er verspricht sogar das genaue Gegenteil (666 ist bekanntlich eine recht teuflische Zahl…). So oder so: Diese Benennung ist sinnlos und hilft weder Ihnen, noch Ihren Lesern oder den Suchmaschinen weiter.

Geben Sie Ihren Bildern also sprechende Namen, die konkrete Hinweise auf das Bild liefern. Wenn Sie Ihre Bilder richtig benennen, hilft dies Ihnen und der Nutzererfahrung.

Konkrete Tipps, wie Sie Bilder richtig benennen

• Wenn Sie Ihre Bilddateien neu benennen, vergeben Sie gut lesbare Titel: koala-im-zoo.jpg liest sich besser als koalaimzoo.jpg.
• Bedenken Sie auch, dass es ohne Bindestriche zu unterschiedlichen Lesarten kommen kann: gruenderinsel.jpg kann Grün der Insel bedeuten oder Gründer Insel.
• Benutzen Sie auf keinen Fall Leerzeichen. Manche Systeme ersetzen diese durch die Zeichenfolge %20, das kann zu Problem führen.
• Nutzen Sie grundsätzlich nur Kleinschreibung – unterschiedliche Systeme deuten Groß- und Kleinschreibung auf unterschiedliche Weise.
• Verzichten Sie auf Umlaute (ue statt ü etc.) und Sonderzeichen wie \ / : * ? “ < > |.
• Und beachten Sie, dass manche Systeme eine Längenbeschränkung von 255 Zeichen haben. Ihr Dateiname muss ja auch kein Roman sein.

Titel, Beschreibung und alt-Attribut – WordPress hilft

Nach dem Hochladen eines neuen Bildes für Ihre WordPress Website bietet das System Ihnen die Möglichkeit an, die Detailanhang-Details zu bearbeiten. WordPress stellt dafür einige Felder bereit, die es auszufüllen gilt. Diese Felder dienen unterschiedlichen Zwecken. Allen voran ist die Barrierefreiheit zu nennen.

Was bedeutet Barrierefreiheit?

»Barrierefreiheit schließt sowohl Menschen mit und ohne Behinderungen als auch Benutzer mit technischen (Textbrowser oder PDA) oder altersbedingten Einschränkungen (Sehschwächen) sowie Webcrawler ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen«, heißt es bei Wikipedia. Auch weist die Enzyklopädie darauf hin, dass Menschen mit Behinderung statistisch gesehen überdurchschnittlich häufig im Internet anzutreffen sind.

Es macht also extrem viel Sinn, das Angebot auf die Bedürfnisse dieses Nutzerkreises anzupassen, auch wenn Sie keine Behörde repräsentieren, die laut der Barrierefreie-Informationstechnik-Verordnung verpflichtet ist, die in dieser Verordnung definierten Kriterien einzuhalten. Grundlage für die Verordnung ist im Übrigen die W3C-Empfehlung (Web Content Accessibility Guidelines (WCAG) 2.0).

Für uns bedeutsam ist in diesem Zusammenhang die Forderung, zu veröffentlichten Bildern einen das Bild beschreibenden Text zur Verfügung zu stellen, der zum Beispiel von Hilfssoftware oder den Suchmaschinen ausgelesen wird. So erhalten auch Menschen mit Sehbehinderung die Information, was auf dem Bild zu sehen ist, und Suchmaschinen können das Bild bei passenden Suchanfragen ausliefern. Das entsprechende Element, das es auszufüllen gilt, ist der Alternative Text, das sogenannte alt-Attribut.

Die Felder der WordPress Dateianhang-Details im Einzelnen

Titel: Der Titel eines Bildes stellt die Überschrift eines Bildes dar, die nicht nur in der Medienliste im Backend, sondern auch auf den einzelnen sogenannten Anhang-Seiten im Frontend zu sehen ist. Für jedes Bild stellt WordPress eine solche Anhang-Seite bereit.

Früher diente der Titel im HTML-Code der Webseite im Rahmen des img-tags als title-Attribut und sorgte dafür, dass beim Fahren der Maus über das Bild der sogenannte Tool-Tip den hinterlegten Text anzeigte. Dies unterstützt WordPress seit der Version 3.5 allerdings nicht mehr.

Die Beschriftung erscheint immer unter dem Bild, wenn Sie dieses in einem Beitrag oder einer Seite einbinden. Dies gilt auch im Rahmen einer Galerie. In den klassischen Medien wird dieses Feld auch Bildunterschrift genannt. Wenn Sie das Bild von einem Fotografen gekauft haben, gehört hier auch der Hinweis auf seine Urheberschaft hinein.

Alternativtext: Der Alternativtext liefert den Inhalt für das alt-Attribut Ihres Bildes. Um das besser zu verstehen, lohnt es sich, einen Blick auf den HTML-Code zu werfen, den Ihre WordPress Website für Sie produziert. Für das Bild erstellt sie den sogenannten image-tag, der unter anderem die Quelle (src für Source) und das alt-Attribut benennt:

<img src=“http://www.ihre-website.de/wp-content/uploads/2016/01/engel.jpg“ alt=“Der hübscheste Engel, den die Welt je gesehen hat“ />

Was auch immer Sie in das Feld für den Alternativtext eingeben, gibt WordPress für Sie als Wert für dieses Attribut aus. Suchmaschinen und Hilfsprogramme für Menschen mit Behinderung nutzen diese Angabe.

Beschreibung: Die Beschreibung erscheint nur auf der Anhangseite und ist für weiterführende Infos zum Bild gedacht. Hier können Sie alle Infos hinterlegen, die Sie Ihren Lesern zusätzlich zur Verfügung stellen möchten, so zum Beispiel den Aufnahmeort, mit welchen Einstellungen Sie das Bild aufgenommen haben oder die Benennung der abgelichteten Personen.

Hochgeladen von: Hier sehen Sie, wer das Bild in WordPress hochgeladen hat. Falls mehrere Autoren an einer Webseite arbeiten, ist diese Angabe mitunter interessant.

Hochgeladen zu: Hier erfahren Sie, ob Sie das Bild schon in einem Beitrag verwendet haben. Allerdings ist diese Angabe ein wenig tricky: Sollten Sie das Bild gar nicht mehr im Rahmen dieses Beitrages nutzen, behauptet WordPress hier immer noch, dass dem so sei.

Insgesamt gilt es also, für jedes einzelne Bild einige Angaben zu machen. Die Mühe lohnt sich aber in mehrfacher Hinsicht: Ihre Leser erfahren direkt am Bild, wen oder was sie hier sehen. Google freut sich über die Angaben und kann Ihre Bilder einordnen. Und Menschen mit eingeschränkten Sehvermögen können dank des Alternativtextes ebenfalls nachvollziehen, was Ihre Bilder zeigen.

Beitragsbild: Thorsten Schiller