Responzivní obrázky umožňují prohlížeči zvolit nejlepší obrázek pro zařízení — ušetří šířku pásma na telefonech a podává ostré obrázky na obrazovkách s vysokou DPI.
srcset + sizes — stejný obrázek, různá rozlišení
html
srcset uvádí kandidátní obrázky s jejich vnitřními šířkami (400w = 400px na šířku).sizes říká prohlížeči, jak широká bude obrázek zobrazen na různých breakpointech (zde: plná šířka viewportu pod 600px, jinak polovina).sizes + hustotu pixelů zařízení, aby zvolil nejmenší obrázek, který stále vypadá ostře — předtím, než si něco stáhne.Telefon si může vybrat small.jpg; laptop Retina, který jej zobrazuje na 50% šířky, si může vybrat large.jpg.
<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>
Prohlížeč používá první <source>, který podporuje/odpovídá. Používejte <picture>, když potřebujete různé formáty (servírujte AVIF/WebP s JPEG fallbackem) nebo jinou oříznutí na velikost obrazovky (umělecké řízení) — věci, které srcset sám nemůže udělat.
srcset + sizes.<picture>.Podávání obrázků se správnou velikostí a moderního formátu je jednou z největších výher výkonu pro web — dramaticky snižuje využití mobilních dat a zlepšuje Largest Contentful Paint.
Tyto nativní nástroje umožňují prohlížeči automaticky učinit optimální volbu s elegantními fallbacky pro starší prohlížeče.