srcset/sizes

Nové atributy elementu <img>, které řeší potřebu autorů stránek zobrazovat v různých stavech responzivního designu různé varianty obrázků.

Na atributech srcset a sizes je hezké, že poměrně složité rozhodování, který obrázek ve které situaci použít, necháváme na prohlížeči. Jako autoři stránky mu jen řekneme jaké varianty obrázku má k dispozici (srcset) a jak jsou veliké mezi jednotlivými breakpointy layoutu (sizes).

Pracovní inzerce

  • Heureka.cz: Frontend Developer
  • Ataccama: Front-End Leader
  • Ataccama: Front-End Developer

srcset – sada zdrojů obrázku a jejich vlastností


<img src="small.png"
srcset="small.png 600w, medium.png 1024w, large.png 1600w"
alt="Obrázek" width="200" height="200">

srcset demo na CodePen. (V demu jsme použili polyfill Picturefill, takže funguje ve všech prohlížečích, ale možná jste si všimli nepřítomnosti atributu src.)

Prohlížeči tím sdělujeme, že jsme předgenerovali obrázek small.png v šířce 600 pixelů, medium.png v šířce 1024 pixelů a a large.png v šířce 1600 pixelů. V atributu src pak uvádíme fallback pro prohlížeče, které srcset neumí.

Prohlížeč pro rozhodování o tom, který obrázek načíst, zde bere šířku okna. Takže do 600 pixelů a méně širokého okna načte small.jpg, mezi 601 a 1024 pixelů širokým pak medium.jpg a v oknech šířky od 1025 pixelů načte large.png.

Některé prohlížeče – jako Chrome – to budou dělat chytřeji a například small.jpg budou zobrazovat i daleko nad hranicí 600pixelového okna, protože na vizuální kvalitě to obrázku neubere.

Prohlížeč bere v potaz i aktuální device-pixel-ratio a tak třeba na původním Retina displeji (device-pixel-ratio=2) načte medium.jpg i v případě, že okno je široké 600 pixelů. Chrome například načítá kvalitnější obrázek i ve chvíli, kdy uživatel nad obrázkem zoomuje. Do budoucna prohlížeče mohou načítat třeba méně kvalitní obrázek na pomalém internetovém připojení.

Ano, přesně v potenciálu chytrého rozhodování prohlížeče vězí krása srcset. Prohlížeč zváží všechny informace, které má o stavu stránky k dispozici a podle toho vybere nejvhodnější obrázek. Vy jako autoři jen vygenerujete dost variant a správně je popíšete – pomocí deskriptorů.

Deskriptory vlastností obrázků v srcset

Zatím jsme zmínili jen šířku obrázku – deskriptor w. Ten říká jakou šířku v pixelech obrázek má při exportu z grafického editoru nebo po výstupu z vašeho skriptu.

Druhý deskriptor x určuje připravenost souboru s obrázkem pro různé device-pixel-ratio poměry, například:

<img … srcset="image.jpg, image@2x.jpg 2x">

Tímto zápisem říkám, že image@2x.jpg má prohlížeč použít při device-pixel-ratio alespoň 2 a image.jpg ve všech hodnotách menších než 2.

Pojďme se ale podívat na atribut, který prohlížeči umožní vybírat nejen podle fyzických parametrů souborů s obrázky, ale i podle velikosti obrázku v rámci layoutu stránky — sizes.

sizes – velikosti obrázků

V praxi totiž tak často nepotřebujeme volit obrázek podle šířky okna, ale podle šířky obrázku v rámci layoutu:


<img src="small.png"
srcset="small.png 600w, medium.png 1024w, large.png 1600w"
sizes="(min-width: 768px) 300px, 100vw"
alt="Obrázek" width="200" height="200">

Tímto zápisem říkáme, že responzivní layout je vymyšlený tak, že v oknech šířky 768 pixelů a více má obrázek šířku 300 pixelů ve všech ostatních pak 100 procent šířky viewportu.

První vyhovující varianta v sizes vyhrává, takže na pořadí záleží. Bacha na to.

Proč si velikosti obrázků prohlížeč nevezme z CSS?

Rozhodování, který obrázek použít, prohlížeče dělají ještě předtím než znají celý DOM. Je to chování, které je velmi výhodné pro uživatele – urychluje načítání obrázků a vlastně celé stránky.

V tu chvíli o vašich CSSkách skoro nic nevědí, natož aby znaly jejich obsah. Tak proto.

Velikosti obrázků podle layoutu

Nojo, jenže v responzivním, potažmo fluidním layoutu obvykle přesně nevíme jaké rozměry budou mít obrázky v rámci konkrétní šířky okna. A hurá — tady přichází síla kombinace sizes s funkcí calc(). Pomocí ní můžeme elegantně definovat velikost obrázku relativně k layoutu mezi konkrétními breakpointy.

