SEO

Bilder für die Website optimieren: Format, Größe und SEO Einstellungen

Talha AslanTalha Aslan 18 Min. Lesezeit 1 Aufrufe

Bildoptimierung gehört zu den technischen Maßnahmen, die auf fast jeder Website am schnellsten wirken. Seit 2012 prüfe ich Websites von Kunden, und das Muster wiederholt sich. Das Design stimmt, die Texte sind gut. Trotzdem liegen auf der Startseite mehrere Fotos mit einigen Megabyte direkt vom Smartphone. In diesem Beitrag zeige ich Schritt für Schritt, wie ich vorgehe: vom Format über srcset bis zu Dateinamen und Bild Sitemap.

Was ist Bildoptimierung auf einer Website und warum ist sie wichtig?

Bildoptimierung bedeutet, jedes Bild einer Website in der kleinsten sinnvollen Dateigröße, im passenden Maß und im richtigen Format auszuliefern, ohne sichtbaren Qualitätsverlust. Dazu gehören auch Alternativtext, Dateiname und Sitemap, damit Suchmaschinen verstehen, was ein Bild zeigt. Kurz gesagt dient sie gleichzeitig der Ladezeit und dem SEO.

Der Grund ist einfach: Auf den meisten Seiten wiegen Bilder deutlich mehr als Text. Deshalb schauen Sie zuerst auf die Bilder, wenn eine Seite leichter werden soll. Bei einem Audit liste ich zunächst die zehn größten Dateien auf. Meist füllen Fotos und Banner diese Liste fast vollständig.

Allerdings geht es nicht nur um Geschwindigkeit. Traffic aus der Google Bildersuche kann für Produkte, Rezepte, Architektur oder Einrichtung ein echter Kanal sein. Zudem hilft ein guter Alternativtext Menschen, die einen Screenreader nutzen. Eine Maßnahme bringt also drei Vorteile.

Wie beeinflussen Bilder die Ladezeit?

Der Browser lädt jedes Bild als eigene Datei. Je größer die Datei, desto länger dauert der Download, vor allem im Mobilfunknetz. Zudem ist das größte sichtbare Element einer Seite oft ein Hero Bild oder ein Produktfoto. Daher bestimmt genau diese eine Datei, wann ein Besucher die Seite als geladen empfindet.

Den größeren Zusammenhang zwischen Ladezeit, Ranking und Umsatz beschreibe ich in einem eigenen Artikel. Lesen Sie dazu wie die Ladezeit SEO beeinflusst. Hier konzentriere ich mich nur auf die Einstellungen für Bilder.

Diese Fehler sehe ich in der Praxis am häufigsten:

  • Ein Foto mit 4000 Pixeln Breite steckt in einem Rahmen mit 400 Pixeln.
  • Fotos liegen als PNG vor und blähen die Datei unnötig auf.
  • Smartphone und Desktop erhalten dieselbe Bildgröße.
  • Breite und Höhe fehlen, deshalb springt das Layout.
  • Ein Plugin läuft, aber niemand hat die Einstellungen geprüft.

Für jeden Punkt finden Sie in den folgenden Abschnitten eine Lösung.

Welches Bildformat sollten Sie wählen?

Die Formatwahl ist die Grundlage der Bildoptimierung. Google schreibt in seiner Dokumentation, dass die Suche BMP, GIF, JPEG, PNG, WebP, SVG und AVIF unterstützt. Moderne Formate verhindern also nicht, dass Ihre Bilder in der Suche erscheinen. Die eigentliche Frage lautet daher: Welches Format passt zu welcher Bildart?

FormatGeeignet fürDarauf achten
JPEGFotos mit breiter KompatibilitätKeine Transparenz
PNGGrafiken mit transparentem Hintergrund, ScreenshotsBei Fotos sehr groß
WebPModernes Allzweckformat für Fotos und GrafikenSehr alte Browser brauchen eventuell einen Fallback
AVIFFotos mit starker KompressionLangsamere Kodierung, Werkzeuge prüfen
SVGLogos, Icons, einfache IllustrationenNicht für Fotos; Datei vorher bereinigen
GIFSehr kurze, einfache AnimationenBei längeren Clips ist Video leichter

In der Praxis nutze ich standardmäßig WebP für Fotos und SVG für Logos und Icons. Auf stark besuchten Produktseiten teste ich zudem AVIF. Die endgültige Entscheidung sollte allerdings auf einem Vergleich mit Ihren eigenen Bildern beruhen.

Wie viel bringen WebP und AVIF wirklich?

Ich beginne mit einer belegten Zahl. Laut der WebP Dokumentation von Google sind verlustfreie WebP Dateien 26 Prozent kleiner als PNG. Verlustbehaftete WebP Dateien sind bei gleicher SSIM Qualität 25 bis 34 Prozent kleiner als vergleichbare JPEG Dateien. Sie liefern also dasselbe Bild mit deutlich weniger Gewicht aus.

Für AVIF nenne ich bewusst keine feste Quote, denn das Ergebnis hängt stark vom Motiv und vom Encoder ab. Nach meiner Erfahrung aus Projekten ist AVIF bei Fotos oft sogar kleiner als WebP, eine Garantie ist das allerdings nicht. Bei manchen Grafiken und Bildern mit scharfem Text schrumpft der Abstand oder kehrt sich um.

Deshalb empfehle ich einen kleinen Test. Wählen Sie zunächst fünf typische Bilder Ihrer Website aus. Speichern Sie dann jedes davon als JPEG, WebP und AVIF in gleicher sichtbarer Qualität. Tragen Sie danach die Dateigrößen in eine Tabelle ein und vergleichen Sie die Bilder am Bildschirm. So erhalten Sie statt allgemeiner Aussagen ein echtes Ergebnis für Ihre Inhalte.

Andererseits reicht ein Formatwechsel allein nicht aus. Hat ein Bild falsche Maße, schickt auch die WebP Version zu viele Pixel an den Browser. Format, Größe und Kompression gehören daher zusammen.

Wie liefern Sie ein Ersatzformat für ältere Browser aus?

Für die Bildoptimierung ist der sicherste Weg zu modernen Formaten ist das HTML Element picture. Darin geben Sie zuerst eine AVIF Quelle an, dann eine WebP Quelle. Am Ende steht ein klassisches img Tag mit JPEG. Der Browser wählt das erste Format, das er versteht, und greift sonst auf den Fallback zurück.

Zum Beispiel erstellen Sie für ein Produktfoto drei Dateien: produkt.avif, produkt.webp und produkt.jpg. Anschließend listen Sie diese in dieser Reihenfolge im picture Element auf. Aktuelle Browser bekommen so die kleinste Datei, ältere Geräte zeigen das Bild trotzdem problemlos an.

Google gibt hier zudem einen klaren Hinweis: Manche Browser und Crawler verstehen diese Attribute nicht, deshalb gehört ins img Tag immer ein src als Fallback. Lassen Sie das innere img Tag also nie leer, auch wenn Sie picture verwenden.

Nutzen Sie WordPress, Shopify oder eine ähnliche Plattform, übernimmt das System oder ein CDN diese Aufgabe oft für Sie. Öffnen Sie trotzdem nach der Einrichtung den Quelltext und prüfen Sie, welches Format tatsächlich ankommt. Manche Plugins konvertieren Dateien, setzen das Ergebnis aber nur in bestimmten Vorlagen ein.

In welcher Größe sollten Sie Bilder hochladen?

Bei der Bildoptimierung ist die Regel für die Größe einfach: Laden Sie ein Bild nicht viel größer hoch, als es jemals angezeigt wird. Ist Ihr Blog Inhaltsbereich am Desktop zum Beispiel 800 Pixel breit, ist ein Foto mit 5000 Pixeln reiner Ballast. Für hochauflösende Bildschirme genügt meist etwa die doppelte Anzeigebreite.

