Fotos machen eine Website lebendig, sind aber oft der größte Teil der Datenmenge einer Seite. Mit wenigen Regeln laden sie schnell, ohne sichtbar an Qualität zu verlieren.
1. Die richtige Größe
Lade Bilder nicht in der Originalgröße der Kamera hoch. Ein Foto, das auf der Seite höchstens 1.200 Pixel breit angezeigt wird, braucht keine 6.000 Pixel. Für hochauflösende Bildschirme genügt etwa die doppelte Anzeigebreite.
2. Das richtige Format
- WebP oder AVIF für Fotos: deutlich kleiner als JPEG bei gleicher Qualität und in aktuellen Browsern unterstützt.
- SVG für Logos und Icons: bleibt in jeder Größe scharf.
- PNG nur, wenn du Transparenz brauchst und SVG nicht passt.
3. Komprimieren
Eine moderate Kompression ist mit bloßem Auge meist nicht zu erkennen und spart viel Datenmenge. Prüfe das Ergebnis immer in der Größe, in der das Bild auf der Seite erscheint.
4. Ladeverhalten steuern
- Breite und Höhe angeben: Dann reserviert der Browser den Platz, und das Layout springt beim Laden nicht.
- Lazy Loading (
loading="lazy") für Bilder weiter unten auf der Seite: Sie laden erst, wenn der Besucher dorthin scrollt. - Kein Lazy Loading für das große Bild ganz oben: Es soll so früh wie möglich erscheinen, weil es oft den LCP-Wert bestimmt.
- Verschiedene Größen anbieten (
srcset), damit Smartphones kleinere Dateien bekommen.
5. Alternativtext nicht vergessen
Jedes inhaltliche Bild braucht einen beschreibenden Alternativtext, für Barrierefreiheit und für die Bildersuche.
Wie moderne Frameworks Bilder automatisch in passenden Größen und Formaten ausliefern, zeigt unser Artikel Astro Performance: Islands und Zero JavaScript.
