Diese Regel gilt, wenn PageSpeed Insights feststellt, dass die Bilder auf der Seite optimiert werden können, um ihre Dateigröße zu verringern, ohne ihre visuelle Qualität erheblich zu beeinträchtigen.
Überblick
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 geringer ist der Wettbewerb um die Bandbreite des Clients und desto schneller kann der Browser Inhalte auf dem Bildschirm herunterladen und rendern.
Empfehlungen
Das optimale Format und eine Optimierungsstrategie für Ihre Bild-Assets zu finden, erfordert eine sorgfältige Analyse in vielen Bereichen: codierter Datentyp, Bildformatfunktionen, Qualitätseinstellungen und Auflösung. Darüber hinaus müssen Sie überlegen, ob einige Bilder am besten in einem Vektorformat bereitgestellt werden, ob die gewünschten Effekte über CSS erzielt werden können und wie Sie für jeden Gerätetyp angemessen skalierte Assets bereitstellen.
Optimierungen für alle Arten von Bildern
- Beachten Sie die Best Practices für die Bereitstellung responsiver Bilder.
- Gehen Sie die Checkliste für die Bildoptimierung für einzelne Bilder durch.
Optimierungen für GIF-, PNG- und JPEG-Bilder
GIF, PNG und JPEG machen 96% aller Bildzugriffe im Internet aus. Aufgrund seiner Beliebtheit bietet PageSpeed Insights spezifische Optimierungsempfehlungen. Sie können die optimierten Bilder ganz einfach direkt von PageSpeed Insights herunterladen. Dazu verwenden Sie die Bildoptimierungsbibliothek von modpagespeed.com.
Sie können auch Tools wie das von ImageMagick erstellte Binärprogramm convert verwenden, mit denen ähnliche Optimierungen angewendet werden können. Siehe Beispielanleitung unten.
Wenn Sie Tools von Drittanbietern verwenden, werden Ihre Bilder durch die Transformation möglicherweise größer, wenn Ihre Bilder bereits sehr gut optimiert waren. Verwenden Sie in diesem Fall die Originale.
GIF und PNG sind verlustfreie Formate, da bei der Komprimierung keine visuellen Veränderungen der Bilder vorgenommen werden. Bei Standbildern wird mit PNG ein besseres Komprimierungsverhältnis und eine bessere Bildqualität erzielt. Für animierte Bilder solltest du ein video-Element anstelle eines GIF-Bilds verwenden, um eine bessere Komprimierung zu erzielen.
- Konvertiere GIF immer in PNG, es sei denn, das Original ist animiert oder winzig (weniger als ein paar Hundert Byte).
- Entfernen Sie für GIF und PNG den Alphakanal, wenn alle Pixel undurchsichtig sind.
So können Sie beispielsweise binär konvertieren verwenden, um Ihre GIF- und PNG-Bilder mit dem folgenden Befehl zu optimieren (Parameter in Klammern sind optional):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG ist ein verlustbehaftetes Format. Durch die Komprimierung werden visuelle Details des Bildes entfernt. Das Komprimierungsverhältnis kann jedoch 10-mal größer sein als im GIF- oder PNG-Format.
- Qualität auf 85 verringern, wenn sie höher war Bei einer Qualität von über 85 wird das Bild schnell größer, die visuelle Verbesserung ist jedoch gering.
- Reduzieren Sie die Chroma-Probenahme auf 4:2:0, da das visuelle System von Menschen im Vergleich zur Leuchtdichte weniger empfindlich auf Farben reagiert.
- Verwenden Sie das Progressive-Format für Bilder über 10.000 Byte. Das JPEG-Format für Progressive-Videos hat in der Regel ein höheres Komprimierungsverhältnis als das JPEG-Baseline-Format für große Bilder und bietet die Vorteile eines progressiven Renderings.
- Verwenden Sie den Graustufen-Farbraum, wenn das Bild schwarz-weiß ist.
Beispielsweise können Sie zur Optimierung Ihrer JPEG-Bilder mit convert binary den folgenden Befehl verwenden (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?