Bilder und andere Medien für das Web optimieren

Wenn Du möchtest, dass sowohl Deine Besucher als auch die Suchmaschinen Deine 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. Die längere Verweildauer ist auch ein Qualitätsmerkmal für Google und Co. und wird dem Ranking Deiner Seite guttun.

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

Hier schreibt:

Tobias Promitzer
Tobias PromitzerSEO Manager
Newsletter

1. So verwendest Du Bilder auf Deiner Website richtig

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

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

1.1. Dateiformate für Bilder auf Websites

Schreibe ich hier von Bildern, sind 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. WebPs werden aber von älteren Browsern nicht unterstützt, deshalb muss man für diese automatisierte Fallbacks einsetzen. WordPress gibt grundsätzlich das ursprüngliche eingesetzte Bildformat aus, falls der Browser des Besuchers WebPs nicht unterstützt.

Momentan sieht es so aus, als würde das noch recht neue Format AVIF das JPG in naher Zukunft ersetzen. Im Gegensatz zum WebP wird dieses von allen großen Playern unterstützt und gefördert. Das AVIF glänzt mit sehr kleinen Dateigrößen bei hoher Qualität.

Infos zu den Dateiformaten für Logos und Grafiken erhältst Du auf dieser Seite unter der jeweiligen Rubrik.

1.2. Bildgrößen auf Websites

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 Bildgröße im Web hat übrigens nichts mit der Auflösung des Bildes zu tun. Sondern nur mit der Höhe und Breite in Pixeln. Die Auflösung (also z.B. 300 dpi) ist ausschließlich für den Druck interessant. Ich betone das, weil man dazu leider noch immer andere, völlig unzutreffende Aussagen liest.

1.3. Dateigröße von Bildern

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.

1.4. Komprimierung von Bildern für Websites

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 automatisiert werden kann. Auch Formate wie WebP können so erstellt werden um dann bei kompatiblen Browsern als Standard ausgegeben zu werden.

1.5. Bild-Metadaten – SEO für Bilder

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 Dateinahmen keine Sonderzeichen wie ß oder Umlaute.

Alternativer Text

Auch das Alt-Tag oder -Attribut 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 oder -Attribut 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.

2. Das solltest Du beim Verwenden von Grafiken auf Deiner Website beachten

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 oder CorelDRAW. 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.

Lisa Sirch, Marketingberaterin
Abonniere den Webgeist Newsletter!

 

3. Logos auf Websites richtig einsetzen

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.

Fazit

Ohne Bilder geht heute im Web nichts mehr. Wir Menschen werden von Bildern schon immer magisch angezogen. Bilder schaffen 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 besser zu verstehen und leichter „abzuspeichern“. Du kommst also nicht umhin, Deine Website mit geeignetem Bildmaterial anzureichern.

Wir helfen gerne weiter, wenn Du Unterstützung bei Deiner Marketingstrategie und dem suchmaschinenoptimierten Aufbau Deiner Website benötigst.

Weiterführende Hilfe

  • Hast Du eine konkrete Frage?
  • Ist heute etwas passiert, sodass Du Dich über dieses Thema informierst?
  • Wie schwierig ist es für Dich eine gute Lösung zu finden?

Erhalte unverbindliche Lösungsansätze in einem kostenlosen Erstgespräch.

Fokus halten im B2B Marketing

Erhalte alle 2 Wochen Praxistipps für digitales Wachstum.
Abonniere den Webgeist Newsletter!

Hinweis: Du kannst den Webgeist Newsletter jederzeit und kostenfrei abbestellen. Deine Daten werden elektronisch gespeichert und nur zum Versand des Newsletters genutzt. Wir geben Deine Daten nicht weiter.

Jetzt Newsletter abonnieren!