Diese Regel gilt, wenn PageSpeed Insights feststellt, dass die Bilder auf der Seite optimiert werden können, um die Dateigröße zu reduzieren, ohne die Bildqualität zu beeinträchtigen.
Übersicht
Bilder machen häufig den Großteil der heruntergeladenen Byte auf einer Seite aus. Daher können durch die Optimierung von Bildern oft die größten Byteeinsparungen und Leistungsverbesserungen erzielt werden: Je weniger Byte der Browser herunterladen muss, desto weniger Wettbewerb ist für die Bandbreite des Clients erforderlich und desto schneller kann der Browser Inhalte herunterladen und auf dem Bildschirm rendern.
Empfehlungen
Um eine optimale Format- und Optimierungsstrategie für Ihre Bild-Assets zu finden, ist eine sorgfältige Analyse vieler Dimensionen erforderlich: codierte Datentypen, Möglichkeiten für Bildformate, Qualitätseinstellungen, Auflösung und mehr. Außerdem ist zu berücksichtigen, ob einige Bilder am besten in einem Vektorformat vorliegen, ob die gewünschten Effekte über CSS erzielt werden können und wie passend skalierte Assets für die einzelnen Gerätetypen bereitgestellt werden.
Optimierungen für alle Bildtypen
- Folgen Sie den Best Practices für die Bereitstellung responsiver Bilder.
- Gehen Sie die Checkliste zur Bildoptimierung für einzelne Bilder durch.
Optimierungen für GIF-, PNG- und JPEG-Bilder
GIF-, PNG- und JPEG-Formate machen 96 % des gesamten Internet-Bildverkehrs aus. Aufgrund ihrer Beliebtheit liefert PageSpeed Insights spezifische Optimierungsempfehlungen. Sie können die optimierten Bilder direkt von PageSpeed Insights herunterladen. Hierbei wird die Bildoptimierungsbibliothek von modpagespeed.com verwendet.
Sie können auch Tools wie die von ImageMagick entwickelte Convert-Binärdatei verwenden, die ähnliche Optimierungen anwenden kann. Siehe Beispielanleitung unten.
Wenn Sie Tools von Drittanbietern verwenden, beachten Sie bitte, dass die Transformation Ihre Bilder möglicherweise vergrößern kann, wenn Ihre bereits sehr gut optimiert wären. Verwenden Sie in diesem Fall die Originale.
GIF und PNG sind verlustfreie Formate, da bei der Komprimierung keine visuellen Änderungen an den Bildern vorgenommen werden. Bei Standbildern sorgt PNG für ein besseres Komprimierungsverhältnis bei höherer Bildqualität. Für animierte Bilder kannst du das Element video anstelle einer GIF-Datei verwenden, um eine bessere Komprimierung zu erzielen.
- Konvertiere das GIF immer in PNG, es sei denn, das Original ist animiert oder winzig (weniger als einige Hundert Byte).
- Entfernen Sie für GIF und PNG den Alphakanal, wenn alle Pixel undurchsichtig sind.
Mit dem folgenden Befehl können Sie beispielsweise Ihre GIF- und PNG-Bilder konvertieren, wobei die Parameter in Klammern optional sind:
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG ist ein verlustbehaftetes Format. Beim Komprimierungsvorgang werden visuelle Details des Bildes entfernt, das Komprimierungsverhältnis kann jedoch 10-mal größer sein als das GIF- oder PNG-Format.
- Verringern Sie die Qualität auf 85, wenn diese höher war. Bei einer Bildqualität von über 85 wird das Bild schnell größer, während die visuelle Verbesserung gering ist.
- Reduzieren Sie die Chroma-Probenahme auf 4:2:0, da das menschliche visuelle System weniger empfindlich auf Farben reagiert als die Luminanz.
- Verwende das progressive Format für Bilder über 10.000 Byte. Progressive JPEG hat bei großen Bildern in der Regel ein höheres Komprimierungsverhältnis als Referenz-JPEG und haben die Vorteile des progressiven Renderings.
- Verwenden Sie den Farbraum in Graustufen, wenn das Bild schwarz-weiß ist.
Sie können beispielsweise Binärcode konvertieren verwenden, um Ihre JPEG-Bilder mit dem folgenden Befehl zu optimieren. Parameter in Klammern sind optional:
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
Feedback
War diese Seite hilfreich?