Opět tedy máme demo na CodePenu. Nejdříve si ale raději pojďme vizualizovat jak vlastně náš layout vypadá:

Layout příkladu pro demonstraci srcset/sizes

Do 600px breakpointu je to jednoduché – obrázek zabírá celou šířku layoutu. Nikoliv ovšem šířku okna a tak musíme odečíst výchozí margin u <body>, který mají prohlížeče nastavený na 8px:

calc(100vw - 2*8px)

Od 600px breakpointu pak musíme vyjít z CSS layoutu:

@media only screen and (min-width: 600px) {
  .image {
    width: 49%;
  }
}

Přepsáno do funkce calc() to vypadá takto:

calc((100vw - 2 * 8px) * 0.49)

A ještě v prostém jazyce:

(100 procent šířky viewportu - výchozí margin u <body>) * 49% šířka obrázku

Takže celý zápis tagu <img> bude vypadat takto:


<img src="small_600.png"
srcset="small_600.png 600w, medium_1024.png 1024w, large_1600.png 1600w"
sizes="(min-width: 600px) calc((100vw - 2*8px) * 0.49), calc(100vw - 2*8px)"
alt="Obrázek" width="200" height="200">
 

Pojďme si pro jistotu ještě shrnout zápis v sizes:

  1. ve viewportech šířky alespoň 600 pixelů bude mít obrázek velikost calc((100vw - 2 * 8px) * 0.49)
  2. ve všech ostatních případech – to znamená do 599 pixelů pak calc(100vw - 2 * 8px)

srcset & sizes demo na CodePenu. (V demu jsme použili polyfill Picturefill, takže funguje ve všech prohlížečích, ale možná jste si všimli nepřítomnosti atributu src.)

Se srcset a sizes si vystačíte v naprosté většině situací kdy budete potřebovat sáhnout po řešení responzivních obrázků.

Pokud budete potřebovat servírovat zcela jinak vypadající obrázky pro různá rozlišení (scénář art direction) nebo obrázky v různých souborových formátech, sáhněte po novém tagu <picture>.

Nevýhody aktuálního řešení

Materiál je to čerstvý a podpora prvních prohlížečů přišla snad v rekordně krátkém čase po vydání finální verze specifikace. Dále se o něm diskutuje. Proto se nelze divit některým nedořešenostem. Kromě problémů polyfillu je tu například často zmiňovaný fakt, že HTML každého obrázku v sobě nese informaci o nastavení designu. Když se změní, musí chudák vývojář všechny výskyty této informace měnit. Věřím ale, že se tuhle drobnou nevýhodu podaří brzy odstranit. Například přidáním meta tagu, který by informace o layoutu sdružoval na jedno místo.

Podpora v prohlížečích

Prakticky všechny prohlížeče ústy svých tvůrců deklarovaly, že tento standard naimplementují. Ano, včetně Internet Exploreru, ptáte se správně. Jenže jim bude chvíli trvat než to udělají. Nativní podpora je k dispozici v posledních verzích Chrome, Opeře a zčásti Safari. Do té doby – a samozřejmě kvůli starším prohlížečům – je potřeba používat polyfill Picturefill. Ten má jistá omezení, ale ve většině případů vám pomůže s výběrem správné varianty obrázku už nyní, takže se zkoušením není potřeba váhat.

Čtěte dále

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Responzivní design.

Efektivní ladění responzivních webů

27. 6. 2016 v příručce

Jak si poradit s dnešní škálou prohlížečů a zařízení? A jak s nepřítomností pořádných vývojářských nástrojů na mobilech? Svatý grál neznám, ale pár tipů ze své praxe bych měl.

Tři viewporty na mobilních zařízeních

24. 4. 2016 v příručce

Co je layoutový a co vizuální viewport? Co přesně přesně vyjadřuje device-pixel-ratio a proč nepoužívat screen.width v Javascriptu nebo min-device-width v CSS?


Martin Michálek

Autor: Martin Michálek

Nezávislý frontend designér s šestnáctiletou praxí a nadšením pro moderní webové postupy a technologie. Píše Vzhůru dolů, školí a je k dispozici pro konzultace.

Kurz „Responzivní design“

Přijďte probrat principy, které s nástupem smartphonů a tabletů změnily tvorbu webů. Vezmeme to pořádně do hloubky a vše si vyzkoušíte. Příští termín: 13. října.

Termíny dalších veřejných školení

29. září SVG
6. října Dnešní webová kodéřina
27. října Optimalizace rychlosti načítání
10. listopadu Bootstrap
24. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč