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.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden