Bei vielen langsamen Seiten, die wir prüfen, bremst ein ganz normales Foto, das viel größer ist als nötig. Wer Bilder komprimieren will, hat zwei Stellschrauben: die Abmessungen in Pixeln und die Kompression der Datei. Beide wirken unabhängig voneinander, und beide lassen sich mit wenig Werkzeug in den Griff bekommen. Dieser Ratgeber zeigt, wie Sie Zielgrößen festlegen, wie der Browser die passende Datei wählt und woran Sie erkennen, dass ein Bild zu schwer ist.
Warum die Dateigröße zählt
Bilder sind laut web.dev oft die schwerste und häufigste Ressource im Web [1]. Google schreibt in seinen Empfehlungen zur Bildersuche, Bilder trügen oft den Hauptteil zur gesamten Seitengröße bei, und empfiehlt Werkzeuge wie PageSpeed Insights zur Prüfung [2]. Jedes Kilobyte, das ein Bild zu viel hat, muss übers Netz, bevor die Seite fertig ist. Besonders teuer ist das beim größten Bild im sichtbaren Bereich, weil es den Largest Contentful Paint bestimmen kann. Diese Verbindung beschreibt der Ratgeber Bilder und Core Web Vitals ausführlich.
Abmessungen: so groß wie angezeigt
Die wichtigste Regel ist einfach: Liefern Sie kein Bild aus, das deutlich breiter ist als der Platz, in dem es erscheint. web.dev rechnet ein Beispiel vor: Wird ein quadratisches Bild mit 1.000 Pixeln in einem Platz von 500 Pixeln gezeigt, ist es doppelt so groß wie nötig [1].
Eine Ausnahme bilden Bildschirme mit hoher Pixeldichte. Seit dem iPhone 4 entspricht dort ein CSS-Pixel zwei Gerätepixeln [1]. Ein Bild für 500 CSS-Pixel braucht auf solchen Geräten also bis zu 1.000 Pixel Breite, um scharf zu wirken. Nach oben gibt es aber eine Grenze: web.dev schreibt, das menschliche Auge könne in den meisten Fällen von einer Pixeldichte von 3 nicht profitieren, und ein Bild etwas unter der rechnerisch optimalen Größe sei oft ausreichend [1].
Für die Praxis heißt das: Legen Sie für jeden Bildtyp Ihrer Website eine Zielbreite fest. Ein Artikelbild über die volle Lesespalte, ein Bild im Text, ein Vorschaubild auf einer Karte und ein Produktbild in der Galerie haben jeweils andere Maße. Notieren Sie die größte Anzeigebreite und verdoppeln Sie sie für hohe Pixeldichten.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Mindestgrößen, die Google verlangt
Kleiner ist nicht immer besser. Einige Google-Funktionen setzen Mindestmaße voraus. Für große Bilder in Discover empfiehlt Google mindestens 1.200 Pixel Breite und mehr als 300.000 Pixel insgesamt [3]. Für Bilder in strukturierten Daten von Artikeln nennt Google mindestens 50.000 Pixel, gerechnet als Breite mal Höhe [4]. Das Merchant Center verlangt für alle Produktbilder ab dem 31.01.2027 mindestens 500 mal 500 Pixel und empfiehlt, wenn möglich, mindestens 1.500 mal 1.500 Pixel [5].
Diese Größen betreffen die Datei, die Google als Vorschaubild oder Produktbild abruft. Sie zwingen Sie nicht, im Fließtext riesige Bilder auszuliefern. Häufig ist die Lösung eine große Fassung für og:image und Feed und kleinere Fassungen für die Anzeige auf der Seite.
srcset und sizes: der Browser wählt
Mit den Attributen srcset und sizes geben Sie dem Browser mehrere Fassungen eines Bildes zur Auswahl. Jede Quelle im srcset braucht die Bildadresse und eine Angabe zur Breite oder zur Pixeldichte [1]. Das Attribut sizes beschreibt, wie breit das Bild in CSS-Pixeln angezeigt werden soll [1]. Ein Beispiel aus web.dev: sizes="(min-width: 768px) 500px, 100vw" bedeutet 500 Pixel auf breiten Bildschirmen und volle Breite darunter [1]. web.dev weist auf eine Falle hin: Breitenangaben im srcset funktionieren nur zusammen mit dem Attribut sizes [1].
Google empfiehlt bei responsiven Bildern zusätzlich, immer eine Ausweich-Adresse im src-Attribut anzugeben, weil nicht alle Browser und Crawler srcset verstehen [2]. Viele Redaktionssysteme erzeugen die Fassungen beim Hochladen selbst. Prüfen Sie im Quelltext, ob srcset tatsächlich ausgegeben wird und ob die Vorlage sizes passend setzt.
Kompression: verlustbehaftet oder verlustfrei
Beim Speichern entscheiden Sie zwischen zwei Verfahren. Verlustfreie Kompression verkleinert die Datei ohne Datenverlust [1]. Verlustbehaftete Kompression verwirft Informationen und wirkt nach web.dev am stärksten bei Bildern mit vielen Details, Rauschen und Farben [1], also bei Fotos. Für Grafiken mit Schrift oder wenigen Farbflächen ist verlustfreie Kompression meist die bessere Wahl.
Eine allgemeingültige Qualitätsstufe gibt es nicht. web.dev rät, mit verschiedenen Stufen zu experimentieren, bis Sie einen guten Kompromiss zwischen Bildqualität und Dateigröße finden, und das Ergebnis immer selbst zu prüfen [1]. Ein praktikabler Weg: Speichern Sie ein typisches Motiv in mehreren Stufen, legen Sie die Ergebnisse in Originalgröße nebeneinander und wählen Sie die niedrigste Stufe, bei der Sie keinen störenden Unterschied sehen. Diese Stufe gilt dann für alle ähnlichen Bilder. Welches Format dabei die kleinste Datei liefert, vergleicht der Ratgeber Bildformate im Vergleich.
Übergroße Bilder finden
Lighthouse, das Prüfwerkzeug in Chrome und in PageSpeed Insights, hatte dafür zwei eigene Prüfungen. Bei "Properly size images" vergleicht Lighthouse für jedes Bild die angezeigte Größe mit der tatsächlichen Größe und berücksichtigt dabei die Pixeldichte; ist die angezeigte Fassung mindestens 4 KiB kleiner als die ausgelieferte, fällt das Bild durch [6]. Bei "Efficiently encode images" setzt Lighthouse jedes JPEG- und BMP-Bild testweise auf die Kompressionsstufe 85 und meldet es, wenn sich dadurch 4 KiB oder mehr sparen lassen [7]. Seit Lighthouse 13 sind diese Prüfungen in der Auswertung "Improve image delivery" zusammengefasst [7].
Lighthouse prüft immer nur die eine Seite, die Sie testen. Für eine ganze Website ist ein Crawler praktischer, der zu jeder Bildadresse die Dateigröße ausgibt. Sortieren Sie die Liste absteigend und beginnen Sie mit den Bildern, die auf vielen Seiten oder auf wichtigen Seiten vorkommen.
Bild-CDN als Alternative
Wer sehr viele Bilder pflegt, etwa in einem Shop mit Tausenden Produkten, muss nicht jede Fassung von Hand anlegen. Neben responsiven Bildern nennt die Lighthouse-Dokumentation Bild-CDNs als zweite Hauptstrategie für passend große Bilder: Sie erzeugen die gewünschte Fassung auf Anfrage, ähnlich wie eine Programmierschnittstelle [6]. Die gewünschte Breite, das Format und die Qualität stehen dabei meist als Parameter in der Bildadresse. Das spart Arbeit, bringt aber eine Abhängigkeit von einem weiteren Dienst und wirft die Frage auf, unter welcher Domain die Bilder ausgeliefert werden. Google erwähnt Bilder auf CDNs ausdrücklich und empfiehlt für diesen Fall eine Bild-Sitemap sowie die Bestätigung der CDN-Domain in der Search Console [2].
Ein Ablauf für neue Bilder
- Bildtyp bestimmen und die Zielbreite aus Ihrer Liste nehmen.
- Auf die doppelte Anzeigebreite zuschneiden, für Vorschaubilder und Produktfeeds die größere Fassung zusätzlich anlegen.
- In WebP oder AVIF speichern, mit der festgelegten Qualitätsstufe.
- Im HTML width und height angeben; web.dev rät, diese Attribute bei Bildern immer zu setzen [8].
- Nach dem Veröffentlichen eine Seite mit PageSpeed Insights prüfen.
Wer mit WordPress, Joomla oder Shopware arbeitet, findet die passenden Einstellungen der Systeme auf unseren Fachportalen, etwa unter Bilder in Shopware optimieren. Die Kurzantwort zur Frage, wie groß ein Bild sein darf, steht in den FAQ: Wie groß dürfen Bilder auf einer Website sein?
Sie haben eine Liste übergroßer Bilder, wissen aber nicht, wo im System die Größen entstehen? Stellen Sie die Frage in der gratis Sprechstunde, dort gehen wir gemeinsam ein Beispiel durch.
- Organisation Image performance. web.dev, Google. Stand 01.11.2023. abgerufen am 31.10.2026
- Organisation Best Practices für Bilder in der Google Suche. Google Search Central. Stand 04.03.2026. abgerufen am 31.10.2026
- Organisation Google Discover. Google Search Central. Stand 11.03.2026. abgerufen am 31.10.2026
- Organisation Strukturierte Daten für Artikel. Google Search Central. Stand 12.09.2026. abgerufen am 31.10.2026
- Organisation Bildlink (image_link). Google Merchant Center-Hilfe. Stand ohne Datum. abgerufen am 31.10.2026
- Organisation Properly size images. Chrome for Developers. Stand 02.05.2019. abgerufen am 31.10.2026
- Organisation Efficiently encode images. Chrome for Developers. Stand 02.05.2019. abgerufen am 31.10.2026
- Organisation Optimize Cumulative Layout Shift. web.dev, Google. Stand 07.02.2025. abgerufen am 31.10.2026
Häufige Fragen
Wie breit sollte ein Bild auf meiner Website sein?
So breit wie der Platz, in dem es erscheint, mal zwei für Bildschirme mit hoher Pixeldichte. Ein Bild für eine Spalte von 800 Pixeln braucht also höchstens rund 1.600 Pixel Breite.
Welche Qualitätsstufe ist richtig?
Das hängt vom Motiv ab. Speichern Sie ein typisches Bild in mehreren Stufen, vergleichen Sie in Originalgröße und nehmen Sie die niedrigste Stufe ohne störenden Unterschied. Lighthouse testet zum Vergleich mit Stufe 85.
Reicht es, wenn mein Redaktionssystem Bilder automatisch verkleinert?
Nur wenn die Vorlage die kleineren Fassungen auch ausliefert. Prüfen Sie im Quelltext, ob srcset und sizes gesetzt sind und welche Datei der Browser tatsächlich lädt.
Gibt es Mindestgrößen für Bilder?
Für einzelne Google-Funktionen ja: Discover empfiehlt mindestens 1.200 Pixel Breite, strukturierte Daten für Artikel mindestens 50.000 Pixel Fläche, das Merchant Center ab dem 31.01.2027 mindestens 500 mal 500 Pixel.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Haben Sie einen Fehler entdeckt? Schreiben Sie uns.
