Web Developer & DesignerKategorie

So optimierst du deine Website-Bilder für das Internet

5 min lesen
Wolf-Dieter Fiege
So optimierst du deine Website-Bilder für das Internet
So optimierst du deine Website-Bilder für das Internet

Bilder lockern den Text auf, ziehen die Aufmerksamkeit des Besuchers auf sich, vermitteln eine Stimmung oder erklären anschaulich. Wir verarbeiten Bilder schneller als Text und behalten sie besser in Erinnerung. Studien zufolge erinnern sich Menschen an 80 Prozent von dem, was sie sehen, und nur an 20 Prozent von dem, was sie lesen. Die Bilderoptimierung beginnt bei der Auswahl und endet bei der Beschriftung – deine Besucher danken dir für die Mühe und du profitierst vom besseren Ranking in Suchmaschinen, vor allem bei der Bildersuche.

1. Warum Bilder wichtig sind

2. Die Auswahl der richtigen Bilder

3. Bilder optimieren für SEO

  • Bildgröße und Bildformat deiner Bilder optimieren
  • Dateiname, Bildunterschrift und Alt-Text
  • Bilder optimieren mit Lazy Loading und Browser-Caching
  • Image-Sitemap erstellen 

4. Zusammenfassung

1. Warum Bilder wichtig sind

Bilder gehören zum Inhalt einer Website. Sie ergänzen den Text und bieten einen enormen Geschwindigkeitsvorteil: Wir erfassen ein Bild mit einem Wimpernschlag in nur 13 Millisekunden – das ist 60.000 Mal schneller als reiner Text.

Nutze Bilder, um den Inhalt zu veranschaulichen, greifbarer, verständlicher und nachvollziehbarer zu machen. Die Verwendung passender Bilder erhöht die Verweildauer deiner Seitenbesucher. Mithilfe von Bildern kommunizierst du deine Markenidentität, vermittelst Gefühle und Emotionen.

Ein weiterer wichtiger Grund: Die Bildersuche hat einen bedeutenden Anteil an der Gesamtsuche im Internet, die Suchmaschinen führen dafür eine eigene Rubrik. Gute und richtig beschriftete Bilder steigern deinen Traffic.

2. Die Auswahl der richtigen Bilder

Die Arbeit beginnt mit der Bilderauswahl. Füge Beiträgen nicht blind ein Bild hinzu. Achte vielmehr darauf, dass die Bilder zum Inhalt passen und diesem einen Rahmen geben. Freundliche, aggressive und lustige Bilder rufen beim Besucher entsprechende Emotionen hervor, die du mit dem Text weiter bearbeitest. Verwende möglichst eigene Bilder, damit erregst du meist mehr Aufmerksamkeit als mit Stockfotos. Zum Veranschaulichen komplexer Inhalte eignen sich Infografiken besonders gut.

Tipp: Nutze Überschriften, Listen, Tabellen und Bilder, um deinen Text zu strukturieren und in übersichtliche Absätze aufzuteilen.

3. Bilder optimieren für SEO

Im Rahmen der Suchmaschinenoptimierung bedeutet Bilder-SEO die Auswahl hochwertiger Bilder in Größe, Format, Auflösung und Beschriftung. Die Bildbeschreibung hilft den Crawlern der Suchmaschinen bei der Analyse, was auf dem Bild zu sehen ist. Die Beschriftung steigert zugleich die Barrierefreiheit deiner Website: Besucher mit Seheinschränkungen sind auf die Bildbeschreibungen angewiesen.

Bildgröße und Bildformat deiner Bilder optimieren

Klar gibt es Nutzer mit Glasfaseranschluss und Content, bei dem hochauflösende 4K-Videos sinnvoll sind. In der Regel gilt jedoch: Eine schnelle Seitenladegeschwindigkeit geht über alles.

Damit deine Website auch bei schwachem Mobilfunkempfang mit dem Smartphone schnell lädt, muss die Dateigröße der Bilder möglichst klein sein. Tools helfen beim Verkleinern.

Tipp: Lerne, wie du einfach online Bilder komprimierst.

