Bilder richtig komprimieren
Die meisten fangen beim Komprimieren an. Der größte Gewinn liegt aber davor: bei der Größe des Bildes selbst.
1. Die Maße
Miss, wie breit das Bild auf der Seite erscheint, und verdopple den Wert. Die Verdopplung ist für Bildschirme mit hoher Auflösung. Ein Foto mit 4000 Pixeln Breite in einem 600 Pixel breiten Rahmen überträgt etwa das Vierzigfache der nötigen Daten – da hilft keine Komprimierung der Welt.
2. Das Format
| Inhalt | Format |
|---|---|
| Fotos | WebP, notfalls JPEG |
| Grafiken mit wenigen Farben | PNG oder SVG |
| Logos, Symbole, Diagramme | SVG – bleibt in jeder Größe scharf |
| Animationen | Video statt GIF, spart ein Vielfaches |
3. Die Qualität
Bei WebP und JPEG ist 85 Prozent meist der beste Tausch. Unter 70 werden Kanten und gleichmäßige Flächen sichtbar unruhig – besonders am Himmel und an Hautpartien. Über 90 wächst die Datei deutlich, ohne dass jemand den Unterschied sieht.
Verschiedene Größen ausliefern
Mit srcset legst du mehrere Fassungen an, und der Browser wählt die passende für Bildschirm und Auflösung. Auf einem Telefon lädt er dann die 600er-Fassung statt der 1600er. Das ist der Punkt, an dem aus Komprimieren echte Ersparnis wird.
Passende Werkzeuge
Weiter in Performance
- Website schneller machen – Die Maßnahmen in der Reihenfolge ihrer Wirkung – nicht in der ihres Aufwands.
- WebP oder AVIF? – Zwei moderne Bildformate – eines ist die sichere Wahl, das andere das kleinere.