Veröffentlicht: 8. Oktober 2025
Wenn Sie die Downloadzeit von Bildern reduzieren, können Sie die wahrgenommene Ladezeit der Seite und den LCP verbessern.
Gründe für das Scheitern der Empfehlung
In der Statistik werden Bilder mit unnötig großen Downloadgrößen hervorgehoben. Die geschätzte Byte-Einsparung wird berechnet, indem die Downloadgröße des Bildes mit einem effizienten Byte-pro-Pixel-Verhältnis für das Bildformat verglichen wird.
Downloadzeit von Bildern verkürzen
Je nach angezeigter Größe und Dateiformat des Bildes gibt es mehrere Strategien, die Sie anwenden können, um die Downloadzeit von Bildern zu verkürzen. Die Bereitstellung eines Bild-CDNs kann für alle diese Strategien sehr hilfreich sein.
Bildkomprimierungsfaktor erhöhen
Die meisten Bildformate unterstützen eine Komprimierungsstufe, die angepasst werden kann, um die Bilddateigröße auf Kosten der Bildqualität zu verringern. Mit Bildbearbeitungstools wie ImageOptim, Squoosh und Imagemin können Sie den Bildkomprimierungsfaktor optimieren.
Moderne Bildformate verwenden
AVIF und WebP sind Bildformate, die im Vergleich zu ihren älteren JPEG- und PNG-Pendants eine bessere Komprimierung und Qualität bieten. Wenn Sie Ihre Bilder in diesen neueren Formaten codieren, können Sie die Downloadgröße von Bildern verringern.
AVIF wird in der aktuellen Version aller gängigen Browser unterstützt und bietet im Vergleich zu anderen Formaten mit denselben Qualitätseinstellungen kleinere Dateigrößen. Weitere Informationen zu AVIF finden Sie im Codelab zum Bereitstellen von AVIF-Bildern.
WebP wird von allen gängigen Browsern unterstützt und bietet eine bessere verlustbehaftete und verlustfreie Komprimierung für Bilder im Web. Weitere Informationen zu WebP finden Sie unter WebP-Bilder verwenden.
Videoformate für animierte Inhalte verwenden
Große GIF-Dateien sind nur bedingt für die Auslieferung animierter Inhalte geeignet. Du kannst stattdessen MPEG4- oder WebM-Videos für Animationen und PNG oder WebP für statische Bilder verwenden und so die Netzwerkbytes reduzieren.
Animierte GIFs durch Videos ersetzen, damit Seiten schneller geladen werden
Bilder mit responsiver Größe bereitstellen
Im Idealfall sollten auf Ihrer Seite niemals Bilder ausgeliefert werden, die größer als die Version sind, die auf dem Bildschirm des Nutzers dargestellt wird. Alles, was darüber hinausgeht, führt nur zu verschwendeten Bytes und verlangsamt die Seitenladezeit.
Eine Strategie besteht darin, vektorbasierte Bildformate wie SVG zu verwenden. Mit einer endlichen Menge an Code kann ein SVG-Bild auf jede beliebige Größe skaliert werden. Weitere Informationen finden Sie unter Komplexe Symbole durch SVG ersetzen.
Wenn vektorbasierte Bilder nicht infrage kommen, sollten Sie am besten responsive Bilder bereitstellen. Bei responsiven Bildern generieren Sie mehrere Versionen jedes Bildes und geben dann in Ihrem HTML- oder CSS-Code an, welche Version verwendet werden soll. Dazu nutzen Sie Medienabfragen, Darstellungsbereichsdimensionen usw.
Das <img>-Element hat beispielsweise die Attribute srcset und sizes, mit denen Bild-URLs für verschiedene Größen angegeben werden können:
Wenn Sie das Bild vollständig ändern möchten, können Sie das <picture>-Element verwenden:
Weitere Informationen finden Sie unter Responsive Bilder und Das „picture“-Element.
Stack-spezifische Anleitung
Diese Insight-Meldung enthält auch stack-spezifische Anleitungen für Seiten, auf denen die folgenden Technologien verwendet werden:
AMP
- Sie können alle
amp-img-Komponenten in WebP-Formaten darstellen lassen, während Sie einen geeigneten Ersatz für andere Browser angeben. - Verwende
amp-animfür animierte Inhalte, um die CPU-Last auf ein Mindestmaß zu reduzieren, wenn die Inhalte nicht zu sehen sind.
Drupal
- Sie haben die Möglichkeit, ein Modul zu verwenden, das automatisch und ohne Qualitätsverlust die Größe von Bildern, die über die Website hochgeladen werden, optimiert und reduziert.
- Achten Sie darauf, dass Sie für alle auf Ihrer Website gerenderten Bilder die von Drupal bereitgestellten responsiven Bildstile (Responsive Image Styles) verwenden.
Joomla
Sie haben die Möglichkeit, Ihre hochgeladenen Bilder mithilfe eines Plug-ins oder eines Dienstes automatisch in das optimale Format zu konvertieren.
Magento
Sie können eine Magento-Erweiterung eines Drittanbieters verwenden, die Bilder optimiert.
WordPress
Sie haben die Möglichkeit, ein WordPress-Plug-in für die Bildoptimierung zu verwenden, durch das Ihre Bilder komprimiert werden, die Qualität jedoch erhalten bleibt.