Bilder machen eine Website lebendig und sind zugleich oft der Grund, warum sie langsam lädt. Google weist darauf hin, dass Bilder häufig den größten Teil der Seitengröße ausmachen und eine Seite verlangsamen können [1]. Ein Foto direkt aus der Kamera wiegt schnell mehrere Megabyte, obwohl es auf der Seite nur in einem Kasten von 800 Pixeln Breite erscheint. Diese Seite zeigt in der Reihenfolge, in der wir selbst vorgehen, wie du Bilder für deine Website vorbereitest: vom Zuschnitt über Format und Komprimierung bis zur Einbindung im HTML.
Warum Bildoptimierung wichtig ist
Der erste Grund ist die Ladezeit. Google misst die wahrgenommene Ladegeschwindigkeit unter anderem mit dem Largest Contentful Paint, kurz LCP. Er misst, wann das größte sichtbare Bild, der größte Textblock oder das größte Video im sichtbaren Bereich fertig dargestellt ist. Als gut gelten 2,5 Sekunden oder weniger, gemessen an 75 Prozent der Seitenaufrufe [2]. Bilder zählen ausdrücklich zu den Elementen, die den LCP bestimmen können, auch Hintergrundbilder aus CSS [2]. Auf vielen Seiten ist das große Bild oben im Kopf genau dieses Element.
Der zweite Grund ist die Stabilität beim Laden. Bilder ohne angegebene Größe gehören nach web.dev zu den häufigsten Ursachen für Layoutverschiebungen, gemessen als Cumulative Layout Shift. Der Browser kann keinen Platz reservieren, bis das Bild geladen ist, und der Text darunter springt [3]. Als gut gilt ein Wert von 0,1 oder weniger [3]. Der dritte Grund ist die Bildersuche: Google nutzt Dateinamen und umgebenden Text als Hinweis auf das Thema eines Bildes [1].
Schritt 1: die richtige Größe
Bring jedes Bild auf die Größe, in der es angezeigt wird, mit etwas Reserve für Bildschirme mit hoher Pixeldichte. Ein Bild, das in einer Lesespalte von 800 Pixeln steht, braucht keine 6.000 Pixel Breite. In unseren Projekten legen wir für jede Bildart eine Zielbreite fest, zum Beispiel für Artikelbilder, Bilder im Text und Vorschaubilder auf Karten, und schneiden danach zu.
Damit Smartphones keine Bilder für große Bildschirme laden, empfiehlt Google die Attribute srcset und sizes am img-Element oder das picture-Element. Ein Ausweichwert im src-Attribut sollte immer dabei sein, weil manche Browser und Crawler diese Attribute nicht verstehen [1]. Wie das im Detail funktioniert, beschreibt unser Ratgeber zu responsiven Bildern mit srcset.
Video zu deinem Thema? Jan macht das.
Schreib Jan, worum es gehen soll. Die Anfrage geht an 301@seo-manager.info, die Abstimmung läuft über SEO NW.
Schritt 2: das passende Format
Google unterstützt in der Suche die Formate BMP, GIF, JPEG, PNG, WebP, SVG und AVIF [1]. Für Fotos sind heute WebP und AVIF meist die beste Wahl, weil sie nach web.dev im Allgemeinen besser komprimieren als ältere Formate [5]. PNG bleibt für Grafiken mit wenigen Farben und Transparenz sinnvoll, SVG für Logos und Symbole, die bei jeder Größe scharf bleiben sollen. Die Dateiendung sollte nach Google zum tatsächlichen Dateityp passen [1]. Einen Vergleich der neuen Formate findest du im Ratgeber WebP und AVIF.
Schritt 3: komprimieren
Beim Komprimieren entscheidest du, wie viel Qualität du für eine kleinere Datei aufgibst. Bei Fotos fällt eine moderate Komprimierung auf dem Bildschirm kaum auf. Wir vergleichen bei jedem neuen Motivtyp einmal mehrere Stufen nebeneinander in Originalgröße und legen dann eine Stufe fest, die für alle ähnlichen Bilder gilt. So muss nicht jedes Bild einzeln beurteilt werden.
Achte beim Speichern auch auf Metadaten. Kameras und Smartphones schreiben Angaben wie Aufnahmedatum, Kameramodell und manchmal den Aufnahmeort in die Datei. Für die Website braucht es diese Angaben meist nicht, sie machen die Datei größer und können mehr verraten als gewollt, etwa die Adresse eines Kunden, bei dem ein Referenzfoto entstanden ist. Viele Bildprogramme entfernen sie beim Export, wenn man die Option dafür wählt.
Viele Content-Management-Systeme komprimieren beim Hochladen automatisch oder erzeugen mehrere Größen. Prüf trotzdem, welche Datei am Ende ausgeliefert wird. Es kommt vor, dass das System zwar kleinere Fassungen erzeugt, das Template aber trotzdem das Original lädt. Ein Test mit PageSpeed Insights, den Google für die Prüfung der Leistung empfiehlt, zeigt solche Fälle [1].
Schritt 4: Breite, Höhe und Lazy Loading
Gib bei jedem Bild im HTML die Attribute width und height an. web.dev schreibt dazu, man solle diese Attribute bei Bildern und Videos immer setzen [3]. Alternativ lässt sich der Platz mit der CSS-Eigenschaft aspect-ratio reservieren [3]. Fehlen die Angaben, behandelt der Browser Bilder zunächst als 0 mal 0 Pixel, was beim verzögerten Laden sogar dazu führen kann, dass er alle Bilder einer Galerie lädt [4].
Bilder, die erst beim Scrollen sichtbar werden, lädst du mit dem Attribut loading="lazy" verzögert. Das funktioniert in allen gängigen Browsern ohne JavaScript, und Browser ohne Unterstützung ignorieren das Attribut einfach [4]. Wichtig ist die Ausnahme: Bilder, die beim Laden wahrscheinlich im sichtbaren Bereich liegen, vor allem das LCP-Bild, sollen nicht verzögert geladen werden [4]. Für dieses eine wichtige Bild empfiehlt web.dev stattdessen fetchpriority="high" [4].
Schritt 5: Dateiname, Alt-Text und Umgebung
Google empfiehlt kurze, beschreibende Dateinamen und rät von allgemeinen Namen wie image1.jpg oder 1.jpg ab [1]. Bei mehrsprachigen Websites sollten auch die Dateinamen übersetzt werden [1]. Jedes Bild mit Inhalt braucht außerdem einen Alt-Text, der beschreibt, was zu sehen ist. Wie du ihn schreibst, steht im Ratgeber Alt-Texte für Bilder schreiben.
Wo ein Bild steht, zählt ebenfalls. Google empfiehlt, Bilder in der Nähe von passendem Text zu platzieren [1]. Hintergrundbilder aus CSS indexiert Google nicht, Bilder findet der Crawler im src-Attribut von img-Elementen [1]. Ein Bild, das in der Bildersuche erscheinen soll, gehört also als img-Element in den Inhalt.
Bilder für die Vorschau beim Teilen
Für die Vorschau, die beim Teilen in sozialen Netzwerken und teils in der Suche erscheint, kannst du ein bevorzugtes Bild über og:image oder die schema.org-Eigenschaft primaryImageOfPage festlegen. Google rät dabei, ein relevantes Bild in hoher Auflösung zu wählen und Logos, Bilder mit Text und extreme Seitenverhältnisse zu meiden [1]. Für jede wichtige Seite lohnt sich ein eigenes Vorschaubild statt eines einzigen für die ganze Website.
Eine kurze Prüfliste
- Ist das Bild höchstens so groß, wie es angezeigt wird, mit Reserve für hohe Pixeldichte?
- Liegt es als WebP oder AVIF vor, mit passender Komprimierung?
- Stehen width und height im HTML?
- Wird es nur dann verzögert geladen, wenn es unterhalb des sichtbaren Bereichs liegt?
- Hat es einen sprechenden Dateinamen und einen passenden Alt-Text?
Wie Bilder mit den Core Web Vitals zusammenhängen, vertieft der Ratgeber Bilder und Core Web Vitals auf unserer Hauptseite. Das Bearbeiten der Fotos selbst übernimmst du oder dein Fotograf, SEO NW bietet keine Fotobearbeitung an. Soll neben den Bildern ein Video auf die Seite, das trotzdem schnell lädt? Frag bei Jan an, er übernimmt bei SEO NW die Videoproduktion.
- Organisation Best Practices für Bilder in der Google Suche. Google Search Central. Stand 04.03.2026. abgerufen am 30.10.2026
- Organisation Largest Contentful Paint (LCP). web.dev, Google. Stand 04.09.2025. abgerufen am 30.10.2026
- Organisation Optimize Cumulative Layout Shift. web.dev, Google. Stand 07.02.2025. abgerufen am 30.10.2026
- Organisation Browser-level image lazy loading for the web. web.dev, Google. Stand 13.08.2024. abgerufen am 30.10.2026
- Organisation Choose the right image format. web.dev, Google. Stand 13.08.2024. abgerufen am 31.10.2026
Häufige Fragen
Wie groß sollte ein Bild für eine Website sein?
So groß, wie es angezeigt wird, mit etwas Reserve für Bildschirme mit hoher Pixeldichte. Mit srcset und sizes kann der Browser je nach Gerät eine passende Größe laden.
Welches Bildformat ist am besten?
Für Fotos meist WebP oder AVIF, für Logos und Symbole SVG, für Grafiken mit wenigen Farben und Transparenz PNG. Google unterstützt alle diese Formate in der Suche.
Soll ich alle Bilder lazy laden?
Nein. Bilder im sichtbaren Bereich beim Laden, vor allem das größte Bild oben, sollen sofort laden. web.dev empfiehlt für dieses Bild fetchpriority="high".
Warum springt mein Text beim Laden der Seite?
Oft fehlen bei den Bildern die Angaben width und height. Dann kann der Browser keinen Platz reservieren, und der Inhalt verschiebt sich, sobald das Bild geladen ist.
Werden Hintergrundbilder in der Bildersuche gefunden?
Nein. Google indexiert keine Hintergrundbilder aus CSS. Bilder, die gefunden werden sollen, gehören als img-Element in den Inhalt.
Video anfragen bei Jan
Schreib Jan, worum es gehen soll. Die Anfrage geht an 301@seo-manager.info, die Abstimmung läuft über SEO NW.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