In jedem Projekt erstelle ich zunächst eine Liste der Bildgrößen. Sie zeigt, wie viele Pixel jeder Bildbereich der Website hat. Somit muss das Content Team beim Hochladen nicht raten.

  1. Erfassen Sie jeden Bildbereich im Design: Hero, Karte, Produkt, Bild im Artikel, Logo.
  2. Messen Sie die echte Breite jedes Bereichs auf Desktop und Smartphone.
  3. Setzen Sie die doppelte Breite als Obergrenze für hochauflösende Bildschirme.
  4. Legen Sie das Seitenverhältnis fest, etwa 4:3 oder 1:1 für Karten.
  5. Geben Sie diese Liste schriftlich an das Content Team weiter.

Für eine schnelle Verkleinerung hilft das Werkzeug Bild verkleinern. Bei großen Katalogen empfehle ich allerdings, diesen Schritt auf dem Server oder über ein CDN zu automatisieren.

Wie setzen Sie srcset und sizes richtig ein?

Mit srcset geben Sie dem Browser eine Liste von Versionen desselben Bildes in verschiedenen Breiten. Das Attribut sizes beschreibt, wie viel Platz das Bild bei welcher Bildschirmbreite einnimmt. Aus beiden Angaben wählt der Browser dann die passende Datei.

Zum Beispiel bereiten Sie ein Blogbild in 480, 800 und 1600 Pixeln vor. In srcset tragen Sie diese mit ihren Breitenwerten ein. In sizes legen Sie fest: auf dem Smartphone volle Bildschirmbreite, am Desktop 800 Pixel. Somit lädt ein Besucher am Handy die Datei mit 1600 Pixeln gar nicht erst.

Der Leitfaden von web.dev zu responsiven Bildern erklärt dieses Muster mit ausführlichen Beispielen. Den häufigsten Fehler sehe ich bei fehlendem sizes Wert. Dann geht der Browser davon aus, dass das Bild die ganze Breite füllt, und wählt womöglich eine zu große Datei.

  • Prüfen Sie, ob die Breitenwerte in srcset den echten Dateibreiten entsprechen.
  • Schreiben Sie sizes passend zum tatsächlichen Layout.
  • Behalten Sie immer ein src als Fallback.
  • Nutzen Sie picture mit media, wenn Sie mobil einen anderen Bildausschnitt brauchen.

Um auch das mobile Layout insgesamt zu prüfen, lesen Sie meinen Beitrag zum Test der Mobilfreundlichkeit.

Wie finden Sie die richtige Kompressionsstufe?

Kompression ist ein Kernschritt der Bildoptimierung: Sie entfernt Details, die das Auge nicht bemerkt, und verkleinert so die Datei. Verlustbehaftete Kompression eignet sich gut für Fotos. Verlustfreie Kompression ist dagegen für Logos, Screenshots und Grafiken mit scharfen Linien sicherer. Starten Sie also nie eine Stapelverarbeitung, bevor Sie die Qualität selbst angesehen haben.

Mein Ausgangspunkt in der Praxis sieht so aus: Ich speichere Fotos mit mittlerer bis hoher Qualität und betrachte sie in 100 Prozent Ansicht. Sehe ich Artefakte in Gesichtern, in Produktstrukturen oder bei Text, erhöhe ich die Qualität um eine Stufe. Das ist ein Startwert aus der Praxis, keine Garantie für jedes Bild.

Zudem tragen Bilddateien zusätzliche Daten mit sich. Kameramodell, Standort und Farbprofile helfen im Web selten. Entfernen Sie diese Metadaten, sinkt die Dateigröße. Außerdem veröffentlichen Sie so nicht versehentlich Standortdaten. Gerade bei Fotos von Laden oder Büro, die mit dem Smartphone entstanden sind, lohnt sich diese Prüfung.

Schließlich ist Kompression keine einmalige Aufgabe. Durchläuft nicht jeder neue Upload denselben Prozess, wird die Website in wenigen Monaten wieder schwer. Deshalb brauchen Sie eine Regel, die beim Hochladen automatisch greift.

Warum sind Breite und Höhe im img Tag wichtig?

Tragen Sie width und height im img Tag ein, reserviert der Browser den passenden Platz, bevor das Bild ankommt. Fehlen diese Werte, setzt der Browser zuerst den Text. Kommt dann das Bild, schiebt es den Inhalt nach unten. Deshalb springt eine Seite manchmal genau in dem Moment, in dem jemand auf einen Link tippen will.

Dieser Sprung hängt direkt mit der Layoutverschiebung zusammen, einer der Kennzahlen zur Nutzererfahrung bei Google. Alle Kennzahlen erkläre ich hier allerdings nicht. Wie ich Performance messe, beschreibe ich ausführlich im Beitrag zum Google Lighthouse Test.

Die praktische Regel lautet also: Auch wenn CSS das Bild flexibel macht, behalten Sie im HTML Breite und Höhe mit dem echten Seitenverhältnis. Moderne Browser nutzen dieses Verhältnis, um die richtige Fläche freizuhalten. So verhindern Sie den Sprung, ohne auf responsives Design zu verzichten.

Ebenso brauchen Banner, die Sie per CSS als Hintergrund einbinden, dieselbe Sorgfalt. Hat der Container kein festes Seitenverhältnis, kann eine ähnliche Verschiebung entstehen.

Wie priorisieren Sie das wichtigste Bild einer Seite?

Nicht jedes Bild ist gleich wichtig, das gilt auch für die Bildoptimierung. Das große Bild im ersten sichtbaren Bereich prägt den ersten Eindruck. Um ihm Vorrang zu geben, ergänzen Sie im img Tag fetchpriority="high". Dann versucht der Browser, diese Datei vor anderen zu laden.

Bilder weiter unten auf der Seite später zu laden, ist dagegen sinnvoll. Wie diese Technik funktioniert und wann sie schadet, ist ein eigenes Thema, deshalb gehe ich hier nicht ins Detail. Eine Warnung gebe ich trotzdem: Setzen Sie das Hauptbild im ersten Bildschirm nie auf die Liste der verzögert geladenen Bilder.

Den häufigsten Fehler finde ich in Theme Einstellungen, die alle Bilder verzögern. Dann kommt auch das Hero Bild zu spät, und die Seite wirkt langsam. Prüfen Sie daher nach der Installation eines Themes oder Plugins gezielt, wie sich das erste Bild verhält.

Außerdem liefere ich das Hauptbild lieber als img Tag statt als CSS Hintergrund aus. Denn der Browser entdeckt ein img Tag im HTML früher als einen Hintergrund in einer CSS Datei.

Wie schreiben Sie einen guten Alternativtext?

Der Alternativtext ist eine kurze, zum Kontext passende Beschreibung dessen, was ein Bild zeigt. In seinen Empfehlungen zur Bilder SEO rät Google zu informativen Texten ohne Keyword Stuffing. Das Beispiel dort ist anschaulich: Eine Beschreibung wie „Dalmatinerwelpe spielt Apportieren" ist viel wertvoller als eine Liste von Suchbegriffen.

Beim Schreiben stelle ich mir eine Frage: Was muss jemand wissen, der das Bild nicht sieht, um die Seite zu verstehen? Auf einer Produktseite passt zum Beispiel „schwarzer Lederrucksack mit Fronttasche, Seitenansicht". Dagegen schadet „Tasche Tasche günstig Tasche kaufen" der Barrierefreiheit und wirkt wie Spam.

  • Beschreiben Sie Inhalt und Zweck des Bildes auf der Seite.
  • Halten Sie den Text kurz, möglichst höchstens einen Satz.
  • Verzichten Sie auf Füllwörter wie „Bild von" oder „Foto von".
  • Lassen Sie das alt Attribut bei rein dekorativen Bildern leer.
  • Nutzen Sie ein Keyword nur, wenn es natürlich passt.

Möchten Sie auch kurze Texte auf Verständlichkeit prüfen, hilft das Werkzeug Lesbarkeit prüfen.

Spielt der Dateiname für SEO wirklich eine Rolle?

