Ultimativer Leitfaden zur Bildoptimierung für SEO

Die Wahl des Formats entscheidet über Dateigröße und Qualität. JPEG ist ideal für Fotos mit vielen Farben und Verläufen – verlustbehaftet komprimiert, ohne Transparenz. PNG bewahrt jedes Pixel und unterstützt Transparenz, ist damit perfekt für Logos, Icons und Screenshots, erzeugt bei Fotos aber große Dateien. Für einfache Grafiken mit wenigen Farben spart PNG-8 gegenüber PNG-24 bis zu 80 Prozent.

SVG ist ein Vektorformat: Es basiert auf mathematischen Formen statt Pixeln, bleibt auf jedem Bildschirm gestochen scharf, ist klein und lässt sich per CSS anpassen – die erste Wahl für Logos, Icons und Illustrationen. WebP kombiniert verlustbehaftete und verlustfreie Kompression, unterstützt Transparenz und Animationen und ist mit über 97 Prozent Browser-Unterstützung längst Standard. AVIF komprimiert noch einmal 20 bis 50 Prozent stärker als WebP und wird von rund 92 Prozent der Browser unterstützt.

Moderne CMS und CDNs wählen das passende Format automatisch anhand der Browser-Fähigkeiten. Mit dem picture-Element lieferst Du AVIF an moderne Browser und WebP oder JPEG als Fallback – so bekommt jeder Nutzer die beste Version.

Suchmaschinen verstehen Bilder über Text. Ein Dateiname wie „badsanierung-bonn-beuel.jpg“ sagt Google, was zu sehen ist, und stärkt den thematischen Zusammenhang; „IMG_1234.jpg“ bringt nichts. Benenne Bilder vor dem Upload um, verwende Bindestriche statt Unterstriche und halte den Namen zum Seitenkontext passend.

Alt-Texte haben zwei Aufgaben: Sie beschreiben Bilder für Screenreader und liefern Suchmaschinen Kontext. Beschreibe, was auf dem Bild zu sehen ist, statt Keywords aneinanderzureihen – „Monteur installiert Wärmepumpe vor Einfamilienhaus“ statt „Wärmepumpe Heizung kaufen günstig“. Füllwörter wie „Bild von“ sind überflüssig, weil Screenreader ohnehin ansagen, dass es sich um ein Bild handelt.

Die ideale Länge liegt bei 70 bis 100 Zeichen. Jeder Alt-Text ist einzigartig, rein dekorative Bilder bekommen ein leeres Alt-Attribut, damit Screenreader sie überspringen. Platziere Bilder nahe am passenden Text und ergänze Bildunterschriften – die Kombination aus Dateiname, Alt-Text und Position sorgt für bessere Rankings in der Bildersuche und ein zugänglicheres Nutzererlebnis.

Bilder machen oft bis zu 60 Prozent des Gewichts einer Website aus. Smarte verlustbehaftete Komprimierung reduziert die Dateigröße drastisch – häufig um bis zu 80 Prozent –, indem Farbinformationen entfernt werden, die das Auge kaum wahrnimmt. Für JPEG hat sich ein Qualitätswert von 75 bis 85 bewährt; das spart 40 bis 60 Prozent. Unnötige EXIF-Daten kosten weitere 10 bis 50 Kilobyte pro Bild.

Genauso wichtig ist die Skalierung: Lade keine Bilder in höherer Auflösung hoch, als sie angezeigt werden. Passe sie vor dem Upload an die Darstellungsbreite an – meist zwischen 320 und 1.280 Pixel, für Hero-Bilder bis 1.920 Pixel. Überdimensionierte Bilder verschwenden Bandbreite und verschlechtern den Largest Contentful Paint (LCP), einen zentralen Wert der Core Web Vitals. DPI-Werte spielen im Web keine Rolle, entscheidend sind allein die Pixelmaße.

Deine Website läuft auf dem Smartphone genauso wie auf dem 4K-Monitor. Mit srcset bietest Du dem Browser mehrere Bildversionen an, und er wählt je nach Bildschirmbreite und Pixeldichte die passende Datei – Breitenangaben wie 800w oder 1200w und das sizes-Attribut steuern, welche Version bei welchem Breakpoint geladen wird. Das picture-Element geht weiter: Es liefert moderne Formate wie AVIF oder WebP mit Fallback und erlaubt Art Direction, also andere Bildausschnitte für mobile Geräte. Ein Standard-src bleibt immer erhalten.

Lazy Loading lädt Bilder erst, wenn sie in den sichtbaren Bereich scrollen: loading=lazy für alles unterhalb der Falte, fetchpriority=high für das Hero-Bild, das den LCP bestimmt. Browser-Caching sorgt dafür, dass bereits geladene Bilder beim nächsten Besuch lokal vorliegen – lange Cache-Control-Header von bis zu einem Jahr sind bei Bilddateien sinnvoll, weil sie sich selten ändern.

Eine Image-Sitemap ist eine XML-Datei, die Suchmaschinen hilft, Bilder zu finden – auch solche, die per JavaScript geladen werden. Sie listet Bild-URLs und kann Bildunterschrift, Titel, Standort oder Lizenz enthalten. Das beschleunigt die Indexierung und bringt visuelle Inhalte in die Suchergebnisse. Eine Sitemap darf bis zu 50.000 Bilder und unkomprimiert 50 MB umfassen; kleinere Websites integrieren Bildinformationen einfach in die normale Sitemap.

Ergänzend kennzeichnen strukturierte Daten nach Schema.org, worum es bei einem Bild geht – etwa Produkt, Rezept oder Organisation –, damit Google es als Rich Result mit Preis, Bewertung oder Lizenz-Badge anzeigen kann. Die Sitemap verbessert die Auffindbarkeit, das Markup die Einordnung.

Eigene Bilder schaffen Vertrauen und machen Deine Website unverwechselbar. Stockfotos wirken unpersönlich und werden schnell erkannt – echte Aufnahmen von Team, Werkstatt und Projekten vermitteln Professionalität. Damit die Seite trotzdem schnell lädt, verkleinerst Du die Bilder auf die benötigte Breite und lieferst sie als WebP aus.

Text gehört nicht ins Bild: Eingebetteter Text ist für Suchmaschinen unsichtbar, für Screenreader unzugänglich, auf dem Smartphone oft unleserlich und auf hochauflösenden Bildschirmen unscharf. Lege Text stattdessen per HTML und CSS über das Bild – so bleibt er durchsuchbar, übersetzbar und scharf.

Wiederkehrende Aufgaben automatisierst Du: WordPress-Plugins komprimieren beim Upload, konvertieren in WebP oder AVIF, erzeugen die Größenvarianten und aktivieren Lazy Loading. Cloud-Dienste mit CDN optimieren Bilder in Echtzeit je nach Endgerät. Unabhängig vom Werkzeug gilt: Konvertierung in moderne Formate aktivieren – das bringt den größten Geschwindigkeitsgewinn.