In der Regel machen Bilder mehr als 60% einer Website aus. Hauptsächlich werden sie für die Optik eingesetzt, im Web haben sie aber auch einen wesentlichen Einfluss auf die Lesbarkeit, Ladezeit und SEO.
Wortwörtlich: „Ein Bild sagt mehr als 1000 Worte.”
Was sind gängige Ranking-Faktoren für Bilder?
- Aussagekräftiger Dateiname
- Bildgrößen
- ALT-Text
- Bezug zum Inhalt
Dabei geht es nicht ausschließlich darum, in der Bildersuche von Google gefunden zu werden. Denn seit einiger Zeit tauchen Bilder auch in der regulären Suche auf.
Natürlich muss die generelle Bildersuche nicht das Endziel sein. Wenn dein Text z. B. Bilder beinhaltet, die zum Thema passen, sollten diese über ein ALT-Attribut passend benannt werden. Dieses ALT-Attribut sollte eher zu dem generellen Thema passen und muss nicht direkt auf das Bild bezogen sein.
Der richtige Dateiname
Bildnamen bilden eine eigene URL. Meist ist der Dateiname auch der Titel eines Bildes. Deshalb sollte jedes Bild eine eigene, einfache Benennung aufweisen. Leerzeichen und Unterstriche sollen dabei nicht verwendet werden. Im Optimalfall verwendet man Bindestriche. Auch auf Großschreibung und Umlaute sollte man auf jeden Fall verzichten.
Beispiel für einen Dateinamen: bilder_mehr-als-ein-image-fuer-websites.jpg
Bildgrößen und Varianten
Sowohl zu große als auch zu kleine Bilder wirken sich negativ auf das Ranking aus. Hier ist zu beachten, dass zu kleine Bilder schon wegen ihrer Darstellung weniger Klicks und so weniger Beachtung bekommen. Zu große Bilder beeinträchtigen die Ladezeit einer Seite.
Empfehlenswert ist eine Größe von max. 1 MB. Weniger ist mehr.
Bilder sollten maximal so groß sein, wie sie am Ende eingebunden werden.
CMS wie WordPress, TYPO3, Contao oder Pimcore haben eigene Funktionen, um Bilder passend bereitzustellen. Hierbei werden Bilder passend zu Breakpoints ausgeliefert. Ein Bild in der Desktop-Ansicht, das hier vielleicht maximal 400 px einnimmt, kann am iPad in der vollen Breite benötigt werden, wodurch hier in Fällen 750 px Breite nötig sind. Smarte Systeme geben Dateien automatisch passend aus.
Teilweise können Suchmaschinen auch Texte in Bildern erfassen. Von dieser Methode wird aber dennoch abgeraten, da dies momentan einfach nicht zuverlässig genug funktioniert.
Bildkompression
Dateigrößen von Bildern lassen sich durch Plugins oder andere Tools zur Kompression weiter verringern. Dabei wird die Größe bei annähernd gleicher Qualität oft noch bedeutend verkleinert, da auch unnötige, nicht sichtbare Bild-Metadaten für das Web entfernt und je nach Einstellungen Farben zusammengefasst werden. Einen Unterschied zum unkompressionierten Bild ist meist nicht zu erkennen, außer in den Kilobytes.
Formate
Um auch hier etwas an Bandbreite zu sparen, sollten die Bilder immer nach benötigen Format eingebunden werden. JPG nutzt man bei einem vollen Bild, also mit Hintergrund, bei Transparenz wird PNG verwendet (GIF ist veraltet) und SVG bei Vektorgrafiken, wie z. B. das Logo.
Ein “modernes Format”, das von Google 2010 veröffentlichte WebP, bringt nochmal drastische Verbesserungen. Dieses Format, eine Alternative zu JPG und PNG, ist kleiner und schlägt alle anderen Bildformate in der Kompression und spart daher noch einiges an Bandbreite mehr. Damals nur von Google Chrome und Opera unterstützt, gewinnt es langsam an Beliebtheit.
(Stand 29.11.2019) WebP wird nun in 80,87% aller Browser unterstützt, allerdings nicht im Internet Explorer und Safari.
Die generellen Regeln zur Bildverwendung:
- Für einfache Bilder ohne Transparenz: JPG
- Für Bilder mit Transparenz: PNG
- Für Vektoren und Icons: SVG – bei diesen sollte immer darauf geachtet werden, dass keine clientseitigen Skripts im File vorhanden sind
ALT-Attribute
Das ALT-Attribut steht für einen alternativen Text. Dieses ist wichtig für eine erweiterte Lesbarkeit der Website. Dabei gibt es ein paar Dinge zu beachten:
- Der Text beschreibt das Bild, falls das Bild im Kontext Informationen enthält.
- Der Text gibt Informationen über das Linkziel, falls sich das Bild innerhalb eines Links befindet.
- Für Menschen, die auf Screenreader angewiesen sind, liest der Reader die ALT-Texte aus. Für barrierefreie Seiten ist das ALT-Attribut ein absolutes Muss.
Ein leeres ALT-Attribut reicht bei rein dekorativen Bildern. Diese bieten weder Besuchern noch Suchmaschinen einen weiteren Nutzen und dienen rein der Optik.
Beispiel für eine ALT-Attribut:
<img src=“/wp-content/uploads/2019/11/bild-vorteile-eines-blogs-leser.jpg“ alt=“Eine Frau beim Lesen eines Blogs” />
Context matters – Bilder in umgebenden Text
Meist beweist schon die Bildersuche, wie ein Bild optimal platziert werden sollte. Entweder in der Bildunterschrift oder im Absatz vor oder nach dem Bild taucht der gesuchte Begriff auf. Je näher ein Bild dabei am gesuchten Begriff steht, desto besser wirkt sich dies auf das Suchergebnis aus.
Letzte Tipps
Von Texten in Web ist bekannt, dass Keywords, dessen Synonyme und Verbindungen in Überschriften und Meta-Daten stehen sollten. Es gibt nochmal ein paar Pluspunkte bei SEO, wenn das jeweilige Keyword bzw. Synonym von Text auch im Titel, Beschreibung und ALT-Attribut des Bildes steht.
Bildnachweis:
Bild-Nummer: von metamorworks, von vectorfusionart, von xenia_design – stock.adobe.com
