Bilder machen Inhalte verständlich – und sie sind auf vielen Websites der größte Grund für lange Ladezeiten. Gleichzeitig sind sie für Suchmaschinen schwer zu lesen: Ohne Text drumherum weiß Google nur ungefähr, was ein Bild zeigt. Diese Anleitung erklärt, wie Sie Bilder in Größe, Format und Beschreibung so vorbereiten, dass sie schnell laden und richtig verstanden werden.
Abmessung und Dateigröße sind zwei verschiedene Dinge
Die Abmessung ist die Zahl der Pixel in Breite und Höhe, etwa 4000 × 3000 Pixel. Die Dateigröße ist das Gewicht der Datei, etwa 3,4 MB. Ein Foto direkt aus der Kamera hat oft beides im Übermaß. Wird es auf der Website nur 800 Pixel breit angezeigt, lädt der Browser trotzdem die volle Datei – und der Besucher wartet.
Die Regel ist einfach: Liefern Sie Bilder nicht größer aus, als sie angezeigt werden – mit Reserve für hochauflösende Bildschirme. Für ein Bild, das 800 Pixel breit dargestellt wird, reichen meist Varianten mit 800 und 1600 Pixeln Breite.

Das passende Format
- WebP und AVIF: Moderne Formate mit deutlich kleineren Dateien bei gleicher Qualität. Alle aktuellen Browser unterstützen sie.
- JPEG: Für Fotos weiterhin geeignet, wenn moderne Formate nicht möglich sind.
- PNG: Für Grafiken mit Transparenz oder scharfen Kanten – für Fotos fast immer zu schwer.
- SVG: Für Logos und Symbole, die bei jeder Größe scharf bleiben sollen.

Mehrere Größen mit srcset
Mit dem Attribut srcset bietet eine Seite dasselbe Bild in mehreren Breiten an, und der Browser wählt die passende Variante für den Bildschirm. WordPress erzeugt diese Varianten beim Hochladen automatisch, solange das Bild über die Mediathek eingebunden wird.
Breite und Höhe angeben
Steht im HTML die Breite und Höhe eines Bildes, kann der Browser den Platz reservieren, bevor das Bild geladen ist. Fehlen die Angaben, springt der Text nach unten, sobald das Bild erscheint. Diese Verschiebung misst der Wert CLS, mehr dazu im Beitrag Core Web Vitals verbessern.

Lazy Loading – aber nicht überall
Mit loading=“lazy“ lädt der Browser Bilder erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Das spart Daten bei langen Seiten. Das wichtigste Bild im ersten Bildschirm sollte dagegen sofort laden, sonst erscheint der Hauptinhalt später.
Alternativtexte richtig schreiben
Der Alternativtext beschreibt, was auf dem Bild zu sehen ist. Er wird von Screenreadern vorgelesen und hilft Suchmaschinen, das Bild einzuordnen.
- Gut: „Balkendiagramm: Klicks aus der Google-Suche von Januar bis Juni, mit Anstieg im April“.
- Schlecht: „IMG_2034“ oder „Bild“.
- Ebenfalls schlecht: „SEO automatisieren SEO Tools SEO Automatisierung“ – eine Aufzählung von Suchbegriffen ist keine Beschreibung.
- Dekorative Bilder: Reine Schmuckgrafiken erhalten ein leeres alt-Attribut, damit Screenreader sie überspringen.

Dateinamen
Ein beschreibender Dateiname hilft ein wenig bei der Einordnung und viel bei der Pflege. Verwenden Sie Kleinbuchstaben und Bindestriche und verzichten Sie auf Leerzeichen, Umlaute und ß: „klicks-diagramm-halbjahr.webp“ statt „Klicks Übersicht Größe.PNG“.
Text gehört nicht nur ins Bild
Informationen, die nur in einer Grafik stehen, kann Google kaum lesen. Steht in einer Infografik eine wichtige Zahl oder Aussage, sollte sie zusätzlich im Text der Seite vorkommen.

Bilder für Vorschauen und strukturierte Daten
Für Artikel empfiehlt Google hochauflösende Bilder; für die Anzeige in Google Discover sollten sie mindestens 1200 Pixel breit sein. Für Vorschauen in sozialen Netzwerken hat sich ein Format von 1200 × 630 Pixeln etabliert. Wichtig ist, dass die angegebene Bildadresse tatsächlich erreichbar ist und das Bild zum Inhalt passt.
Übliche Größen im Überblick
| Verwendung | Empfohlene Größe |
|---|---|
| Vorschaubild für soziale Netzwerke | 1200 × 630 px |
| Beitragsbild im Blog | 1600×900 |
| Bild für Google Discover | mindestens 1.200 Pixel Breite |
| Produktfoto | 2000 * 2000 px |
| Flyer zum Ausdrucken (Endformat) | 14,8 × 21 cm |


Automatisch prüfen
- Bilder ohne Alternativtext und mit Dateinamen als Alternativtext finden.
- Dateien über einer festen Größe markieren, etwa 300 KB.
- Bilder finden, die deutlich größer ausgeliefert als angezeigt werden.
- Bilder ohne Breiten- und Höhenangabe auflisten.
- Prüfen, ob das Hauptbild im ersten Bildschirm verzögert geladen wird.
Fazit
Gute Bilder sind klein, beschreibend benannt und mit einem ehrlichen Alternativtext versehen. Die meisten Prüfungen lassen sich automatisieren – und weil Bilder auf fast jeder Seite vorkommen, ist der Effekt oft größer als bei jeder anderen technischen Verbesserung.
