Možná se vám to stalo také, Google (Webmaster Tools) mi přibližně před dvěma měsíci poslal upozornění, že můj blog není mobile-friendly. Už dlouho jsem si tohoto problému vědom a upozornění od Google byla poslední kapka a motivace k upgradu. Kompletně jsem tak tento blog osvěžil a přidal responzivní CSS, ale pořád tomu něco chybělo.

Mít responzivní design se už pomalu stává standardem a dost možná se brzy stane design pro zařízení s malým displejem důležitějším, než ten pro velké obrazovky. Jenže co když máte články bohaté na multimédia, jako např. cestopisy mé sestry?

Podívejme se konkrétně na článek Brouzdání bujným Borneem 2014. No není super, že si můžete článek i na malém displeji pohodlně přečíst? Ano, ale to, že jste museli stáhnout téměř 13MB obrázků, už moc ne.

atribut srcset a sizes

Naštěstí existuje elegantní řešení, které můžete snadno integrovat do vašeho stávajícího webu. Potřebujete pouze více verzí svých obrázků a následně přidat atributy srcset a sizes do vašich img tagů.

původní HTML: <img src="pic.jpg" />

nové HTML: <img src="pic.jpg" srcset="pic.jpg 1024w, pic_mid.jpg 960w, pic_low.jpg 480w" sizes="(min-width: 40em) 20em, 90vw">

A jaké informace zde prohlížeči poskytujeme? Atribut srcset jednoduše obsahuje vyjmenované cesty k vašim obrázkům různých velikostí, následované jejich šířkou v pixelech (browser nemá možnost, jak zjistit velikost obrázku, aniž by jej musel stáhnout). Nepovinný atribut sizes je zde proto, že naše obrázky často nezabírají 100% displeje (což je výchozí hodnota a pokud tomu tak je, nemusíte uvádět nic). Často náš obrázek zabírá např. polovinu šířky odstavce (který už sám o sobě nezabírá 100% šířky obrazovky). Parametr podporuje vícero hodnot a media queries. V našem příkladu tak říkáme, že pokud je viewport větší než 40em, bude obrázek zabírat velikost 20em. Pokud je však viewport menší, budou zabírat téměř celý display (90% viewportu).

Při určování velikosti je možné provádět i různé výpočty s CSS rozměry, takže lze mnohé automatizovat. Pro podrobnější popis doporučuji např. tento článek: Responsive Images in Practice (je zde popsáno i řešení pomocí picture tagu, pokud preferujete více HTML5 cestu)

A proč to všechno dělat?

Důvody jsem už nastínil v úvodu. Nemusí jít pouze o případ, kdy se nacházíte mimo velké město a máte proto pomalý internet. Můžete být např. na dovolené v zahraničí a zde máte pravděpodobně značně omezenější množství dat. Ten případ, kdy má uživatel rychlé připojení, ale velké datové omezení mi přijde nehorší, protože pro něj moc neexistuje ze strany uživatele obrana. Uživatel si prostě brouzdá internetem a doufá, že nenarazí na web, kde se mu stáhne 20 MB dat při jediném načtení URL, což může být třeba 10% jeho dat. Problém je menší v případě, kdy máte pomalé připojení, protože můžete načítání prostě zastavit tlačítkem stop. Nedostanete tak požadovaný obsah, ale alespoň to můžete zkusit někde jinde.

A co že má toto obohacení img značek společného s vesničany? Není totiž definvoané, jakým způsobem mají prohlížeče provádět výběr správného obrázku. Všechny tyhle informace jsou pouze určité hinty a user-agent s nimi může naložit jak chce. Prohlížeč si tak může např. držet určitou statistiku o rychlosti připojení uživatele a rozhodnout se pro obrázek s menším rozlišením i pro velký display. Popř. to rozhodnutí může učinit uživatel sám nastavením někde v prohlížeči. Je tohle podporované? Bude? Nevím, ale jde to.

Osobně jsem chtěl img tagy obohatit automatizovaně, ale bohužel to úplně nejde (protože stejně jako browser při generování HTML nevím, jak velké jsou jednotlivé obrázky). Šlo by to samozřejmě zjistit a pro příště hodnoty cachovat, ale do toho se mi momentálně nechce. Do budoucna ale budu do nových článků přidávat obrázky responzivně a tenhle článek píšu protože chci, abyste to dělali také.

Zdroj obrázku: www.bloomberg.com