Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts sind alle nicht optimierten Bilder mit möglichen Einsparungen in Kibibyte (KiB) aufgeführt. Optimieren Sie diese Bilder, damit die Seite schneller geladen wird und weniger Daten verbraucht:
So werden Bilder von Lighthouse als optimierbar gekennzeichnet
Lighthouse erfasst alle JPEG- oder BMP-Bilder auf der Seite, legt die Komprimierungsstufe jedes Bildes 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:
- 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 mithilfe von GUI-Tools optimieren
Eine weitere Möglichkeit besteht darin, Ihre Bilder durch einen Optimierer zu führen, den Sie auf Ihrem Computer installieren und als GUI ausführen. Mit ImageOptim können Sie beispielsweise Bilder per Drag-and-drop in die Benutzeroberfläche ziehen. Die Bilder werden dann automatisch komprimiert, ohne dass die Qualität merklich beeinträchtigt wird. Wenn Sie eine kleine Website haben 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.
Stackspezifische 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 auch eine Magento-Erweiterung von Drittanbietern verwenden, mit der Bilder optimiert werden.
WordPress
Sie können ein WordPress-Plug-in für die Bildoptimierung verwenden, das Ihre Bilder komprimiert und die Qualität beibehalten kann.