Du kannst die Bilder in diversen Formaten speichern; nicht jeder Browser zeigt jedes Format an. Am verbreitetsten sind JPEG, PNG und GIF.

  • JPEG: Die Balance zwischen Bildqualität und Dateigröße ist variabel anpassbar und es lässt sich sehr stark komprimieren.
  • PNG: Hat ebenfalls eine kleine Dateigröße, eignet sich jedoch nicht für Bilder mit transparenten Elementen.
  • GIF: Ist für die Anzeige kurzer animierter Fotoserien bekannt.

Das JPEG-Format ist für Bilder im Web in der Regel die erste Wahl. Eine Kompressionsrate von 80 Prozent gewährleistet häufig eine stimmige Balance aus Bildqualität und Dateigröße.

Dateiname, Bildunterschrift und Alt-Text

Den Algorithmen der Suchmaschinen fallt die Analyse von Bildern noch immer schwer. Fülle die Beschreibungen zu einem Bild vollständig aus, damit hilfst du Suchmaschinen und Seitenbesuchern mit Seheinschränkung. Die Folgen sind ein besseres Ranking und mehr Besucher.

  • Dateiname: Beschreibe das Bild mit wenigen Worten und setze zu Beginn ein Schlüsselwort.
  • Image Title: Als Standard wird der Dateiname verwendet.
  • Image Alt Text: Der Alt-Text wird angezeigt, wenn der Browser das Bild nicht laden kann. Er soll das Bild für Besucher und Suchmaschinen-Crawler erklären. Verwende Schlüsselwörter und verbessere dein Ranking in der Bildersuche.
  • Image Caption: Die Bildunterschrift wird in der Regel unter dem Bild angezeigt. Bringe hier zusätzliche Informationen und weitere Schlüsselwörter unter. Arbeite mit unterschiedlichen Bildunterschriften, wenn du ein Bild auf mehreren Websites platzierst.
  • Image Description: Die Bildbeschreibung wird als Inhalt für den Anhang des Beitrags gespeichert.

Bilder optimieren mit Lazy Loading und Browser-Caching

Wenn du auf einer Seite viele optimierte Bilder einsetzt, geht dies zulasten der Ladezeit. Hier hilft Lazy Loading: Die Technik stellt sicher, dass Bilder erst dann geladen werden, wenn du sie sehen möchtest. In einem langen Beitrag werden weiter unten erscheinende Bilder also erst vom Server geladen, wenn du nach unten scrollst.

Tipp: WordPress-Nutzer können die Erweiterung a3 Lazy Load installieren und Lazy Loading aktivieren.

Eine weitere Einstellung zur Beschleunigung der Seitenladegeschwindigkeit ist das Browser-Caching. Wenn aktiviert, werden Dateien wie Bilder lokal gespeichert und beim erneuten Seitenaufruf nicht neu heruntergeladen.

Tipp: In WordPress aktivierst du das Browser-Caching zum Beispiel mit dem Plugin W3 Total Cache.

Image-Sitemap erstellen

Sitemaps listen alle Unterseiten deiner Website auf. Die Bilder-Sitemap stellt eine Liste sämtlicher Bilder dar. WordPress-Nutzern ist für die Suchmaschinenoptimierung die Erweiterung Yoast SEO empfohlen, die auch automatisch eine Image-Sitemap erstellt.

4. Zusammenfassung: Bilder optimieren ist Pflicht

Bilder in Originalgröße von der Digitalkamera auf deine Website zu kopieren hat fatale Auswirkungen auf die Seitenladegeschwindigkeit. Deine Website muss in wenigen Sekunden geladen sein, andernfalls springen die Besucher ab. Nutze die Tipps und optimiere die Bilder für deine Website, indem du die Größe, Formatierung und Beschreibung anpasst.

Auch interessant:

SEO-Optimierung für Webseiten kleiner Unternehmen – Eine Anleitung für Einsteiger

Technisches SEO für WordPress

Kostenlose SEO Tools, mit denen du Google stürmst

Bildnachweis: Unsplash

Products Used