Bildoptimierung

TL;DR

Bildoptimierung umfasst Komprimierung, Formatwahl und Größenanpassung. Bilder machen oft 50-70% des Seitengewichts aus – hier liegt das größte Einsparpotenzial.

Warum Bildoptimierung wichtig ist

Bilder sind der größte Faktor bei PageWeight. Eine nicht optimierte Website lädt oft 5-10 MB an Bildern – eine optimierte unter 500 KB. Das ist ein Unterschied von Faktor 10-20.

Die drei Säulen der Bildoptimierung

• Format: WebP oder AVIF statt JPEG/PNG
• Komprimierung: Qualität so weit reduzieren, dass es visuell nicht auffällt
• Größe: Nie größer als nötig ausliefern

Moderne Bildformate

• WebP: 25-35% kleiner als JPEG, breite Browser-Unterstützung
• AVIF: 50% kleiner als JPEG, beste Qualität, wachsende Unterstützung
• SVG: Ideal für Icons und Illustrationen, skaliert verlustfrei

Responsive Images

Mit srcset und sizes laden Browser automatisch die passende Bildgröße:

• Mobilgeräte: kleines Bild
• Desktop: größeres Bild
• Retina-Displays: hochauflösende Version

Lazy Loading

Bilder, die nicht im sichtbaren Bereich sind, sollten erst beim Scrollen laden. Das verbessert LCP und spart Daten bei Nutzern, die nicht bis unten scrollen.

Bildoptimierung und Nachhaltigkeit

Optimierte Bilder sind der größte Hebel:

• Weniger Datentransfer = weniger Energie
• Schnellere Ladezeiten = bessere UX
• Kleinere Bundles = weniger Serverkosten

Fazit

Bildoptimierung ist Pflicht, keine Kur. Wer hier nicht optimiert, verschwendet massiv Ressourcen – und nervt Nutzer mit langsamen Seiten.