Responsive Bilder ermöglichen es dem Browser, das beste Bild für das Gerät auszuwählen — spart Bandbreite auf Telefonen und liefert scharfe Bilder auf hochauflösenden Bildschirmen.
srcset + sizes — gleiches Bild, unterschiedliche Auflösungen
html
Responsive Bilder ermöglichen es dem Browser, das beste Bild für das Gerät auszuwählen — spart Bandbreite auf Telefonen und liefert scharfe Bilder auf hochauflösenden Bildschirmen.
srcset listet Kandidatenbilder mit ihren inhärenten Breiten auf (400w = 400px breit).sizes teilt dem Browser mit, wie breit das Bild bei verschiedenen Breakpoints angezeigt wird (hier: volle Viewport-Breite unter 600px, sonst halb).sizes + die Pixeldichte des Geräts, um das kleinste Bild auszuwählen, das immer noch scharf aussieht — bevor etwas heruntergeladen wird.Ein Telefon könnte small.jpg auswählen; ein Retina-Laptop, das mit 50% Breite anzeigt, könnte large.jpg auswählen.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Der Browser verwendet die erste <source>, die er unterstützt/erfüllt. Verwenden Sie <picture>, wenn Sie verschiedene Formate benötigen (servieren Sie AVIF/WebP mit JPEG-Fallback) oder einen anderen Schnitt pro Bildschirmgröße (Kunstrichtung) — Dinge, die srcset allein nicht kann.
srcset + sizes.<picture>.Das Servieren von richtig dimensionierten, modernen Bildern ist einer der größten Performance-Gewinne im Web — es reduziert die mobile Datennutzung dramatisch und verbessert Largest Contentful Paint.
Diese nativen Tools ermöglichen es dem Browser, die optimale Wahl automatisch zu treffen, mit eleganten Fallbacks für ältere Browser.