Im Bereich „Optimierungsmöglichkeiten“ Ihres Lighthouse-Berichts werden alle nicht optimierten Bilder mit den potenziellen Einsparungen in Kibibyte (KiB) aufgeführt. Optimieren Sie diese Bilder, damit die Seite schneller geladen wird und weniger Daten verbraucht:
So kennzeichnet Lighthouse Bilder als optimierbar
Lighthouse erfasst alle JPEG- oder BMP-Bilder auf der Seite, legt die Komprimierungsstufe für jedes Bild auf 85 fest und vergleicht dann die Originalversion mit der komprimierten Version. Wenn die potenziellen Einsparungen mindestens 4 KiB betragen, kennzeichnet Lighthouse das Bild als optimierbar.
Bilder optimieren
Es gibt viele Möglichkeiten, Ihre Bilder zu optimieren, z. B.:
- Bild-CDNs verwenden
- Bilder komprimieren
- Animierte GIFs durch Videos ersetzen
- Lazy Loading von Bildern
- Responsive Bilder bereitstellen
- Bilder mit den richtigen Abmessungen bereitstellen
- WebP-Bilder verwenden
Bilder mit GUI-Tools optimieren
Eine weitere Möglichkeit besteht darin, Ihre Bilder über ein Optimierungstool zu bearbeiten, das Sie auf Ihrem Computer installieren und als GUI ausführen. Bei ImageOptim ziehen Sie beispielsweise Bilder per Drag-and-drop in die Benutzeroberfläche. Die Bilder werden dann automatisch komprimiert, ohne dass die Qualität merklich beeinträchtigt wird. Wenn Sie eine kleine Website betreiben und alle Bilder manuell optimieren können, ist diese Option wahrscheinlich ausreichend.
Squoosh ist eine weitere Option. Squoosh wird vom Google Web DevRel-Team verwaltet.
Stack-spezifische Anleitung
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 außerdem 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, ein Plug-in für die Bildoptimierung zu verwenden, durch das Ihre Bilder komprimiert werden, die Qualität jedoch gleich bleibt.
Magento
Sie können eine Magento-Erweiterung eines Drittanbieters verwenden, die Bilder optimiert.
WordPress
Du hast die Möglichkeit, ein WordPress-Plug-in für die Bildoptimierung zu verwenden, durch das deine Bilder komprimiert werden, die Qualität jedoch gleich bleibt.