Auf den meisten Websites sind Bilder das mit Abstand schwerste Element auf der Seite, oft größer als HTML, CSS und JavaScript zusammen. Wenn sich eine Seite langsam anfühlt, sind die Bilder die erste Stelle, an der man nachsehen sollte – und die Korrekturen sind meist schnell erledigt.
Drei Techniken erledigen fast die gesamte Arbeit: das Bild auf die tatsächlich angezeigte Größe verkleinern, es komprimieren und in einem modernen Format ausliefern. Zusammen angewendet reduzieren sie das Bildgewicht regelmäßig um 70 % oder mehr.
Auf die tatsächlich angezeigte Größe verkleinern
Das ist der häufigste und verschwenderischste Fehler. Ein Foto direkt aus der Kamera kann 6000 Pixel breit sein, aber Ihr Artikel zeigt es in einer Spalte von 800 Pixeln Breite. Der Browser lädt alle sechstausend Pixel herunter und wirft dann die meisten davon weg, wenn er das Bild passend verkleinert.
Ein 6000-Pixel-Bild in einem 800-Pixel-Slot auszuliefern kann bedeuten, fünf- bis zehnmal mehr Daten herunterzuladen als nötig. Die Lösung ist einfach: Verkleinern Sie die Datei auf ungefähr die Breite, die sie einnehmen wird, plus etwas Puffer für hochauflösende Bildschirme.
Eine praktische Faustregel:
- Vollbreites Hero-Bild: 1600–2000 px Breite sind reichlich.
- Bild im Artikel: 1000–1400 px.
- Thumbnail: 300–500 px.
Verwenden Sie den Bild-Resizer, um jedes Bild zu verkleinern, bevor es überhaupt auf Ihre Seite gelangt. Er hält das Seitenverhältnis gesperrt, damit nichts verzerrt wird.
Komprimieren, um den Ballast abzustreifen
Sobald die Abmessungen stimmen, entfernt die Komprimierung Details, die das Auge nicht sehen kann. Bei Fotos liegt eine Qualität von etwa 75–85 % im optimalen Bereich: Die Datei schrumpft dramatisch, während das Bild gleich aussieht. Bei flachen Grafiken und Screenshots, die als PNG gespeichert sind, kann eine Reduzierung der Farbanzahl (Quantisierung auf 256 Farben) die Datei auf einen Bruchteil ihrer ursprünglichen Größe verkleinern.
Der Bild-Kompressor erledigt beides. Er kodiert JPEG und WebP nach Qualität neu, quantisiert PNGs und garantiert, dass er niemals eine Datei erzeugt, die größer ist als die, mit der Sie begonnen haben. Wenn Sie eine ganze Galerie haben, verarbeiten Sie diese als Stapel und laden ein ZIP herunter.
Auf ein modernes Format umsteigen
Allein die Formatwahl kann eine Datei halbieren. So schneiden die gängigen Optionen bei Fotos im Vergleich ab.
| Format | Typische Größe ggü. JPEG | Am besten für |
|---|---|---|
| JPEG | Ausgangswert | Universelle Rückfalloption; Fotos |
| WebP | ~25–35 % kleiner | Fotos und Grafiken; breite Browser-Unterstützung |
| AVIF | ~50 % kleiner | Fotos, bei denen die kleinste Größe zählt |
| PNG | Viel größer bei Fotos | Logos, Icons, flache Grafiken, Transparenz |
WebP ist 2026 die sichere Standardwahl – jeder aktuelle Browser liest es und es schlägt JPEG mit Leichtigkeit. AVIF geht noch kleiner, braucht aber länger zum Kodieren und hat eine etwas schmalere Unterstützung. Der Bild-Konverter lässt Sie AVIF anpeilen und weicht dezent auf WebP aus, wenn AVIF nicht die richtige Wahl ist, sodass Sie ohne Raten das bestmögliche Ergebnis erhalten.
Eine Warnung: Verwenden Sie kein PNG für Fotos. PNG glänzt bei Logos, Icons und allem, was Transparenz benötigt, aber bei einem Foto kann es mehrmals größer sein als ein WebP gleicher Qualität.
Alles zusammenführen
Eine verlässliche Pipeline für jedes Bild, das ins Web soll:
- Verkleinern auf die Anzeigebreite (plus Puffer für Retina-Bildschirme).
- Konvertieren nach WebP, oder AVIF, wenn Sie die kleinstmögliche Datei möchten.
- Komprimieren mit 75–85 % Qualität, um den letzten Ballast abzustreifen.
Tun Sie das, und aus einem 5-MB-Kamerafoto kann ein 120-KB-WebP werden, das in einer Artikelspalte identisch aussieht. Über eine ganze Seite multipliziert ist der Unterschied in der Ladezeit dramatisch.
Alles läuft in Ihrem Browser mit Canvas und WebAssembly, sodass nichts hochgeladen wird und die Tools nach Ihrem ersten Besuch auch offline weiterarbeiten. Das bedeutet, Sie können einen ganzen Ordner Bilder für Ihre Website vorbereiten, ohne sie an irgendeinen Server zu übergeben.
Über die Dateien hinaus
Zwei weitere Gewohnheiten helfen, und sie kosten nichts:
- Lazy-Loading für Bilder unterhalb der Falz mit
loading="lazy", damit der Browser sie erst abruft, wenn der Leser in die Nähe scrollt. - Breite und Höhe setzen als Attribute, damit das Layout beim Laden der Bilder nicht springt – das verbessert auch Ihren Core-Web-Vitals-Wert.
Möchten Sie genau wissen, welche Bilder eine Seite ausbremsen? Unser Leitfaden zur Bild-SEO behandelt das Auditing, und eine Geschwindigkeitsprüfung listet die schwersten Assets auf, damit Sie wissen, wo Sie zuerst ansetzen sollten.