Der Dateiname ist bei der Bildoptimierung ein kleiner Hinweis, der Google hilft zu verstehen, worum es in einem Bild geht. Google empfiehlt beschreibende, knappe Namen statt Kamerabezeichnungen wie IMG00023.JPG. Der Unterschied löst zwar keinen Rankingsprung aus. Das richtige Signal kostet Sie jedoch fast nichts.

Konkret halte ich mich an einfache Regeln. Ich schreibe klein, trenne Wörter mit Bindestrichen und ersetze Umlaute: aus ä wird ae, aus ß wird ss. Statt eines Namens wie „Rotes Sofa FINAL.jpg" beschreibe ich also knapp Farbe und Produkt. So bleibt die Adresse lesbar und funktioniert auf jedem Server.

Zudem empfiehlt Google, Dateinamen bei lokalisierten Inhalten zu übersetzen. Betreiben Sie eine mehrsprachige Website, benennen Sie das Bild auf der deutschen Seite also auf Deutsch und auf der englischen Seite auf Englisch. Den größeren Rahmen dazu finden Sie in meinem Beitrag über SEO für mehrsprachige Websites.

Beim Umbenennen spart der Slug Generator Zeit, denn er wandelt Umlaute und Sonderzeichen automatisch um.

Was ist eine Bild Sitemap und wer braucht sie?

Eine Bild Sitemap ist eine Sitemap, in der Sie Google die Bildadressen Ihrer Seiten gesondert melden. Laut der Google Dokumentation zu Bild Sitemaps hilft sie Google, Bilder zu finden, die es sonst womöglich nicht entdeckt. Pro Seite können Sie mehrere Bildadressen angeben.

Nicht jede Website braucht sie. Auf einer kleinen Firmenwebsite mit normalen img Tags im HTML findet Google die Bilder ohnehin beim Crawlen. Galerien, die Bilder per JavaScript nachladen, große Produktkataloge und fotolastige Websites profitieren dagegen spürbar davon.

Die Dokumentation nennt außerdem ein wichtiges Detail. Liegen Ihre Bilder auf einem CDN, also unter einer anderen Domain, dürfen Sie diese Adressen trotzdem in die Sitemap aufnehmen. Allerdings empfiehlt Google, auch die CDN Domain in der Search Console zu bestätigen.

Beachten Sie zudem: Zusätzliche Tags für Bildunterschrift, Titel und Lizenz aus älteren Anleitungen nutzt Google nicht mehr. Halten Sie die Sitemap daher schlank und nur mit Bildadressen. Eine normale Sitemap erstellen Sie schnell mit dem XML Sitemap Generator.

Warum zählt der Text rund um ein Bild?

Zur Bildoptimierung gehört auch der Kontext, denn Google versteht ein Bild nicht nur über den Alternativtext, sondern auch über den umgebenden Inhalt. Überschrift, Bildunterschrift und Absatz in der Nähe liefern starke Hinweise auf das Thema. Platzieren Sie ein Bild deshalb direkt neben dem passenden Text und nicht in irgendeiner Ecke der Seite.

Auf einer Möbelseite gehört ein Sofafoto zum Beispiel neben den Text über Maße und Stoff dieses Sofas. Zeigen Sie dasselbe Bild nur unten in einer Leiste mit weiteren Produkten, wird der Kontext schwächer. Eine kurze Bildunterschrift lenkt zudem den Blick der Besucher.

Braucht ein Bild eine eigene Seite, formulieren Sie Titel und Beschreibung dieser Seite ebenfalls sinnvoll. Google kann den Seitentitel in der Bildersuche verwenden. Wollen Sie Kontext wie Produkt oder Rezept zusätzlich stärken, helfen strukturierte Daten; passende Markups erstellen Sie mit dem Schema Generator.

In der Praxis nutze ich einen einfachen Test. Ich blende das Bild aus und lese nur den Text. Lässt der Text erraten, was das Bild zeigt, ist der Kontext stark. Andernfalls ergänze ich ein bis zwei Sätze daneben.

