Bilder für das Web: WebP, AVIF oder JPG, und wie Sie Ihre Seite beschleunigen

🖼️ Warum Bilder eine Seite bremsen

Ein Handyfoto hat mehrere Megabyte und tausende Pixel Breite, wird aber in 400 Pixeln angezeigt. Der Besucher lädt alles herunter und sieht einen kleinen Teil. Das trifft sofort LCP, mobiles Datenvolumen und Geduld.

🧾 Formate in Kürze

• JPG: universell, gut für Fotos, aber schwer im Vergleich zu neueren Formaten.
• PNG: für Grafiken mit Transparenz, aber schwer bei Fotos.
• WebP: ein modernes Format, von allen aktuellen Browsern unterstützt, bei ähnlicher Qualität meist deutlich leichter als JPG.
• AVIF: noch effizientere Kompression, in aktuellen Browsern unterstützt, aber langsamer zu erzeugen.
• SVG: für Logos, Icons und Illustrationen. Vektor, klein und auf jedem Bildschirm scharf.

Faustregel: AVIF und WebP für Fotos, SVG für Logos und Icons, JPG als Fallback, wo nötig.

📐 Fünf Regeln

1. Die richtige Größe. Liefern Sie kein 4000-Pixel-Bild aus, wo 800 angezeigt werden.
2. Mehrere Größen (srcset), damit ein Handy ein kleineres Bild bekommt als ein Desktop.
3. Lazy Loading (loading="lazy") für Bilder unterhalb des ersten Bildschirms. Verzögern Sie nicht das Hauptbild oben.
4. Setzen Sie width und height, damit die Seite beim Laden des Bildes nicht springt (CLS).
5. Beschreibender Alt-Text, der sagt, was auf dem Bild ist, nützlich für Barrierefreiheit und SEO.

🏷️ Dateinamen

Statt IMG_2045.jpg nehmen Sie restaurant-belgrad-terrasse.webp. Kurz, beschreibend, ohne Leerzeichen und Umlaute.

🛠️ Wie wir es machen

In unserem Prozess wird jedes Bild automatisch in AVIF und WebP in mehreren Größen erzeugt, mit festgelegten Maßen und Lazy Loading, und Illustrationen sind SVG. Deshalb sind unsere Seiten auch mit vielen visuellen Elementen leicht. Mehr unter Core Web Vitals und auf der Seite Webseite erstellen.