Rychlý přehled vývoje
Zhruba před rokem se zdálo býti jistým, že adaptivní obrázky budou řešeny v markupu, a to jednou z právě dvou specifikací: atributem srcset nebo značkou picture. Obě měly velké zástupy (různých) podporovatelů, kteří měli v rukou (různě) dobré argumenty a nezbytné (různě) fungující polyfilly, v důsledku čehož byl očekávaný boj bez favorita.
Rychlého spádu se věcem dostalo v září, když se v Paříži sešli zástupci většiny zainteresovaných společností, včetně všech výrobců hlavních prohlížečů (zápis schůze). Trochu překvapivě se volba neodehrávala pouze mezi zmíněnými dvěma, protože prostor dostal návrh Client Hints, který přenechává rozhodnutí na serveru, návrh na nový responzivní formát obrázku a také návrh na přiohnutí switch elementu.
Zavrhnuta byla značka picture, mezi webovými vývojáři přijatá a oblíbená, mimo jíné i kvůli podobné syntaxi se značkami audio a video, což měla být její hlavní výhoda, ale kterou Ian Hickson označil za velkou návrhovou past (“huge design pitfall”). Vytknuto jí také bylo, že dělá to, co by dělal img, kdyby byl navrhován dnes, a tedy spíše než o nový element by mělo jít o rozšíření img, které je ovšem nerealizovatelné s ohledem na kompatibilitu.
Správným krokem vpřed byla označena syntaxe srcset, přestože je mnohými označována za neintuitivní, náchylnou k chybám nebo dokonce přímo za ošklivou. Především tedy výběr obrázků pro displeje s různou pixel-density (tj. syntaxe s 2x atd.). Jistě pomohla stávající implementace ve vývojové verzi webkitu.
Konečným důsledkem schůze a samozřejmě celé řady diskuzí bylo zařazení srcset do HTML5 specifikace jako návrh na jeho rozšíření. Jinými slovy jasný signál pro autory a implementátory, aby právě tuto syntaxi začali používat.
Dalo by se říci, že bylo rozhodnuto, že můžeme přát slávu vítězi a čest poraženému. Avšak ve chvíli, kdy byli všichni s to začít oslavovat, objevila se na zápraží nová, elegantní a sebevědomá specifikace src-N.
Představení src-N
Na konci září Tab Atkins a John Mellor ze společnosti Google přišli s návrhem na specifikaci, která by měla nahradit srcset i picture. Cílem bylo, aby pokrývala všechny známé důvody použití adaptivních obrázků definované pracovní skupinou W3C.
Vrhněme se přímo do (převzatých) ukázek, které si později vysvětlíme:
<img src-1="(max-width: 400px) pic-small.jpg"
src-2="(max-width: 1000px) pic-medium.jpg"
src="pic-large.jpg">
<img src-1="pic.png, pic-high.png 2x, pic-low.png .5x">
<img src-1="100% (50em) 600px; pic-400.png 400, pic-800.png 800, pic-1200.png 1200">
Základem jsou, jak je vidět, atributy elementu img pojmenované src-1, src-2 atd. Proto se této syntaxi říká src-N (občas také src-n, srcN nebo srcn). Těchto elementů může být libovolně mnoho a každý v sobě nese informaci, kdy se má aplikovat, a samozřejmě jeden nebo více obrázků, z kterých si může prohlížeč vybrat.
Zpracování atributů probíhá vzestupně od src-1, až se najde ten, který je aplikovatelný. Vybere se z něj nejvhodnější obrázek, který se poté použije. Nelze-li použít žádný z atributů tvaru src-N, použije se obrázek definovaný v src – ten se výhodně použije, i pokud prohlížeč tuto syntaxi nepodporuje vůbec.
Příklady, jež učí i táhnou
<img src-1="(max-width: 400px) pic-small.jpg"
src-2="(max-width: 1000px) pic-medium.jpg"
src="pic-large.jpg">První příklad ukazuje, jak se pomocí src-N dělá art direction, tedy to, že na velkém obrázku je zobrazena celá scéna a na malém pouze detail.
Na začátku každého atributu může být uvedena media query, říkající, při které velikosti (nebo pixel-density atd.) se má obrázek použít. Toto zřejmě umožňuje vše, co umí element picture, a je jeho plnohodnotným nahrazením. které je navíc kompaktnější.
Více najdete v odstavci Art Direction dokumentace, ze které jsme převzali i obrázek výše.
<img src-1="pic.png, pic-high.png 2x, pic-low.png .5x">Druhý příklad je vlastně jen přejmenovaný srcset využívající pouze pixel-density (tedy to, co bylo označeno za cestu vpřed). Prohlížeč, který ví, na jaký displej zobrazuje, stáhne buď obrázek v nízkém polovičním (= .5x) rozlišení (je-li např. odzoomováno), nebo ve dvojnásobném (= 2x) rozlišení (je-li např. displej dosti jemný), nebo v běžném rozlišení (bez čísla).
Více najdete v odstavci Resolution dokumentace, ze které jsme převzali příklad výše.
<img src-1="100% (50em) 600px; pic-400.png 400, pic-800.png 800, pic-1200.png 1200">Nejzajímavější třetí ukázka v první části říká, že obrázek má mít šířku celé obrazovky (= 100%) na rozlišeních menších než 50em a 600px na větších (kdy se např. začne používat nějaký grid). Za středníkem následuje čárkami oddělený seznam obrázků s uvedením jejich šířky v pixelech.
Prohlížeč si vybere ten zdroj, který v danou chvíli potřebuje, protože jen on ví, který to je. V úvahu vezme skutečnou šířku zobrazeného obrázku, pixel-density displeje a třeba i rychlost připojení (a samozřejmě nastavení uživatele). Něčeho podobného lze dosáhnout se srcset, ale výsledek bude dlouhý a odpudivý, a s trochou vůle i pomocí picture s výsledkem ještě o řád delším a odpudivějším.
Jen upozorním, že procenta se vztahují k viewportu a ne relativně k umístění. To je samozřejmě matoucí a netuším, proč autoři nenavrhují použít jednotku vw.
Více najdete v odstavci Variable-Sized images dokumentace.
Ať žije kterýkoli z králů
Skutečná síla src-N se skrývá právě v možnostech kombinace předchozích zápisů, intuitivní a krátké syntaxi a – možná především – ve sdílené podpoře komunity a výrobců prohlížečů.
Doufejme, že konečné rozhodnutí o specifikaci a funkční implementace vítěze ve stabilní verzi prohlížečů se objeví brzy.
P. S. Vyzkoušet si src-N můžete už dnes, pomocí našeho polyfillu.
AKTUALIZACE: V komentářích se nám vyjádřil Jirka Kosek:
Naštěstí to v tuto chvíli vypadá, že šílená syntaxe scr-N neprojde. Řešení, které v tuto chvíli vypadá jako východisko, je toto http://picture.responsiveimages.org/
Přehled komentářů