Ist Bilder SEO für B2B relevant?

Wenn Du möchtest, dass sowohl Deine Besucher als auch die Suchmaschinen Deine B2B Website positiv bewerten, solltest Du bei den Bildern, Logos und anderen Grafiken einiges beachten.

Durch schnell ladende und qualitativ hochwertige Bilder und Grafiken kann der Besucher länger auf Deiner Website gehalten werden. So erhöht sich die Wahrscheinlichkeit einer Conversion, also einer Anfrage oder Buchung, weil sich der Interessent mehr mit der Website beschäftigt. Eine geringe Absprungrate und eine längere Verweildauer ist auch ein Qualitätsmerkmal für Google und hilft für gute Rankings.

B2B Websites bieten technische Dienstleistungen oder erklärungsbedürftige Produkte an, die am besten im persönlichen Gespräch geklärt werden. Daher ist es sinnvoller die Besucher mit kurzen Verkaufstexten und der Illustration durch hochwertige Fotos und Bilder zu gewinnen.

Hier erfährst Du, welche Kriterien Deine Medien dafür erfüllen sollten.

Hier erhältst Du Tipps und Informationen zu diesen bildrelevanten Themen:

• Dateiformate
• Bildgrößen
• Dateigröße
• Komprimierung
• Bild-Metadaten

Mit Bildern sind in erster Linie Fotos gemeint. Das richtige Format für detailreiche und mehrfarbige Fotos ist nach wie vor das JPG. Es lässt sich gut komprimieren und hat dann eine entsprechend geringere Dateigröße. Für Content Management Systeme wie zum Beispiel WordPress gibt es Plugins, die aus JPGs automatisiert WebPs erstellen können. Mit diesen verringert sich der benötigte Speicherplatz dann ohne Qualitätsverlust noch einmal deutlich. Im Netz gibt es auch kostenfreie Tool mit denen sich WebPs generieren lassen.

Der Begriff Bildgröße bezeichnet hier die Maße des Bildes in Pixeln. Ein Bild, welches die ganze Breite der Website ausfüllt (zum Beispiel im Header), kann etwa 1900 Pixel breit sein. Entsprechend weniger Breite benötigt dann etwa ein kleineres Bild im Inhaltsteil der Seite. Man sollte penibel darauf achten, die Bilder nicht größer in seine Website einzubinden, als diese dann am Ende dargestellt werden sollen, um unnötige Datenlast zu vermeiden.

Beispiele für Bildgrößen auf Websites

• Volle Breite z.B. als Headerbild: ca. 1900 px
• Bildbreite einspaltig: ca. 1200 px
• Bildbreite zweispaltig: ca. 600 px
• Bildbreite dreispaltig: ca. 400 px
• Bildbreite vierspaltig: ca. 300 px

Die Größe und Qualität von Bildern im Web definiert sich übrigens nicht über die Angaben PPI (Pixel per Inch) oder DPI (Dots per Inch). Sondern nur über die effektive Höhe und Breite in Pixeln, die Komprimierung und den Inhalt. PPI und DPI sind ausschließlich für den Druck von Bildern interessant und können im Webdesign völlig ignoriert werden. Leider gibt es dazu noch immer völlig unzutreffende Aussagen bei anderen zu lesen.

Die Bildmaße in Pixeln, die Komprimierung des Bildes und die Bildinhalte sind entscheidend für dessen Dateigröße verantwortlich. Es ist sowohl für eine gute Benutzer-Erfahrung als auch für eine positive Bewertung von Google und Co. entscheidend, die Dateigrößen der Bilder trotz guter Qualität möglichst klein zu halten.
Um große Dateien und somit hohe Ladezeiten zu vermeiden, sollten Bilder nur in der wirklich benötigten Größe und möglichst optimal komprimiert verwendet werden.

Welche Dateigröße sollten Bilder auf Websites haben

• Große Bilder z.B. über die volle Breite: ca. 100 – max. 250 KB
• Mittelgroße Bilder: ca. 50 – 100 KB
• Kleine Bilder: ca. 30 – 50 KB

Im nächsten Punkt erfährst Du mehr über die Komprimierung von Bildern.

Damit Bilder möglichst wenig Datenlast erzeugen und schnelle Ladezeiten ermöglichen, sollten sie möglichst verlustfrei komprimiert werden. Man kann die Komprimierung der JPGs mit einem Grafikprogramm vornehmen. Photoshop von Adobe ist sehr bekannt, aber auch Open Source Programme wie zum Beispiel Gimp bewerkstelligen das einwandfrei. Es gibt auch Online-Tools, mit denen man seine Bilder gratis komprimieren kann. Wichtig ist, dass Du immer das Original behältst, auch um das komprimierte Bild mit diesem zu vergleichen und bei unbefriedigenden Ergebnissen ein anders Verfahren wählen zu können.
Für Content Management Systeme wie WordPress gibt es komfortable Plugins, mit welchen die Komprimierung im WebP-Format automatisiert werden kann.

Damit auch Deine Bilder von den Suchmaschinen „verstanden“ und entsprechend ausgespielt werden können, solltest Du die Metadaten anpassen. Aber auch für die Besucher Deiner Website sind die Angaben in den Metadaten hilfreich.

Dateiname

