Bilder komprimieren für bessere Google-PageSpeed-Werte

Bilder sind meist das Schwerste auf einer Seite. Die Lösung liegt weniger in einer magischen Einstellung als darin, nur die Pixel zu senden, die Sie wirklich brauchen.

Worauf der Bericht wirklich hinweist

PageSpeed bemängelt Bilder auf mehrere getrennte Arten, und die bedeuten jeweils etwas anderes. „Bilder richtig dimensionieren“ heißt, dass die gesendete Datei mehr Pixel hat als der Platz, in dem sie angezeigt wurde. „Bilder effizient codieren“ heißt, dass die Qualitätseinstellung höher war, als das Bild es brauchte. „Bilder in modernen Formaten bereitstellen“ heißt, dass dasselbe Bild als WebP oder AVIF kleiner wäre. Der erste Punkt ist fast immer der teuerste, und genau den übergehen viele, weil die Seite auf dem Bildschirm gut aussieht.

Dazu kommt die zeitliche Seite. Auf den meisten Artikel- und Produktseiten ist das größte Element auf dem Bildschirm ein Bild, der Browser kann den Hauptinhalt also erst fertig darstellen, wenn diese Datei angekommen ist. Wird sie kleiner, verschiebt sich die gesamte Lademessung, nicht nur eine Zeile im Bericht.

Erst die Abmessungen, dann die Qualität

Fangen Sie mit den Pixelmaßen an, denn dort ist die Ersparnis geometrisch. Ein Handyfoto hat an der langen Seite oft rund 4000 Pixel. Verkleinern Sie es auf 1280, bleibt ungefähr ein Zehntel der Pixel übrig, weil Breite und Höhe um denselben Faktor schrumpfen. Kein Qualitätsregler bringt eine Verkleinerung in dieser Größenordnung.

Richten Sie die Breite nach Ihrem Layout, nicht nach der Datei. Steht das Bild in einer 700 Pixel breiten Spalte, reichen 1280 Pixel auch für Bildschirme mit hoher Pixeldichte locker aus. 4000 Pixel auszuliefern heißt, für die Übertragung von Details zu bezahlen, die nie jemand sieht. Die volle Auflösung verdienen nur Bilder, die ein Besucher per Klick im Vollbild öffnen kann, und selbst die brauchen selten das komplette Original aus der Kamera.

Was der Qualitätsregler macht

JPEG verwirft Details, die dem Auge kaum auffallen, und die Qualitätszahl bestimmt, wie rigoros das geschieht. Stellen Sie sie niedrig genug ein, zeigen sich die Fehler an vorhersehbaren Stellen: unscharfe Halos um harte Kanten wie Text oder eine Dachlinie und fleckige Stellen in sanften Verläufen wie einem wolkenlosen Himmel oder einem Studiohintergrund. Fotos mit viel Struktur verbergen Kompression gut. Flächige Farben und feiner Text nicht.

Beurteilen Sie das Ergebnis in der Größe, in der es angezeigt wird, und in dem Layout, in dem es stehen wird. Wenn Sie auf 300 % zoomen, um nach Artefakten zu suchen, reden Sie sich eine viel höhere Qualität ein, als die Seite braucht, und liefern den Ballast dann umsonst aus.

Wo Komprimieren nichts bringt

Manche Dateien haben nichts mehr herzugeben, und wer sie stärker drückt, bezahlt nur mit Qualität:

Ein JPEG, das schon einmal komprimiert wurde. Erneutes Codieren legt eine weitere Runde Artefakte über die vorhandenen, und die Ersparnis ist meist klein. Wenn ein Foto in Web-Abmessungen ohnehin nur ein paar hundert Kilobyte groß ist, lassen Sie es in Ruhe.
Fotos, die als PNG gespeichert sind. Der Kompressor behält ein PNG als PNG bei und verkleinert es, indem er die Farbpalette reduziert. Das passt zu Screenshots und flächigen Grafiken, zeigt sich bei einem Foto aber als sichtbare Farbstufen. Wandeln Sie solche Fotos zuerst in JPG oder WebP um und komprimieren Sie dann diese Datei.
Icons, Logos und kleine Grafiken der Benutzeroberfläche. Ein paar Kilobyte pro Datei sind nicht der Grund, warum Ihr Audit durchgefallen ist. Suchen Sie lieber das große Aufmacherbild.

So nutzen Sie den Kompressor hier

Der Qualitätsregler reicht von 10 bis 95. Bei JPEG legt er die Qualität des Encoders fest. Beim Schreiben von PNG ignorieren Browser diesen Wert, deshalb bestimmt er bei PNG stattdessen, wie viele Farben übrig bleiben: von 256 im oberen Bereich bis hinunter zu 16 am unteren Ende, und die Transparenz geht dabei nicht verloren. Die Einstellung für die maximale Abmessung bietet die Originalgröße oder 1920, 1280 bzw. 800 Pixel an der längsten Seite und skaliert proportional, damit nichts verzerrt wird. Ziehen Sie die Bilder eines Ordners auf einmal hinein, komprimieren Sie alle in einem Durchgang und laden Sie sie als ZIP herunter.

Einiges macht er bewusst nicht. Er steuert keine Zieldateigröße für Sie an: Sie wählen eine Qualität, sehen sich das Ergebnis an und korrigieren. Bei den Dateien, die er neu codiert, behält er keine Metadaten: Das Bild wird decodiert, auf ein Canvas gezeichnet und neu geschrieben, sodass Kameraeinstellungen, Zeitstempel und eventuelle GPS-Koordinaten verschwinden. Und er gibt Ihnen keine größere Datei zurück, als Sie ihm gegeben haben. Würde das Neucodieren ein bereits gut komprimiertes Bild größer machen und haben Sie keine kleineren Abmessungen gewählt, erhalten Sie die Originaldatei unverändert zurück.

Warum das in Ihrem Browser läuft

Die Bilder, die man vor einem Launch komprimiert, sind oft solche, die man ungern einem Fremden überlässt: unveröffentlichte Produktfotos, Aufnahmen für Kunden, Screenshots mit internen Daten. Hier wird nichts hochgeladen. Die Datei wird von Ihrer Festplatte gelesen, im Tab decodiert und neu codiert und wieder in Ihren Download-Ordner geschrieben. Öffnen Sie beim Komprimieren den Bereich Netzwerk in den Entwicklertools, und Sie werden keine Anfrage sehen, die Ihre Datei enthält, weil keine gestellt wird.

Wann ein Build-Schritt die bessere Lösung ist

Wenn Sie laufend Bilder veröffentlichen, gehört diese Arbeit in Ihre Pipeline, nicht in einen Browser-Tab. Ein Build-Plugin oder ein Bild-CDN kann für jedes Bild mehrere Breiten und Formate erzeugen und jedem Gerät die passende Version liefern, und es vergisst das nie. Das jede Woche von Hand zu erledigen, skaliert nicht, und es ist genau die Sorte Aufgabe, die Menschen nach einem Monat stillschweigend einstellen. Ein Browser-Tool hat die richtige Größe für die Handvoll Dateien, die Sie gleich hochladen wollen, oder für die drei schweren Bilder, die ein Audit tatsächlich beanstandet hat.