Bilder sind oft für mehr als die Hälfte der Dateigröße einer Webseite verantwortlich. Nicht optimierte Bilder verlangsamen Ihre Website, erhöhen Ihre Absprungrate und schaden Ihrer SEO. In diesem Artikel lernen Sie, wie Sie Bilder richtig optimieren für maximale Geschwindigkeit ohne Qualitätsverlust.

Das richtige Bildformat wählen

WebP: der moderne Standard

WebP ist das empfohlene Format für Webbilder im Jahr 2024. Es bietet 25-35% kleinere Dateien als JPEG bei gleicher Qualität. WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression und Transparenz. Alle modernen Browser unterstützen WebP, also gibt es keinen Grund mehr, es nicht zu verwenden.

JPEG: für Fotos ohne Transparenz

JPEG bleibt geeignet für Fotos, bei denen keine Transparenz benötigt wird und Sie ältere Browser unterstützen müssen. Verwenden Sie eine Qualitätseinstellung zwischen 70-85% für die beste Balance zwischen Größe und Qualität. Höhere Prozentsätze liefern kaum sichtbare Verbesserungen, aber deutlich größere Dateien.

PNG: nur für Transparenz

PNG-Dateien sind oft viel größer als JPEG oder WebP. Verwenden Sie PNG nur, wenn Sie Transparenz benötigen und WebP keine Option ist. Für Logos mit wenigen Farben kann PNG8 eine kompakte Option sein.

SVG: für Icons und Illustrationen

Vektorbilder skalieren perfekt auf jede Größe ohne Qualitätsverlust. Verwenden Sie SVG für Logos, Icons und einfache Illustrationen. SVG-Dateien sind oft kleiner als Bitmap-Alternativen und können mit CSS gestylt werden.

Bilder komprimieren

Online-Tools

TinyPNG und Squoosh sind hervorragende kostenlose Tools zum Komprimieren von Bildern. TinyPNG funktioniert gut für JPEG und PNG, während Squoosh auch WebP-Konvertierung mit Echtzeit-Qualitätsvorschau bietet. Laden Sie Ihre Bilder hoch, wählen Sie Ihre Einstellungen und laden Sie das optimierte Ergebnis herunter.

WordPress Plugins

Smush ist ein beliebtes Plugin, das Bilder beim Upload automatisch komprimiert. Das Plugin kann auch vorhandene Bilder in Massen optimieren und unterstützt WebP-Konvertierung. Nach der Installation arbeitet Smush automatisch im Hintergrund.

ShortPixel bietet aggressivere Kompression und hervorragende WebP-Unterstützung. Das Plugin arbeitet mit einem Credit-System, bei dem Sie monatlich eine Anzahl von Bildern kostenlos optimieren können. Für größere Websites ist ein kostenpflichtiger Plan verfügbar.

Imagify von den Machern von WP Rocket integriert sich nahtlos mit diesem Caching-Plugin. Es bietet drei Komprimierungsstufen und automatische WebP-Konvertierung mit Fallback für ältere Browser.

Abmessungen richtig einstellen

Laden Sie niemals ein Bild von 4000 Pixeln Breite, wenn es nur mit 800 Pixeln angezeigt wird. Dies verschwendet Bandbreite und verlangsamt Ihre Seite unnötig. Skalieren Sie Bilder auf die maximale Anzeigegröße, bevor Sie sie hochladen.

Für responsive Websites verwenden Sie das srcset-Attribut, um verschiedene Größen anzubieten. Der Browser wählt dann automatisch die richtige Größe für den Bildschirm des Besuchers. WordPress generiert automatisch mehrere Größen beim Upload.

Lazy Loading implementieren

Lazy Loading sorgt dafür, dass Bilder erst geladen werden, wenn sie in den Viewport kommen. Dies beschleunigt das anfängliche Laden der Seite erheblich, besonders bei Seiten mit vielen Bildern.

Natives Lazy Loading

Moderne Browser unterstützen Lazy Loading über das loading-Attribut. Fügen Sie loading equals lazy zu Ihren img-Elementen hinzu. WordPress tut dies automatisch seit Version 5.5. Natives Lazy Loading funktioniert ohne JavaScript und ist die einfachste Lösung.

Via Caching-Plugins

LiteSpeed Cache bietet umfangreiche Lazy Loading-Optionen. Sie können einstellen, welche Bilder lazy laden sollen und welche nicht, Ausnahmen für wichtige Bilder above the fold konfigurieren und Platzhalterbilder während des Ladens anzeigen.

Bilder above the fold

Bilder, die direkt sichtbar sind, ohne zu scrollen, sollten gerade nicht lazy laden. Diese Bilder, wie Ihr Hero-Image oder Logo, müssen so schnell wie möglich laden. Verwenden Sie preload für kritische Bilder und stellen Sie sicher, dass sie für schnelle LCP-Werte optimiert sind.

Responsive Bilder liefern

Mit dem picture-Element können Sie verschiedene Bildformate und -größen basierend auf Bildschirmgröße und Browser-Unterstützung liefern. Liefern Sie WebP an Browser, die es unterstützen, mit einem JPEG-Fallback für den Rest. WordPress-Themes und Plugins wie Elementor können dies automatisch regeln.

CDN für Bilder

Ein Content Delivery Network liefert Bilder von Servern in der Nähe Ihrer Besucher, was die Ladezeiten verkürzt. Cloudflare bietet kostenlose CDN-Funktionalität und kann Bilder automatisch optimieren und nach WebP konvertieren. Richten Sie ein CDN ein für die beste Performance.

Praktische Checkliste

Verwenden Sie WebP als primäres Format mit JPEG-Fallback. Komprimieren Sie alle Bilder vor dem Upload oder verwenden Sie ein automatisches Plugin. Skalieren Sie Bilder auf die maximale Anzeigegröße. Implementieren Sie Lazy Loading für Bilder unterhalb des Viewports. Preloaden Sie kritische Bilder above the fold. Erwägen Sie ein CDN für internationales Publikum.

Mit optimierten Bildern und schnellem LiteSpeed-Hosting von Theory7 lädt Ihre Website blitzschnell. Kontaktieren Sie unseren Support, wenn Sie Hilfe bei der Optimierung Ihrer Website benötigen.