Schon beim Dateinamen kann man einiges falsch machen. Hier solltest Du darauf achten, den Suchmaschinen klar mitzuteilen, was auf dem Bild zu sehen ist. Die Wörter sollten immer mit Bindestrichen getrennt werden. Verwende im Dateinamen keine Sonderzeichen wie ß oder Umlaute.

Alternativer Text

Auch das Alt-Tag hilft Suchmaschinen zu verstehen, was auf dem Bild zu sehen ist. Zudem werden diese Informationen dem Benutzer Deiner Website angezeigt, wenn das Bild aus irgendwelchen Gründen nicht geladen werden kann. Diese Angaben sind auch wichtig für die Barrierefreiheit Deiner Website, da Besucher mit einer Sehbeeinträchtigung sich diese Inhalte vorlesen lassen können.

Titel

Die Angaben im Title-Tag werden dem Besucher angezeigt, wenn er den Mauszeiger über das Bild hält. Je nach den Einstellungen der Website kann der Titel zum Beispiel auch über oder unter dem Bild in einer Bildergalerie angezeigt werden. Hier kannst Du im Gegensatz zum Dateinamen problemlos Sonderzeichen und Umlaute verwenden.

Grafiken werden oft mit vektorbasierten Programmen erstellt. Eine Vektor-Grafik besteht, vereinfacht ausgedrückt nicht aus Pixeln wie ein Foto, sondern aus mathematischen Kurven und kann dadurch ohne Qualitätsverlust beliebig vergrößert werden. Auch wirken diese Grafiken „schärfer“, was sich vor allem bei Details, wie zum Beispiel bei Schriften oder einem Hintergrund mit feinen Linien positiv auswirkt.

Vektor-Grafiken können allerdings nur mit geeigneten Programmen erstellt und bearbeitet werden, wie zum Beispiel Adobe Illustrator, CorelDRAW oder Affinity Designer. Typische Formate sind EPS, SVG, AI oder CDR.

Hast Du also die Möglichkeit Grafiken als Vektor-Datei zu erstellen oder zu erhalten, solltest Du diese im SVG-Format in Deine Website einbinden. Erteilst Du einem Grafiker den Auftrag zur Erstellung, kannst Du ihn schon im Vorfeld informieren, welche Datei-Formate Du benötigst. Auch in den gängigen Stockfoto- und Bilddatenbanken gibt es Schaubilder und Grafiken oft in Vektorformaten.

Als pixelbasierte Alternative ist meist ein PNG dem JPG vorzuziehen, da es verlustfrei komprimiert wird. Der Vorteil zeigt sich vor allem bei Grafiken mit klaren Kanten und Flächen. Außerdem kann man dem PNG im Gegensatz zum JPG einen transparenten Hintergrund zuweisen.

Zu erwähnen wäre noch, dass SVG-Dateien bei sehr komplexen Grafiken ungewollt groß werden können. Bei einfacheren Grafiken aber auch oft kleiner als PNG- oder JPG-Dateien. PNGs erzeugen per se größere Dateien als JPGs. Man sollte also im Einzelfall abwägen, welche Lösung hierfür optimal ist.

Das Logo ist natürlich auch eine Grafik und es gelten dafür weitestgehend dieselben Richtlinien. Darüber hinaus möchte ich aber noch auf ein paar Besonderheiten hinweisen.

Das Logo befindet sich auf den meisten Websites oben links, was aus verschiedenen Gründen auch Sinn macht. Dort bietet sich eher ein Logo im Querformat als im Hochformat an. Das Logo sollte eine klare Struktur ohne zu viel Details haben. Feine Schriften sind meist nur schwer leserlich. Slogans haben dort nichts verloren. Es muss an die Darstellung auf verschiedenen Ausgabegeräten gedacht werden. Das Logo sollte in allen Größen eine gute Figur machen.

Gerade ein Logo profitiert enorm, wenn es als Vektor-Grafik eingebunden wird. Ein SVG wird immer scharf dargestellt, egal welche Auflösung der Ausgabe-Monitor hat.

Aus den oben bereits genannten Gründen ist auch hier alternativ ein PNG zu empfehlen. Es unterstützt wie das SVG Transparenzen. Auf einem farbigen Hintergrund oder über einem Foto eingesetzt sieht das meist deutlich besser und professioneller aus. Das PNG-Logo sollte dann aber für die Ausgabe auf hochauflösenden Bildschirmen auch in doppelter Größe angelegt werden. Die Nutzung von JPGs ist bei Logos auf Websites nicht zu empfehlen.

Tipp: Ist die Entscheidung für den Relaunch oder Aufbau einer neuen Website gefallen, lohnt es sich, alle Grafiken und auch das Logo kritisch zu prüfen. Passt die Bildqualität und entspricht das Logo noch Deiner Firmen-Ausrichtung? Vielleicht ist ja im Zuge einer neuen Website auch die richtige Zeit für eine Überarbeitung oder ein Re-Design Deines Logos gekommen.

Ohne Bilder geht heute im Web nichts mehr. Wir Menschen werden von Bildern schon immer magisch angezogen. Bilder erschaffen Emotionen, halten die Besucher auf der Website, verleiten sie, sich weiter umzusehen. Sie prägen sich leicht ein und sorgen für einen hohen Wiedererkennungswert.
Bilder helfen uns komplexe Thematiken einer B2B Website besser zu verstehen und leichter „abzuspeichern“. Du kommst also nicht umhin, Deine Website mit geeignetem Bildmaterial anzureichern.