So laden Bilder auf einer Website schneller
Die fünf Änderungen, die das Bildgewicht jeder Website senken, nach Wirkung sortiert.
Auf den meisten Websites machen Bilder den Großteil dessen aus, was ein Besucher herunterlädt. Ein einziges unoptimiertes Handyfoto kann mehr wiegen als der Rest der Seite zusammen. Bilder in Ordnung zu bringen ist meist die größte und billigste Beschleunigung überhaupt, und schnellere Seiten ranken besser, halten Besucher länger und verkaufen mehr.
1. Bilder in der Größe hochladen, in der sie angezeigt werden
Ein Foto direkt vom Handy ist 4000 Pixel breit oder mehr. Eine Inhaltsspalte ist selten breiter als 1200 Pixel, eine Karte oder ein Vorschaubild deutlich weniger. Jedes zusätzliche Pixel wird heruntergeladen und vom Browser dann verworfen. Skalieren Sie vor dem Hochladen: etwa 2000 Pixel Breite für Banner über die volle Breite (damit sie auf hochauflösenden Bildschirmen scharf bleiben), 1200 bis 1600 für Inhaltsbilder und 600 bis 800 für Karten. Das Werkzeug zum Größe ändern erledigt einen ganzen Ordner auf einmal.
2. Komprimieren
Stimmen die Abmessungen, erledigt die Komprimierung den Rest. Ein mit Qualität 80 gespeichertes Foto sieht auf einer Webseite genauso aus wie eines mit 100 und hat oft nur ein Drittel der Größe. Der Bildkompressor verarbeitet ganze Stapel und zeigt die Ersparnis pro Datei.
3. WebP verwenden
WebP wird von allen aktuellen Browsern unterstützt und ist bei gleicher sichtbarer Qualität meist 25 bis 35 Prozent kleiner als JPG, und dank Transparenz ersetzt es auch viele PNGs. Wandeln Sie mit JPG in WebP oder PNG in WebP um. AVIF ist noch kleiner, aber langsamer zu kodieren und von Upload-Systemen seltener unterstützt, deshalb ist WebP der praktische Standard.
4. Das passende Format für den Inhalt wählen
| Inhalt | Bestes Format |
|---|---|
| Fotos | WebP, oder JPG, wo WebP nicht akzeptiert wird |
| Logos und Symbole | SVG, falls vorhanden, sonst PNG oder WebP |
| Screenshots mit Text | PNG oder verlustfreies WebP |
| Einfache Animationen | Ein kurzes Video statt eines GIFs |
5. Dem Browser sinnvolles Laden ermöglichen
- Lazy Loading. Bilder unterhalb des ersten Bildschirms sollten erst laden, wenn der Besucher in ihre Nähe scrollt. Die meisten Plattformen machen das automatisch; in reinem HTML ergänzen Sie loading="lazy" bei img-Tags, die anfangs nicht sichtbar sind.
- Abmessungen. Geben Sie jedem Bild Breite und Höhe, damit die Seite beim Eintreffen der Bilder nicht springt. Layoutverschiebungen gehören zu Googles Core Web Vitals.
- Das Hauptbild zuerst. Das große Bild oben auf der Seite, meist das Element für den Largest Contentful Paint, darf nie lazy geladen werden. Es sollte so früh wie möglich laden.
Wie viel das bringt
Eine typische Seite mit zehn Fotos direkt vom Handy wiegt schnell 30 MB. Auf sinnvolle Breiten skaliert und komprimiert, sind es meist rund 2 MB. In WebP umgewandelt, eher 1,4 MB. Im Mobilfunknetz ist das der Unterschied zwischen einer Seite, die in einer Sekunde erscheint, und einer, die viele Besucher abbrechen.
Das Ergebnis prüfen
Googles PageSpeed Insights und das Lighthouse-Panel in den Chrome-Entwicklertools listen übergroße Bilder, Bilder, die WebP sein sollten, und das Largest-Contentful-Paint-Element auf. Messen Sie vorher und nachher, und nehmen Sie sich zuerst die Seiten mit dem meisten Traffic vor.