Nicht nur fürs Auge wichtig: Bilder fürs Web optimieren
2022 tummeln sich so viele Bilder im World Wide Web wie nie zuvor. Die Zeiten der Fließtext-lastigen Websites scheinen zu Ende zu gehen. Aber nur mit einem Foto hier und einer Grafik da, ist es längst nicht getan. Damit User und auch Google Ihre Website nützlich finden, heißt es, ran ans Bild und losoptimiert!
Warum verwenden wir Bilder auf Websites?
„Ein Bild sagt mehr als-…“ Sie verstehen schon. Oder?
Gleich zu Beginn ein Praxistest: Sie sind im Web auf der Suche nach, sagen wir, Babyfläschchen – was spricht Sie mehr an? Ein Bild in warmen Farben mit einer Mutter, welche liebevoll ihren Säugling im Arm hält und mit dem Fläschchen füttert? Oder eine bilderlose Seite, die schlicht beginnt mit: „Babyfläschchen – jetzt kaufen“? Ein etwas übertriebenes Beispiel, natürlich, doch im Kern wahr.
Bilder sprechen uns auf emotionaler Ebene an.
Sie sorgen für Aufmerksamkeit, wecken Erinnerungen. Und mit ihnen lässt sich der Blick des Nutzers auf der Website bewusst lenken. Text wird häufig nur „gescannt“, überflogen – bei Bildern verweilt das Auge auch schon mal. Fotos lockern ansonsten zu lange Fließtexte auf und Grafiken haben darüber hinaus einen nicht zu unterschätzenden Informationswert.
Insgesamt laden sie eher dazu ein, ein Produkt zu kaufen oder eine Leistung zu buchen.
Weniger ist mehr? Wann brauche ich Bilder – und wann nicht?
„Na, dann verzichte ich doch am besten ganz auf Text und arbeite nur mit Bildern!“ – Bitte nicht! Denn genauso, wie die Abwesenheit von Fotos oder Grafiken einer Website nicht guttut, überfrachten zu viele von ihnen die Seite.
Stellen Sie sich eine Produktseite mit vielen, vielen Produktbildern vor, auf der aber kaum schriftliche Informationen über das Produkt selbst gegeben werden. Halten Sie die Waage zwischen Text und Bild.
Das Gleiche gilt für den Nutzen eines Bildes. Was will dieses aussagen? Hat es etwas mit der angebotenen Leistung zu tun, steht es im Zusammenhang zu den beschriebenen Informationen? Ein schöner Sonnenuntergang hat auf der Website eines Maschinenbauers nichts zu suchen! Er bietet einfach keinen Mehrwert und ist absolut fehl am Platz.
Im schlimmsten Fall kann das Bild sogar abschreckend auf die Nutzer wirken, beispielsweise wenn es als unseriös oder geschmacklos aufgenommen wird. Deshalb: Augen auf bei der Bildauswahl.
Die meistgenutzten Bildformate
Bildformate gibt es viele. Die einen sehen wir einmal im Leben und dann nie wieder, andere begegnen uns immer wieder. In Bezug auf Websites sind Ihnen bestimmt schon mal folgende Datei-Endungen bei Bildern aufgefallen:
JPG
JPG oder auch JPEG ist das bekannteste und am häufigsten genutzte Format für Bilddateien. Entwickelt wurde das Bildformat von der namensgebenden Joint Photographic Experts Group. Sein Vorteil: Es kann Digitalfotos mit relativ kleiner Dateigröße auf Website darstellen.
PNG
PNG-Dateien (Portable Network Graphic) sind häufig bei Webdesignern zu finden. Sie werden insbesondere für Icons, Logos oder Bildern mit transparenten Hintergründen verwendet.
SVG
Das SVG-Format ist keine pixelbasierte Datei. Das bedeutet, dass selbst beim starken Vergrößern des Bildes die gleiche Qualität dargestellt wird – es kommt nicht zu einem „verpixelten“ Bild. Auf Website werden Logos oft als SVG verwendet.
GIF
Ein GIF (Graphics Interchange Format) erzeugt bewegte Bilder. Mit seiner kleinen Dateigröße ist es ein beliebtes Medium für Chats oder Social Media. Aber auch auf Websites kommt es immer mal wieder zum Einsatz.
WEBP
Neben den gängigen Bildformaten sollte hier noch kurz das WEBP-Format (Web Picture Format) erwähnt werden. Es eignet sich sowohl für Fotos und detaillierte Grafiken als auch für simplere Darstellungen und Animationen. Das WEBP-Format wird in Zukunft das Standardformat fürs Web werden und somit JPG, PNG, GIF und Co. ersetzen.
Die richtige Bildgröße: Bilddateien für das Web komprimieren
Zu große Bilder verbrauchen unnötig viel Speicherplatz auf Ihrer Website und sorgen zudem für lange Ladezeiten. Qualitativ hochwertige Bilder kommen aber nun mal in einer beachtlichen Bildgröße daher. Was tun? Die Bilder müssen komprimiert werden. Hierbei ist das Ziel, eine möglichst gute Qualität bei möglichst niedriger Dateigröße zu bekommen. Zu diesem Zweck finden sich zahlreiche Bildbearbeitungsprogramme.
In diesem Zusammenhang sollten wir kurz die folgenden Begriffe differenzieren: durch die Dateigröße wird festgelegt, wie viel Speicherplatz durch das Bild verbraucht wird. Die Bildgröße bezieht sich auf die Anzahl der Pixel: je mehr Pixel, desto größer ist das Bild und je mehr Pixel pro Zentimeter, desto höher ist die Bildauflösung.
Kommen die zu verwendeten Bilder direkt aus der Kamera, sind sie in der Regel unskaliert mehrere tausend Pixel groß. Für eine Website ist meist die Darstellung von 1.920px (HD) ausreichend. 1920 x 1280 Pixel gilt als Standardgröße. Dabei sollten große, über die volle Breite gehende Bilder eine Dateigröße von maximal 130 bis 250 KB aufweisen. Für kleine Bilder gilt ein Richtwert von etwa 50 KB.
No-Gos bei der Bilderverwendung im Web
Wie erklärt man etwas besser, als darauf hinzuweisen, wie man es NICHT tut? Sie möchten wissen, ob Ihre Website-Bilder optimiert sind? Dann sollten die folgenden Punkte besser nicht auf sie zutreffen:
Zu große Datenmengen
Stellen Sie sich vor, Sie sind mobil auf einer Website unterwegs, laden ein hochauflösendes Bild und schneller als Sie hinsehen können, ist Ihr Datenvolumen aufgebraucht. Bilder mit hoher Dateigröße sehen zwar gut aus, machen die Ladezeit der Website allerdings langsam. Komprimieren Sie Ihre Bilder und wählen Sie das passende Bildformat aus, achten Sie dabei aber auch auf die Qualität der Bilder!
Zu viele unnötige Bilder
Wie bereits erwähnt, sind zu viele Bilder eindeutig zu viel des Guten – sei es in Bezug auf die Ladezeit oder aus ästhetischen Gründen. Achten Sie darauf, dass jedes Foto oder jede Grafik im richtigen Kontext steht, den Text auflockert und Aufmerksamkeit erzeugt, statt abzuschrecken.
Verpixelte Bilder
Bevor Sie ein Bild von schlechter Qualität verwenden, lassen Sie es besser weg oder suchen Sie nach einer Alternative. Auch die Komprimierung einer Grafik mit hoher Datengröße auf Kosten der Qualität sollte und darf nicht sein!
Zu lange Ladezeiten
Ein Bild – oder gar nicht ganze Seite – lädt nur langsam? Das kann verschiedenste Gründe haben. Oft liegt es allerdings an zu großen Bilddateigrößen. Da sich die meisten User oft im Bruchteil einer Sekunde entscheiden, ob Sie auf einer Website verheilen wollen oder nicht, werden sie in diesem Fall mit hoher Wahrscheinlichkeit abspringen.
Nicht-responsive Bilder
Responsive Design ist so wichtig wie nie zuvor. Der Großteil aller Internet-Nutzer ist heute mobil unterwegs. Somit sollten auch die Websites auf die mobile Ansicht optimiert werden. Auch die Fotos auf der Seite müssen den Wechsel von Desktop auf Smartphone und umgekehrt ohne Qualitätsverlust meistern. Manchmal kann es hier auch helfen, ein Bild für die Desktop-Ansicht und eins für die mobile Ansicht in der Seite zu hinterlegen.
Welchen Einfluss haben Bilder auf die SEO?
Suchmaschinen mögen langsame Website überhaupt nicht. Gleiches gilt für Seiten ohne User-Experience. Google und Co. merken, wenn User schon nach wenigen Sekunden eine Seite wieder verlassen. Wie wir oben gelernt haben, haben Bilder einen großen Einfluss sowohl auf die Ladezeit als auch auf die Absprungrate. Und was macht die Suchmaschine mit Seiten, die als benutzerunfreundlich erkannt wurden? Richtig, sie straft diese mit einem schlechten Ranking ab – die Seite wandert in den Suchergebnissen nach unten. Meist reicht schon Seite 2 bei Google, um sie für viele User unsichtbar werden zu lassen.
Ein großer SEO-Faktor ist darüber hinaus die korrekte Bildbenennung. Diese hilft nicht nur dabei, dass Sie den Überblick über Ihre Bilder behalten, sondern ist auch wichtig als Informationsgeber für Ihre Nutzer und die Suchmaschine.
Bilder richtig benennen
Die richtige Bildbenennung ist gar nicht so schwer. Worauf es ankommt, sind Dateiname, Bildtitel und Alt-Attribut.
Dateiname
Der Dateiname eines Bildes wird bereits vor dem Upload auf die Website festgelegt. Damit die Suchmaschine weiß, dass das Bild relevant für die Seite ist, empfiehlt es sich, mit den passenden thematischen Keywords zu arbeiten. Rechtschreibfehler sind hier ein absolutes No-Go und damit es nicht zu Darstellungsfehlern kommt, verzichten Sie auf Umlaute, Leerzeichen und Sonderzeichen.
Bildtitel
Der Bildtitel wird oft verwechselt mit dem Dateinamen. Hier können Sie den Titel noch einmal ausführlicher formulieren, auch gerne mit Umlauten und Sonderzeichen und Co.
Alt-Attribut
Kann ein Bild nicht geladen werden, wird der Alternativ-Text angezeigt. Dieser wird auch zum Verständnis für sehbehinderte User genutzt und sollte daher in wenigen Worten erklären, was auf dem Bild zu sehen ist
Webdesign und Suchmaschinenoptimierung bei baseplus®
Bei baseplus® sind Experten am Werk. Wir haben den passenden Blick dafür, wann und wo ein Bild auf Ihrer Website Sinn macht und wissen ganz genau, worauf es bei dessen Optimierung ankommt, damit Sie bei Google ganz weit oben ranken. Lust darauf, mehr zu erfahren? Dann freuen wir uns auf ein persönliches Beratungsgespräch mit Ihnen!