Welche Werkzeuge eignen sich für die Bildoptimierung?

Die Wahl der Werkzeuge hängt von der Größe der Website und vom technischen Können des Teams ab. Ein kleines Unternehmen mit wenigen Bildern kann nicht dieselbe Methode nutzen wie ein Onlineshop, der täglich hunderte Produktfotos einstellt. Deshalb denke ich in drei Stufen.

  • Manuelle Bearbeitung: Bildbearbeitung am Desktop und Kompressoren im Browser. Für Websites mit wenigen Bildern ausreichend.
  • CMS Plugin: Verkleinert, konvertiert und komprimiert beim Hochladen. Prüfen Sie unbedingt die Einstellungen.
  • Bild CDN oder Verarbeitung auf dem Server: Erzeugt das Bild bei jeder Anfrage passend zum Gerät. Für große Kataloge der am besten skalierbare Weg.

Zum Messen zeigen Lighthouse und PageSpeed Insights, wo Sie anfangen sollten. Hinweise wie „Bilder richtig dimensionieren" oder „Bilder in modernen Formaten bereitstellen" markieren die größten Hebel. Lesen Sie diese Hinweise wie eine Aufgabenliste und messen Sie nach jeder Korrektur erneut.

Möchten Sie Bildoptimierung von Anfang an in ein Webprojekt einplanen, setze ich diese Punkte im Rahmen meines Webdesigns auf die Checkliste vor dem Livegang.

Wie gehen Onlineshops mit Produktbildern um?

Im E-Commerce erreicht die Zahl der Bilder schnell die Tausender, daher scheitert jede manuelle Routine irgendwann. Mein erster Schritt ist deshalb ein schriftlicher Bildstandard. Er legt Seitenverhältnis, Hintergrund und Pixelbreite jedes Produktfotos fest. Ohne diesen Standard liefert auch die Automatisierung uneinheitliche Ergebnisse.

Die größte Falle sind riesige Originaldateien für die Zoomfunktion, die auch in Listenansichten landen. Erstellen Sie deshalb für die Karte in der Kategorieansicht eine eigene, kleine Version. Die große Datei lädt der Browser dann erst, wenn jemand hineinzoomt.

Verwenden Sie außerdem für jede Farbvariante ein eigenes, sauber benanntes Bild. Dann findet jemand, der in der Bildersuche nach „dunkelblaues Leinenhemd" sucht, die richtige Variante. Wollen Sie Ihren Shop insgesamt prüfen lassen, entwickeln wir solche Standards gemeinsam in meiner E-Commerce Beratung.

Denken Sie schließlich daran, dass Kategorieseiten dutzende Bilder gleichzeitig zeigen. Kleine Versionen senken dort das Gesamtgewicht der Seite am stärksten.

Welche Fehler bei der Bildoptimierung sollten Sie vermeiden?

Bei der Bildoptimierung habe ich über die Jahre auf ganz unterschiedlichen Websites dieselben Fehler gesehen. Die meisten entstehen nicht aus Nachlässigkeit, sondern aus dem Gefühl „Plugin installiert, Aufgabe erledigt". Die folgende Liste stammt aus meinen häufigsten Notizen bei Audits.

  1. Bildadressen ändern, ohne die alten weiterzuleiten. Traffic aus der Bildersuche kann dadurch verschwinden.
  2. Dasselbe Bild mehrfach unter verschiedenen Namen hochladen und die Mediathek aufblähen.
  3. Text ins Bild einbetten, den weder Google noch Screenreader gut lesen können.
  4. Den Bildordner versehentlich in der robots.txt sperren.
  5. Produktfotos so stark komprimieren, dass sie unscharf wirken.
  6. Einfache Grafiken wie Logos in einem schweren Fotoformat belassen.

Der erste Punkt passiert besonders oft bei einem Relaunch. Deshalb nehme ich Bildadressen in die Checkliste meines Beitrags SEO beim Website Relaunch schützen auf. Weiterleitungen prüfen Sie am besten mit dem Redirect Checker.

Wie messen Sie die Ergebnisse der Bildoptimierung?

