Bilder fürs Web optimieren: der praktische Leitfaden

Öffnen Sie eine beliebige langsame Website — in 8 von 10 Fällen sind Bilder schuld: ein 6-MB-Smartphone-Foto direkt im Artikel, ein halbes Megabyte PNG-Logo, ein 4000-Pixel-Hintergrund auf einem 400-Pixel-Bildschirm. Bilder machen typischerweise 50-70 % des gesamten Seitengewichts aus — und sind damit der erste Hebel zur Beschleunigung.

Regel Nr. 1: Erst die Abmessungen

Der häufigste Fehler ist nicht das Format, sondern die Größe. Wird ein Bild in einer 800 Pixel breiten Spalte angezeigt, enthält eine 4000-Pixel-Datei 25-mal mehr Daten als nötig (Breite × Höhe — beide skalieren). Verkleinern Sie vor jeder Kompression auf die tatsächliche Anzeigegröße, höchstens das Doppelte für Retina-Displays. Von 4000 auf 1600 Pixel Breite bedeutet oft: von 5 MB auf 400 KB — noch vor jedem weiteren Schritt.

Regel Nr. 2: Das richtige Format für den richtigen Zweck

• WebP — der heutige Standard für Fotos und Grafiken im Web. Im Schnitt 25-35 % kleiner als ein JPEG gleicher visueller Qualität, mit Unterstützung für Transparenz. Alle modernen Browser unterstützen es.
• AVIF — der Nachfolger, noch einmal rund 20 % kleiner als WebP, aber langsamer beim Kodieren. Eine ausgezeichnete Wahl, wenn Ihre Tools es erzeugen können.
• JPEG — weiterhin solide für Fotos; bei Qualität 75-82 ist der Unterschied zum Original mit bloßem Auge unsichtbar.
• PNG — nur für Screenshots und Grafiken mit scharfen Kanten. Für Fotos eine Katastrophe: Dasselbe Bild kann 10-mal größer sein als in WebP.
• SVG — für Logos und Icons: unendlich scharf in jeder Größe, oft unter 5 KB.

Regel Nr. 3: Lassen Sie Werkzeuge arbeiten

Unter WordPress konvertieren Plugins wie Converter for Media, ShortPixel oder Imagify vorhandene und künftige Bilder automatisch in WebP/AVIF. Für manuelle Arbeit zeigt Squoosh (Googles kostenloses Browser-Tool) einen Vorher-Nachher-Vergleich, während Sie den Qualitätsregler verschieben. Realistisches Ergebnis: Eine Galerie mit 40 Bildern schrumpft von 60 MB auf 4-6 MB.

Regel Nr. 4: Lazy Loading für alles unterhalb des sichtbaren Bereichs

Bilder, die der Besucher noch nicht sieht, müssen auch noch nicht laden. Das Attribut loading="lazy" genügt — WordPress setzt es seit Version 5.5 automatisch. Achten Sie nur darauf, dass das Hauptbild im sichtbaren Bereich KEIN Lazy Loading erhält, denn es zählt zur LCP-Metrik, die Google misst.

Wo das Hosting ins Spiel kommt

Auch perfekt optimierte Bilder muss jemand schnell ausliefern. Hier macht ein CDN den größten Unterschied: Bilder kommen vom Server, der dem Besucher am nächsten liegt, statt jedes Mal von Ihrem Hosting zu reisen. Unser SEO-Hosting enthält ein kostenloses globales CDN in allen Paketen — so laden Galerien auch für internationale Besucher blitzschnell. Die Kombination aus korrekten Abmessungen, WebP und CDN spart bei bildreichen Seiten typischerweise 2-4 Sekunden Ladezeit — Sekunden, die sich direkt im Google-Ranking und in den Konversionen zeigen.