- Grafiken und Visualisierungen, die wenige Farben haben und/oder einfache Formen beinhalten, sollten als PNG gespeichert werden.
- Farbintensive Bilder und vor allem Fotografien sollten als JPG gespeichert werden
GIF, WebP, Vektoren sollten im üblichen Redaktionsalltag bei der Bearbeitung von Inhalten auf der Website keine Rolle spielen. Diese Dateiformate kommen für den erfolgreichen Einsatz mit Bedingungen, die technisch erfüllt werden müssen. WebP braucht zum Beispiel einen technisch geregelten Fallback für alle Browser, die das Format nicht unterstützen.
- Bilddateien dürfen nie in der "Print-Version" hochgeladen werden. Am besten schon vor dem Upload ins CMS oder das DAM als "Web-Version" speichern.
- Bilddateien für die norisbank brauchen keine Meta- und Exif-Daten (Standort der Aufnahme, Datum der Aufnahme, genutzte Kamera, …); diese sollten durch Tools wie TinyPNG oder entsprechende Features im CMS beim Upload automatisch gelöscht werden (=verlustfreie Komprimierung).
- 150kb als maximale Dateigröße von Bilddateien ist empfehlenswert
- Der Dateiname spielt eine wichtige Rolle für das spätere Ranking in der Bildersuche
- Er sollte genau das repräsentieren, was auf dem Bild zu sehen ist. Außerdem wird das Bild mit dem Dateinamen in den Gesamtkontext einer Webseite gestellt
- Für Google und andere Suchmaschinen bietet der Name eine wichtige Orientierung, um das Thema der Webseite zu erfassen
- Bsp.: Bild mit Katze. Dateiname: katze.jpg
Ergänzungen werden mit Bindestrichen hinzugefügt
Bsp.: Bild mit schwarzer Katze. Dateiname: schwarze-katze.jpg
- Zu kleine Bilder wie Thumbnails oder Voransichten haben keine große Chance, in der Bildersuche gut zu ranken
- Es hat sich eine Richtgröße von 300 Pixeln für mindestens eine Seite des Bilde etabliert
Eine generelle Vorgabe zum Bildformat kann nicht getroffen werden
- UX / UI muss berücksichtigt werden
- Möglichkeiten im CMS müssen berücksichtigt werden
- Das Bildformat muss zur Botschaft des Inhaltes passen. Eine "Schritt für Schritt Infografik" ist naturgemäß "höher als breit".
- Mit welchen Geräten werden Nutzer:innen (wahrscheinlich) den Inhalt konsumieren? Auf mobilen Geräten (und für Social Media) ist ein hochformatiges Bild häufig die bessere Alternative zu 4:3 oder 16:9 Bildern
- Auch die URL des Bildes spielt bei Bilder SEO eine Rolle. Es empfiehlt sich, eine thematisch relevante Ordnerstruktur zu verwenden
Bsp.: www.beispielseite.de/kredit/modernisierungskredit/modernisierung.jpg
- Wer die Indizierung von Bilddateien fördern möchte, kann alle Bild-URLs auch in einer separaten XML Sitemap hinterlegen und diese in der Google Search Console hochladen
Einschätzung von diva-e: Das ist fachlich korrekt. Passt das aber nicht in die vorliegenden Gegebenheiten, hier würden wir keinen Aufwand betreiben, um das zu erreichen. Der Impact ist einfach zu gering.
- Für das Ranking einzelner Bilder ist der das Bild umgebende Content wichtig. Hier spielt vor allem die Verwendung relevanter Keywords eine Rolle. Bilder und Content müssen sich ergänzen.
- alt-Attribut: Die klassische Funktion des alt-Attributs ist es, ein Bild zu beschreiben, wenn es aufgrund von technischen Problemen nicht im Browser angezeigt werden kann. Demnach sollte das Alt-Attribut im Idealfall genau den Inhalt des Bildes wiedergeben und das Hauptkeyword enthalten.
INFO: > Nutzer:innen, die einen Screenreader nutzen und das Bild nicht sehen können, bekommen diesen Text vorgelesen. Neben SEO spielt dieses Attribut auch für die Barrierefreiheit eine essentielle Rolle.
- title-Attribut: Auch das title-Attribut sollte verwendet werden, um ein relevantes Keyword unterzubringen. Der Title ist jedoch primär zur Verbesserung der Usability und weniger als großer SEO-Faktor wichtig und kann als optional betrachtet werden.
- Markup: Bilder können mit Hilfe von Markup nach schema.org mit strukturierten Daten versehen werden. Das ist keine redaktionelle Aufgabe und muss vom CMS automatisiert geschehen.
Grundlegend: Für Infografiken gelten dieselben Vorgaben bezüglich SEO wie für alle weiteren inhaltlich relevanten Bilder.
Infografiken gibt es in unterschiedlichen Formaten. Neben klassischen Bildern können Infografiken auch animierte und interaktive Elemente sein oder auch in Form von Live-Dashboards in Looker Studio vorliegen. Die folgenden Empfehlungen beziehen sich auf klassische Grafiken im PNG-Format.
- Input kann von "jedem" kommen - die Erstellung der Infografik sollte in der Bildredaktion / bei Designern stattfinde - sie kennen alle CI-Vorgaben der Firma
- Wiedererkennungswert schaffen
○ Logo integrieren
○ Brand-Farben nutzen
○ Bildelemente, die zur Marke gehören, in der Grafik nutzen falls es zum Konzept passt
- Weniger ist mehr: Überladene Infografiken erschlagen Nutzer:innen und lassen die Aussagekraft schwieriger erfassen
○ "Sweet spot" zwischen Grafik und Text finden - idealerweise ist beides reduziert und ergänzt sich
- Infografiken müssen auch ohne redaktionellen Kontext funktionieren. Infografiken sollten auch Überschriften beinhalten.
- Auf der Grafik eine (Kurz)URL angeben, wo mehr Kontext zu finden ist
Für Seeding-Infografiken relevant:
- Copyright-Vorgaben auf der Grafik benennen, um beim Teilen eine Rechtssicherheit zu schaffen
○ Je weniger restriktiv beziehungsweise je freier die Nutzungsrechte, desto besser
- Embed-Code zur Verfügung stellen; mindestens HTML-Code und BB-Code zum Kopieren sollten es sein. In unmittelbarer Nähe zur Infografik.
- Beispiel: https://www.media-affin.de/blog/infografik-erstellen