Bildoptimierung ohne Messung bleibt eine Vermutung. Vor jedem Projekt halte ich den Ist Zustand einiger wichtiger Seiten fest: Gesamtgewicht, Anzahl der Bilder, Größe des größten Bildes und Laborwerte. Danach setze ich die Änderungen um und messe dieselben Seiten unter denselben Bedingungen erneut.

Labortests liefern schnelles Feedback. Allerdings zählen auch echte Nutzerdaten. Die Berichte zur Nutzererfahrung in der Search Console zeigen mit der Zeit, ob die Verbesserung bei echten Besuchern ankommt. Diese Daten kommen mit einigen Wochen Verzögerung, also brauchen Sie etwas Geduld.

Für die Bildersuche wählen Sie im Leistungsbericht der Search Console den Suchtyp „Bild". So sehen Sie getrennt, bei welchen Suchanfragen Ihre Bilder erscheinen und Klicks erhalten. Die Wirkung neuer Dateinamen und Alternativtexte zeigt sich dort natürlich erst nach einiger Zeit.

Führen Sie die Ergebnisse am besten in einer einfachen Tabelle mit Datum, Seite, Änderung und Messwert. Somit stützen Sie Ihre nächste Entscheidung auf Daten. Und Monate später können Sie genau sagen, woher eine Verbesserung kam.

Wie sieht eine Checkliste zur Bildoptimierung Schritt für Schritt aus?

Fassen wir alles in einer praktischen Reihenfolge zusammen. Diese Abfolge nutze ich, wenn ich eine neue Website starte oder eine bestehende überarbeite. Schließen Sie jeden Schritt ab, bevor Sie den nächsten beginnen, dann sehen Sie leichter, welche Änderung was bewirkt hat.

  1. Listen Sie die schwersten Bilder der Website auf.
  2. Legen Sie für jeden Bildbereich eine Zielgröße fest.
  3. Wandeln Sie Fotos in WebP oder AVIF und Logos in SVG um.
  4. Definieren Sie Fallbacks mit picture und responsive Versionen mit srcset und sizes.
  5. Legen Sie die Kompression nach Sichtprüfung fest und entfernen Sie Metadaten.
  6. Ergänzen Sie Breite und Höhe in jedem img Tag.
  7. Geben Sie dem Hauptbild im ersten Bildschirm Vorrang.
  8. Überarbeiten Sie Alternativtexte und Dateinamen.
  9. Erstellen Sie bei Bedarf eine Bild Sitemap und reichen Sie sie in der Search Console ein.
  10. Dokumentieren Sie Messwerte vorher und nachher.

Halten Sie diese Reihenfolge schriftlich fest, sprechen Agentur, Entwickler und Content Team dieselbe Sprache. Ich lege die Liste als Vorlage im Projektmanagement an, sodass jede neue Seite diese Aufgaben automatisch mitbringt. Folglich hängt die Kontrolle am Prozess und nicht am Gedächtnis einer Person.

Die Liste wirkt technisch, doch die meisten Schritte laufen nach der Einrichtung von selbst. Die eigentliche Herausforderung besteht darin, dass das Content Team bei jedem neuen Upload diszipliniert bleibt.

Sollten Sie Bildoptimierung selbst umsetzen oder Hilfe holen?

Auf einer kleinen Firmenwebsite setzen Sie die meisten Schritte dieses Beitrags selbst um. Einige Dutzend Bilder zu verkleinern und Dateinamen sowie Alternativtexte zu überarbeiten, dauert wenige Stunden. Auf einer fertigen Plattform lösen zudem die Plugin Einstellungen einen großen Teil der Arbeit.

Bei tausenden Produktbildern, einem CDN und einem eigenen Theme wird die Aufgabe dagegen zu einem technischen Projekt. Konvertierung auf dem Server, Cache Regeln und Weiterleitungen alter Adressen kosten Traffic, wenn etwas schiefgeht. In diesem Fall senkt die Zusammenarbeit mit einem Spezialisten die Kosten für Versuch und Irrtum.

