SEO
Bilder-SEO stellt heute nur noch einen sehr geringen Stellenwert im Marketing-Mix dar. Denn kaum ein Nutzer, der über die Bildersuche auf eine Website kommt, interessiert sich für deren Angebote. Es gibt zwar Ausnahmen wie z.B. bei der Suche nach Inspiration (z.B. neue Haarschnitte für Friseure oder Fashion-Trends für Modeshops) oder konkreten Informationen (z.B. Infografiken oder Kennzahlen im B2B), allerdings suchen über 99% der Nutzer nur die Bilder und wollen nichts kaufen oder teilen – Bildersuchen stellen also kaum einen Teil der Customer Journey dar. Kritisch betrachtet ist Bilder-SEO daher nur noch ein Teil vom Corporate Branding.
Abgesehen davon kann Google Bilder schon sehr gut selber erkennen. Dafür trainieren wir Menschen ja durch den sogenannten reCaptcha v3 die künstliche Intelligenz zur Bilderkennung, indem wir ihr helfen, Ladengeschäfte, Busse, Ampeln, PKW & Co. zu identifizieren (und gleichzeitig als Menschen erkannt werden und Bots vermeiden).
Wenn du dennoch Wert auf Bildoptimierung legst, solltest du bei den Dateinamen beginnen, welche die abgebildeten Motive oder Keywords enthalten sollten. Die Dateinamen dürfen keine Leer- und Sonderzeichen sowie Umlaute enthalten.
Bei den Titeln und Alternativtexten von Bildern sind Leer- und Sonderzeichen sowie Umlaute ausdrücklich erlaubt. Im Titel setzt man Keywords ein, unter denen man gefunden werden will, im Alternativtext wird das Motiv beschrieben. Wir nutzen außerdem Bildunterschriften bei Bildern, allerdings mehr um Quellen anzugeben und weniger zur SEO (Bildunterschriften sind etwa gleich gewichtig wie normale Texte).
Es wäre möglich noch weitere Meta-Informationen wie z.B. den Standort oder den Tag der Aufnahme zu bearbeiten, allerdings rechtfertigt der Aufwand den Nutzen nicht.
Dimensionen
Die Auflösung sollte max. 1600px breit und max. 900px hoch sein, besser sind kleinere Bilder, da sie weniger Speicher brauchen und somit schneller geladen werden können. ist ein 1:1 bis 16:9-Format bei B2B-Unternehmen, deren Traffic hauptsächlich via Desktop-Computern kommt. Bei B2C-Unternehmen, deren Traffic großenteils von mobilen Endgeräten kommt, würde ich maximal auf ein 1:1 bis 4:3-Format setzen, da v.a. Smartphones überwiegend im Hochformat genutzt werden (Ausnahme bei Videos).
Wir schneiden die Bilder in drei verschiedene Dimensionen um, die sich aus den Design-Customizer-Einstellungen definieren:
- Groß: Seitenbreite
- Mittel: 50% der Seitenbreite
- Klein: 1/3 der Seitenbreite
Du kannst die WordPress-Bilddimensionen ändern, indem du auf Einstellungen > Medien gehst.
Dateitypen
Fotos…
… sollten im JPG-Format mit max. 80% Qualität gespeichert werden, besser weniger. Alternativ GIF mit möglichst wenig Farben. Das neue Bildformat WebP wird leider noch nicht von allen gängigen Browsern unterstützt (Quelle: Can I Use) und ist nicht abwärtskompatibel. WebP lässt sich daher nur durch zusätzlich Plugins wie WebP Express für bestimmte Browser generieren und verwalten. Der Aufwand rechtfertigt den Nutzen gegenüber einer komprimierten JPG-Datei aber noch nicht.
Grafiken und Logos…
… speicherst du am besten im SVG-Format, alternativ als komprimiertes PNG mit möglichst wenig Farben. Wichtig bei SVG-Dateien:
Bitte vor dem Speichern die Webseide-Schriftarten Helvetica und Arial (sans-serif) oder Georgia und Times New Roman (serif) verwenden. Sonderschriftarten (wie z. B. Google Fonts) können zwar auch eingesetzt werden, werden aber nur dann richtig dargestellt, wenn diese auch in der Website verwendet wurden. Folge dazu meiner Anleitung zur Einbettung von Google Fonts. Falls du keine Google Schrift einbetten aber trotzdem auf ein „fancy“ Schriftbild setzen willst, muss die Schrift in Vektoren umgewandelt werden, damit die Typografie auch bei Nutzern, welche die Schrift nicht installiert haben, dargestellt wird. Schriften im Vektorformat erhöhen aber die Dateimenge und damit die Ladezeit deutlich. Deswegen hat Google übrigens auch ein so einfaches Logo, das nur aus Kreisen und einfachen Linien besteht – ohne Firlefanz also.
Übrigens: Im Gegensatz zu anderen Bildformaten lassen sich bei SVG-Grafiken auch einzelne Elemente animieren. Dazu lädst du aber besser nicht eine ganze SVG-Datei hoch, sondern fügst den HTML-Code im gewünschten Teil deiner Website ein, den du i. d. R. bei der Speichern-Routine exportieren kannst. Im HTML-Code erhält automatisch jeder Pfad eine Klasse, mit der du dann arbeiten kannst.
PageSpeed
Bilder stellen den größten Verlangsamungsfaktor von Webseiten dar. Zur PageSpeed-Optimierung solltest du mit Ausnahme der SVG-Dateien alle Bilder vor Upload mittels TinyPNG (bis zu 20 Dateien gleichzeitig, auch via Plugin möglich) oder mittels Compressor.io (oft etwas stärker, allerdings nur Einzeloptimierungen) komprimieren.
Wenn du noch mehr Ladezeit bei den Bildern sparen willst, solltest du eine Lazy Load Funktion in deiner Website nutzen, welche die Bilder nicht von Anfang an lädt, sondern nur dann, wenn sie in den Sichtbereich gelangen. Wir empfehlen dazu die Premium-Version von WP Fastest Cache einzusetzen. Übrigens: Ab Sommer 2019 spendiert Google dem Chrome Browser in Version 75 ein eigenes Lazy Loading (Quelle: Google). Dies ersetzt aber nicht das Lazy Loading für andere Browser.
Hintergrundbilder und -Muster
Eigentlich raten wir davon ab, vollflächige Hintergrundbilder in Webseiten zu nutzen, da diese ja meist außerhalb des Inhaltsbereichs liegen, kaum wahrgenommen werden und somit deine Website unnötig verlangsamen.
Das geringste Übel ist ein Hintergrundmuster, auch Pattern genannt. Dazu erstellst du ein geeignetes Bild in den Dimensionen deiner Wahl – am besten kleiner als 500 x 500px (b x h) und komprimierst es anschließend mit einem der oben genannten Tools. Anschließend lädst du es in deiner Mediathek hoch und kopierst die URL. Dann gehst du im Design > Customizer in den Reiter Zusätzliches CSS und fügst folgenden Code ein, wobei du den Abschnitt mit dem Pfad „deinebildurl.jpg“ durch die vorher kopierte URL ersetzt.
.site-content {background-image: url(deinebildurl.jpg) ; ?>);Willst du dagegen ein vollflächiges Hintergrundbild für deine Website definieren, empfehlen wir es auf maximal 1.900 x 900px (b x h) mit der minimal möglichen Qualität zu speichern und zusätzlich mit einem der o. g. Bildkompressionstools zu verkleinern. Anschließend lädst du es in deiner Mediathek hoch und kopierst die URL. Dann gehst du im Design > Customizer in den Reiter Zusätzliches CSS und fügst folgenden Code ein, wobei du den Abschnitt mit dem Pfad „deinebildurl.jpg“ durch die vorher kopierte URL ersetzt. Das Bild wird dann nicht wie oben wiederholt, zentriert oben ausgerichtet.
.site-content {background-image: url(deinebildurl.jpg) ; ?>) no-repeat center top;