Verwenden Sie das HTML- '<'picture> Element, um moderne Formate mit automatischem Fallback bereitzustellen — Browser wählen das erste unterstützte Format:
<picture> <!-- Best compression (AVIF) — ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) — ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) — 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Beschreibung" loading="lazy">
</picture>
srcset für verschiedene Viewport-Breitenloading="lazy" für Bilder unterhalb des sichtbaren BereichsMehr zur Optimierung finden Sie in unserem Leitfaden zur Bildoptimierung.
AVIF bietet die beste Komprimierung (20-50% besser als WebP, 50-80% besser als JPEG), hat aber etwas weniger Browser-Unterstützung als WebP. WebP wird von allen modernen Browsern unterstützt (weltweit 95%+). Verwenden Sie das '<'picture>-Element mit AVIF als primärer Quelle, WebP als Fallback und JPEG/PNG als letzten Fallback.
PNG verwenden wenn: (1) Transparenz/Alpha-Kanal benötigt wird, (2) verlustfreie Qualität für Screenshots oder textlastige Bilder, (3) Bilder mit scharfen Kanten wie Logos oder Diagramme. JPEG für Fotos verwenden, bei denen einige Farbdaten verworfen werden können.
SVG ist ideal für Logos, Icons und Illustrationen. Vektorbasiert bedeutet scharf in jeder Auflösung und kleines Dateiformat. Wenn SVG nicht möglich ist, WebP oder PNG mit Transparenz verwenden.
Verwenden Sie das <picture>-Element: Zuerst <source type='image/avif'>, dann WebP und schließlich JPEG/PNG als <img>-Element. Browser wählen automatisch das unterstützte Format.