Ich behandle Bildoptimierung meist als Teil eines umfassenden technischen Audits. Denn es ist effizienter, Bildkorrekturen gemeinsam mit den übrigen technischen Baustellen zu priorisieren. Passt das zu Ihrem Bedarf, finden Sie den Umfang auf der Seite zur SEO Beratung. Zusammengefasst: Messen Sie zuerst und beginnen Sie dann mit der schwersten Datei.

Häufig gestellte Fragen

Verbessert Bildoptimierung direkt das Ranking?
Allein garantiert sie kein Ranking, sie hilft aber auf zwei Wegen. Erstens laden Seiten mit leichteren Bildern schneller, und die Nutzererfahrung steigt. Zweitens erscheinen Ihre Bilder dank gutem Alternativtext, passendem Dateinamen und Kontext eher in der Google Bildersuche. Wie stark der Effekt ausfällt, hängt vom Zustand der übrigen Website ab.
Soll ich WebP oder AVIF verwenden?
Sie können beide nutzen. Am sichersten liefern Sie über das picture Element zuerst AVIF, dann WebP und zuletzt JPEG aus. Google gibt an, dass verlustbehaftete WebP Dateien 25 bis 34 Prozent kleiner sind als vergleichbare JPEG Dateien. AVIF fällt bei vielen Fotos noch kleiner aus, ein Test mit eigenen Bildern gibt die sicherste Antwort.
Gehören Keywords in den Alternativtext?
Nur wenn das Keyword das Bild natürlich beschreibt. Google empfiehlt informative Alternativtexte und warnt vor Keyword Stuffing. Ein guter Text erklärt jemandem, der das Bild nicht sieht, was darauf zu sehen ist. Wie eine Keywordliste formulierte Texte schaden der Barrierefreiheit und wirken auf Suchmaschinen schnell wie Spam.
Braucht jede Website eine Bild Sitemap?
Nein, nicht jede Website braucht sie. Auf kleinen Websites mit normalen img Tags findet Google die Bilder beim Crawlen ohnehin. Sinnvoll ist eine Bild Sitemap vor allem für Galerien mit JavaScript, große Produktkataloge und fotolastige Websites. Liegen die Bilder auf einem CDN, sollten Sie diese Domain zusätzlich in der Search Console bestätigen.
In welcher Breite sollte ich Bilder hochladen?
Meist genügt etwa die doppelte Breite des größten Bereichs, in dem das Bild erscheint. Bei einem Inhaltsbereich mit 800 Pixeln sind 1600 Pixel eine sinnvolle Obergrenze. Stellen Sie zudem kleinere Versionen per srcset bereit, laden mobile Besucher keine übergroßen Dateien. Betrachten Sie das als Startregel und passen Sie es an Ihr Design an.
Wie sollte ich Bilddateien benennen?
Nutzen Sie kurze, beschreibende Namen in Kleinbuchstaben und trennen Sie Wörter mit Bindestrichen. Ersetzen Sie Umlaute und ß, damit die Adresse auf jedem Server funktioniert. Vermeiden Sie allgemeine Namen wie image1.jpg oder Kamerabezeichnungen. Bei mehrsprachigen Websites übersetzen Sie den Dateinamen in die Sprache der jeweiligen Seite, wie Google es empfiehlt.
#Bildoptimierung#WebP#AVIF#srcset#Alternativtext#Bild Sitemap#Ladezeit#technisches SEO
Teilen:
Talha Aslan
Talha Aslan

Google Partner und Experte für digitales Marketing. Seit 2012 praktisch in SEO, Google Ads, Webdesign und E-Commerce Projekten; jeder Beitrag hier stammt aus dieser Erfahrung.

Nächstes Projekt

Sprechen wir über Ihr Projekt.

Keine Zwischenhändler, keine Ebenen: Sie sprechen direkt mit dem Experten, der die Arbeit macht. Das Erstgespräch ist kostenlos, ich höre zu und melde mich mit einer klaren Roadmap.

WhatsApp Jetzt anrufen