Checkliste zur Bildoptimierung für Websites: 10 Schritte zu schnelleren Seiten
·
Bilder machen oft mehr als die Hälfte des Gewichts einer Seite aus. Wenn Ihre Website sich langsam anfühlt, sollten Sie dort zuerst ansetzen, und die Behebung geht meist schneller als jede andere Geschwindigkeitsverbesserung. Diese Checkliste führt Sie durch zehn Schritte, geordnet so, dass Sie aufhören können, sobald die Seite schnell genug ist.
Warum Bilder Seiten ausbremsen
Bilder sind groß, es gibt meist viele davon, und der Browser muss sie herunterladen, bevor die Seite fertig aussieht. Schwere Bilder belasten Besucher mit langsamer Verbindung, erhöhen die Absprungrate und drücken die Werte zur Seitenerfahrung, etwa den Largest Contentful Paint.
Die gute Nachricht ist, dass Bilder auf einfache Maßnahmen sehr gut ansprechen. Schon wenige Änderungen können das Gewicht einer Seite um die Hälfte oder mehr senken.
Die Maßnahmen nach Aufwand und Wirkung geordnet
| Maßnahme | Aufwand | Wirkung |
|---|---|---|
| Auf die Anzeigegröße skalieren | Gering | Sehr hoch |
| Mit Qualität 75–85 komprimieren | Gering | Hoch |
| Ein modernes Format verwenden (WebP oder AVIF) | Gering bis mittel | Hoch |
| Unterschiedliche Größen für unterschiedliche Bildschirme ausliefern | Mittel | Mittel bis hoch |
| Breite und Höhe angeben | Gering | Verhindert Layoutverschiebungen |
| Bilder unterhalb des sichtbaren Bereichs verzögert laden | Gering | Mittel |
| Lange cachen und ein CDN nutzen | Mittel | Mittel |
Beginnen Sie oben. Die ersten drei bringen meist den Großteil der Verbesserung bei sehr wenig Arbeit.
Schritt für Schritt: die Checkliste mit 10 Schritten
- 1Skalieren Sie jedes Bild auf die größte Größe, in der es tatsächlich angezeigt wird. Ein Foto mit 4000 Pixeln in einem 800-Pixel-Platz verschwendet mehr als 90 Prozent seiner Daten. Bild skalieren übernimmt das, und der Ratgeber zu idealen Größen nennt Zielwerte.
- 2Wählen Sie das richtige Format. WebP oder AVIF für Fotos, SVG für Logos, PNG für verlustfreie Grafiken. Siehe den Ratgeber zu Formaten.
- 3Komprimieren Sie mit einer Qualität von etwa 75 bis 85 und prüfen Sie bei voller Vergrößerung. Bild komprimieren zeigt Ihnen die Ersparnis vorab.
- 4Liefern Sie unterschiedliche Größen für unterschiedliche Bildschirme mit
srcsetundsizesaus. Der Ratgeber zu responsiven Bildern zeigt, wie. - 5Setzen Sie
widthundheightbei jedem Bild, damit der Browser Platz reserviert, bevor die Datei ankommt, und die Seite nicht springt. - 6Laden Sie Bilder verzögert, die unterhalb des ersten Bildschirms liegen, mit
loading="lazy". Der Ratgeber zum verzögerten Laden erklärt, wann das sinnvoll ist. - 7Laden Sie das Hauptbild nicht verzögert. Das größte Bild am Seitenanfang ist meist das Largest-Contentful-Paint-Element. Laden Sie es sofort und erwägen Sie
fetchpriority="high". - 8Cachen Sie Bilder lange, etwa ein Jahr, und geben Sie den Dateien einen Inhalts-Hash im Namen, damit Sie sie gefahrlos ersetzen können.
- 9Nutzen Sie ein CDN, das Kopien Ihrer Bilder in der Nähe der Besucher ablegt und Formate oft automatisch umwandelt.
- 10Messen Sie mit PageSpeed Insights oder Lighthouse vorher und nachher und achten Sie auf die Zeit des Largest Contentful Paint.
Vor- und Nachteile der größeren Änderungen
Auf WebP oder AVIF umstellen
- Vorteile: spürbar kleinere Dateien und schnellere Seiten.
- Nachteile: erfordert Fallbacks und etwas Testen. Siehe Umstellung auf WebP.
Ein CDN oder einen Bilddienst nutzen
- Vorteile: automatische Formate und Größen sowie schnelle Auslieferung.
- Nachteile: kostet Geld und schafft eine Abhängigkeit.
Verzögertes Laden
- Vorteile: weniger Daten zu Beginn und eine schnellere erste Ansicht.
- Nachteile: schadet der Seite, wenn Sie es auf das Hauptbild anwenden oder die Abmessungen vergessen.
So messen Sie das Ergebnis
Lassen Sie dieselben Seiten vorher und nachher durch PageSpeed Insights oder Lighthouse laufen. Vergleichen Sie die Gesamtgröße der Bilder und die Zeit des Largest Contentful Paint und lesen Sie die Listen überdimensionierter oder nicht optimierter Bilder, die Ihnen genau sagen, welche Dateien Sie als Nächstes angehen sollten. Der Core-Web-Vitals-Bericht in der Search Console zeigt, was echte Besucher erleben, braucht aber Wochen, um sich zu aktualisieren. Einen tieferen Blick auf diese Werte bietet Wie Bilder die Core Web Vitals beeinflussen.
Häufige Fehler
- Dekorative Bilder optimieren und das größte Bild am Seitenanfang ignorieren.
- Alles verzögert laden, auch das erste Bild.
- Dieselbe Datei wiederholt komprimieren, statt vom Original auszugehen.
- Die Abmessungen vergessen, wodurch die Seite springt.
- Nur einmal mit einer schnellen Verbindung testen. Probieren Sie es auch mit einem Handy in einem langsameren Netz.
Häufig gestellte Fragen
Was ist der schnellste Weg, die Bilder einer Website zu beschleunigen?
Skalieren Sie sie auf die Größe, in der sie tatsächlich angezeigt werden, und komprimieren Sie sie dann. Diese beiden Schritte bringen meist den Großteil der Verbesserung bei sehr wenig Aufwand.
Welches Bildformat ist am besten für die Seitengeschwindigkeit?
WebP ist ein guter Standard für Fotos, AVIF eine Option und JPG der Fallback. Für Logos und Icons nehmen Sie SVG.
Sollte ich jedes Bild verzögert laden?
Nein. Laden Sie Bilder unterhalb des ersten Bildschirms verzögert, das Hauptbild am Seitenanfang aber normal, denn es ist meist das Largest-Contentful-Paint-Element.
Wie groß sollten Bilder auf Websites sein?
So breit, wie sie angezeigt werden, bis etwa zum Doppelten für scharfe Bildschirme. Ein Titelbild hat oft 1600 bis 2000 Pixel und unter 200 bis 300 KB, ein Inhaltsbild 800 bis 1200 Pixel.
Woran erkenne ich, ob die Bildoptimierung gewirkt hat?
Lassen Sie dieselbe Seite vorher und nachher durch PageSpeed Insights laufen und vergleichen Sie das Gesamtgewicht der Bilder und die Zeit des Largest Contentful Paint.