Bilder für Websites optimieren
Bilder machen normalerweise den größten Teil des Gewichts einer Seite aus. Fünf Entscheidungen beheben das meiste davon.
Aktualisiert 1. September 2026
Bilder sind auf den meisten Websites der größte Faktor für das Seitengewicht, und das Largest Contentful Paint-Element ist auf der Mehrheit der Seiten ein Bild. Ihre Optimierung ist die leistungsstärkste Leistungsarbeit, die verfügbar ist, und das meiste davon sind Entscheidungen und nicht Werkzeuge.
Dies ist die Reihenfolge, die zählt, vom größten zum kleinsten Effekt.
Schritte
- 1
1. Die richtigen Abmessungen bereitstellen
Messen Sie die größte CSS-Breite, die das Bild einnimmt, und exportieren Sie es mit etwa der doppelten Größe für hochauflösende Displays. Ein Hero-Bild mit 1200 CSS-Pixeln benötigt eine 2400px-Quelle, nicht ein 6000px-Kameraoriginal. Dieser einzelne Schritt übertrifft normalerweise alles andere zusammen.
- 2
2. WebP verwenden, wo möglich mit AVIF
WebP ist bei gleicher Qualität 25–35 % kleiner als JPEG und wird überall unterstützt. AVIF geht noch weiter, kodiert aber langsamer. Behalten Sie einen JPEG-Fallback, wenn Sie sehr alte Clients unterstützen müssen.
- 3
3. Qualität nach Inhalt festlegen, nicht nach Gewohnheit
75–85 für Fotos. Höher für Grafiken mit scharfen Kanten, wo Kompressionsartefakte sichtbarer sind. Überprüfen Sie das Ergebnis in der tatsächlichen Anzeigegröße.
- 4
4. Immer Breite und Höhe festlegen
Explizite Abmessungen ermöglichen es dem Browser, Platz zu reservieren, bevor das Bild geladen wird, was Layoutverschiebungen verhindert. Dies ist eine Cumulative Layout Shift-Korrektur, die nichts kostet.
- 5
5. Lazy-Load unterhalb des sichtbaren Bereichs, niemals darüber
Fügen Sie loading="lazy" zu Bildern weiter unten auf der Seite hinzu. Laden Sie Ihr LCP-Bild nicht lazy-load – das verzögert genau das, was gemessen wird.
Metadaten beim Export entfernen
EXIF- und eingebettete Farbprofile erhöhen das Gewicht ohne Rendering-Vorteil im Web.
SVG für Logos und Icons verwenden
Ein Vektorlogo ist normalerweise nur wenige Kilobyte groß und bleibt bei jeder Größe und Dichte scharf.