Bilder für schnellere Websites optimieren (WebP vs AVIF) | We.Inc
Wähle das passende Format, skaliere mit srcset, lade die richtigen Bilder per Lazy Loading und niemals das Hero-Bild. Mit Markup-Generator für picture, srcset und fetchpriority.
Bilder für eine Website optimieren
Bilder zu optimieren läuft auf vier Schritte hinaus: das Format wählen, das zum Bild passt, nur die Pixelbreiten exportieren, die das Layout braucht, jede Datei komprimieren und steuern, wann sie lädt. Liefere AVIF oder WebP mit JPEG als Fallback aus, führe die Breiten im srcset auf, lade Bilder unterhalb des sichtbaren Bereichs per Lazy Loading und gib dem Hero-Bild stattdessen fetchpriority high.
Welches Format für welches Bild
Bild
Bestes Format
Fallback
Foto
AVIF oder WebP
JPEG
Screenshot mit Text
WebP verlustfrei oder PNG
PNG
Logo, Symbol, einfache Formen
SVG
PNG
Kurze Animation
Video (MP4 oder WebM)
Animiertes WebP
Bilder sind meist der schwerste Teil einer Seite, und das Hero-Bild ist oft das Element, das für den Largest Contentful Paint gemessen wird. Den Großteil der Einsparung bringen Einstellungen, die du einmal festlegst: Format, Breiten, Qualität und Ladeverhalten. Der Generator unten schreibt das passende Markup für diese Entscheidungen, und die Checkliste danach deckt den Rest ab.
Wähle das Format anhand der Tabelle: Fotos als AVIF oder WebP, flache Grafiken als SVG.
Skaliere auf drei bis fünf Breiten, die Smartphones bis große Bildschirme abdecken.
Komprimiere jede Datei und prüfe das Ergebnis in voller Größe auf Unschärfe und Farbstufen.
Erzeuge das Markup mit dem Generator, markiere das Hero-Bild mit hoher Priorität und die übrigen als lazy.
Führe einen Geschwindigkeitstest der Seite aus und sieh dir zur Bestätigung die bildbezogenen Audits an.
Lade das Hero-Bild oder ein beim ersten Rendern sichtbares Bild nie per Lazy Loading; web.dev warnt, dass das den Largest Contentful Paint verzögert.
Setze immer width und height, damit der Browser Platz reserviert und das Layout nicht verrutscht.
Entferne beim Export die Kamera-Metadaten; Standort- und Geräteangaben kosten Bytes und können private Informationen preisgeben.
Nutze einen CSS-Hintergrund nur zur Dekoration; inhaltliche Bilder gehören in img-Tags mit Alt-Text.
Vergleiche Qualitätseinstellungen mit bloßem Auge bei 100% Zoom, denn der richtige Wert unterscheidet sich je nach Encoder.
Häufige Fragen
WebP oder AVIF: Was sollte ich verwenden?
Beide schlagen JPEG bei Fotos. AVIF ist das neuere Format und komprimiert oft stärker, während WebP schneller kodiert und schon länger unterstützt wird. Ein sicheres Muster ist ein picture-Element, das zuerst AVIF, dann WebP und im img-Tag ein JPEG für alles Ältere anbietet.
Was macht das Attribut sizes?
Es teilt dem Browser vor dem Layout mit, wie breit das Bild gezeichnet wird, damit er die richtige Datei aus dem srcset wählen kann. Ohne sizes nimmt ein Browser an, dass das Bild den ganzen Viewport füllt, und lädt womöglich eine viel größere Datei als nötig.
Sollte jedes Bild loading lazy verwenden?
Nur Bilder unterhalb des sichtbaren Bereichs. Lazy Loading wartet, bis der Browser weiß, wo ein Bild sitzt, und diese Verzögerung willst du bei nichts, was Besucher sofort sehen.
Wie stark sollte ich komprimieren?
Senke die Qualität, bis du in voller Größe gerade einen Unterschied siehst, und geh dann eine Stufe wieder hoch. Unruhige Fotos verbergen Kompression gut; weiche Verläufe, Himmel und Text zeigen Artefakte früher.
Brauche ich ein Plugin oder einen Dienst, um Bilder zu optimieren?
Nein. Du kannst in einem Bildeditor oder mit einem kostenlosen Browser-Tool skalieren und konvertieren und das Markup dann von Hand schreiben. Dienste helfen, wenn du Tausende Bilder oder Nutzer-Uploads automatisch verarbeiten musst.
Zuerst das Format
Der Format-Leitfaden von web.dev fasst es zusammen: Bevorzuge Vektoren, wenn das Bild aus Formen und Text besteht, und nutze für Fotos ein modernes Rasterformat. PNG bewahrt jedes Pixel exakt, was zu Screenshots passt, Fotos aber unnötig groß macht.
Mit dem picture-Element kannst du neue Formate anbieten, ohne alte Browser zu verlieren. Der Browser nimmt die erste source, deren type er versteht, und greift sonst auf das img darin zurück.
Die richtige Größe für jeden Bildschirm
web.dev weist darauf hin, dass Bilder in Desktop-Größe auf Smartphones zwei- bis viermal mehr Daten verbrauchen können als nötig, und empfiehlt drei bis fünf Größen pro Bild. Führe sie mit Breitenangaben im srcset auf und beschreibe das Layout in sizes.
Miss die gerenderte Breite in deinem Layout, statt zu raten. Eine Karte, die auf dem Desktop ein Drittel des Bildschirms und auf Smartphones die volle Breite einnimmt, braucht einen sizes-Wert, der genau das sagt.
Reihenfolge beim Laden
Lazy Loading spart auf langen Seiten Bandbreite, also setze loading lazy bei Bildern weiter unten. Ergänze beim wichtigsten Bild im sichtbaren Bereich fetchpriority high, damit es vor weniger wichtigen Dateien angefordert wird.
decoding async lässt den Browser Text darstellen, bevor er ein großes Bild fertig dekodiert hat. Das ist ein Hinweis, und Browser können ihn ignorieren.
Checkliste zur Bildoptimierung
Was du prüfst und warum
Prüfung
Wie
Warum es hilft
Modernes Format
picture mit AVIF- und WebP-Quellen
Kleinere Dateien bei gleichem Aussehen
Responsive Breiten
srcset mit w-Angaben plus sizes
Smartphones überspringen Dateien in Desktop-Größe
Komprimierung
Qualität je Bildtyp nach Augenmaß eingestellt
Weniger Bytes pro Pixel
Abmessungen
width- und height-Attribute
Verhindert Layoutverschiebungen
Lazy Loading
loading="lazy" nur unterhalb des sichtbaren Bereichs
Spart Daten auf langen Seiten
Priorität für das Hero-Bild
fetchpriority="high" beim Hauptbild
Schnellerer Largest Contentful Paint
Alt-Text
Inhaltliche Bilder beschreiben; leeres alt für Dekoration
Barrierefreiheit und Bildersuche
Markup-Muster zum Kopieren
AVIF und WebP mit JPEG als Fallback
Der Browser nutzt den ersten source-Typ, den er unterstützt. Das img trägt Größe, Alt-Text und Ladehinweise für jedes Format.
Stapelweise skalieren und konvertieren mit sharp
Ein kleines Node-Skript mit dem Paket sharp: Jedes JPEG in ./src wird zu drei WebP-Breiten in ./out.
Zedernholz-Terrasse mit eingebauter Bank bei Sonnenuntergang
Generator für Bild-Markup
Lege Dateinamen, Breiten, Formate und die Position des Bildes auf der Seite fest. Der Generator schreibt picture- und img-Markup mit den richtigen Ladehinweisen.