Obrázek na webu dnes
Optimalizace rychlosti webu je v poslední době jedno z nejdiskutovanějších témat. Zkušenosti ukazují, jak masivní dopad na návštěvnost webu má dlouhé načítání obsahu a Google dokonce ve svých výsledcích vyhledávání znatelně penalizuje stránky, které se načítají pomalu. Zatímco optimalizace většiny faktorů zpomalujících stránku je dlouho dobře pokryta články i různými nástroji a je hračka jí realizovat, jeden problém nám, kodérům, byl velmi dlouho trnem v oku – rastrové obrázky.
V průměru tvoří obrázky 50-60% datového objemu webové stránky, takže je zřejmě moudré se jim při optimalizaci obzvlášť věnovat. Celkem donedávna jsme ale moc možností optimalizace obrázků na webu neměli a museli jsme se uchylovat k mnoha přinejmenším problematickým řešením, například:
1/ Úvodní obrázek webu, který zabírá celou šířku stránky, jsme museli prohlížeči posílat co největší, abychom neriskovali, že někomu s obřím monitorem nebude šířka obrázku stačit. To mimo jiné znamená, že kdo navštívil web přes mobil, musel čekat na stažení klidně 10× většího obrázku, než by bylo pro ostré zobrazení na jeho zařízení zapotřebí.
2/ Úpravu obrázků pro retina displeje, které vyžadují ke kvalitnímu zobrazení obrázek ve dvoj- a vícenásobně vyšším rozlišení, než standartní displej, jsme zpravidla řešili tak, že jsme jednoduše každý obrázek posílali prohlížeči ve dvojnásobném rozlišení. Takže na zařízeních s trojnásobnou hustotou pixelů byl obrázek stejně ošklivý a zase zařízení s běžnou hustotou, která z většího rozlišení nikterak netěží, stahovala skoro čtyřnásobně větší soubory.
Co je nového
Po mnoha letech diskuzí mezi vývojáři se nám celkem nedávno konečně dostalo několika praktických rozšíření HTML specifikace, které nám umožňují poslat prohlížeči právě takový obrázek, který bude na cílovém zařízení vypadat dobře a zároveň nebude představovat zbytečně velkou datovou zátěž.
První z nich je HTML element picture, což je úplné řešení zobrazování obrázků napříč cílovými zařízeními. Výčet všech jeho možností je nad rámec tohoto článku, ale ve zkratce: picture není jako img, který má pevně daný jeden zdroj, nýbrž je obalovým elementem pro množinu elementů source (stejně jako u elementu video), z nichž je prohlížečem zobrazen právě jeden určený na základě media queries – můžeme tedy prohlížeč instruovat ke stažení různých zdrojů v závislosti na šířce obrazovky, hustotě pixelů, poměru stran a vůbec na spoustě věcí.
Robustnost volení zdroje pro picture je však vykoupena komplikovaností zápisu. V praxi stejně budeme ve většině případů chtít jenom to, aby si prohlížeč stáhl nejméně datově náročnou verzi téhož obrázku s týmž poměrem stran a ořezem s dostatečným rozlišením. Tento úkol plní další novinka s mnohem přívětivější syntaxí, totiž atributy elementu imgsrcset a sizes. srcset není nic jiného, než seznam různých verzí obrázku spolu s notací jejich rozměrů. Například
... srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw" ...
kde 1024w znamená, že obrázek na dané URL má na šířku 1024px. Prohlížeč pak za předpokladu, že všechny zdroje reprezentují totéž, vybere ten správný. K čemu je pak sizes? Malý problém totiž tkví v tom, že prohlížeč začíná stahovat obrázky ve chvíli, kdy ještě nezačal číst CSS, takže nemá zdání, v jaké velikosti se obrázek zobrazí. A to mu právě sdělujeme prostřednictvím atributu sizes výčtem párů media query – zobrazená šířka.
To, že v případě použití elementu img spolu s atributy srcset a sizes neinstruujeme prohlížeč pevně k výběru konkrétního zdroje, nýbrž mu dáváme údaje potřebné k tomu, aby tento výběr provedl sám, s sebou nese ještě jednu výhodu mimo snadnosti zápisu, totiž možnost, že některé implementace prohlížečů časem začnou při volení zdroje zohledňovat i parametry připojení k internetu a na pomalých nebo zpoplatněných připojeních raději stáhnou menší verzi na úkor kvality.
Hudba zítřka?
Ani zdaleka. Podpora není sice ideální, ale to se jednak velmi rychle mění a jednak existuje skvělý polyfill Picturefill, který kompenzuje nepodporu elementu picture i nových atributů img ve starších prohlížečích a IE. Navíc obě novinky mají přirozený fallback na starou specifikaci img. Důvodů k používání responzivních obrázků už dnes není málo, včetně ohleduplnosti vůči návštěvníkům, připravenosti svého webu na budoucnost a v neposlední řadě drobného postrčený vývojářů prohlížečů k plné implementaci podpory pro tuto rychle se šířící techniku.
Další informace
https://ericportis.com/posts/2014/srcset-sizes/
Velmi zábavný kratší článek, který vás uvede do problematiky responzivních obrázků
http://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
Článek téhož autora, který se více soustředí na škálu použití těchto novinek
https://responsiveimages.org/
Ústřední web s odkazy na spoustu zdrojů pro nezasvěcené i problematiky znalé
http://scottjehl.github.io/picturefill/
I na stránce Picturefillu, jakožto nástroje, který implementuje oficiální specifikaci, je k nalezení hodně informací převážně o uvedení responzivních obrázků do praxe.