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.

Pokud žijete ve velkém městě s rychlým mobilním internetem a mátě předplaceny gigabajty dat, tak to problém není. Jsou ale i tací, kteří mají na měsíc maximálně stovky MB a tam už je to poměrně bolestivé. Nehledě na to, že pokud se zrovna nacházíte mimo dosah 3G (či lepší) sítě (jak známe naše operátory, není to vůbec složité), tak si na obrázky také i hezky počáte - při rychlosti 100kbps budete na načtení všech obrázků čekat přes 17 minut, což je samozřejmě hodnota nepoužitelná.

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. icon_smile.gif

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

6 komentářů

Neváhejte napsat k článku komentář

Nevyplňujte:

  1. 1
    Le petit caporal

    info<zavináč>denniktraderatečkask

    Dnes sa pomer navštevníkov z mobilou zvyšuje takže je to nutnosť .

  2. 2
    Dominik Fryč

    fryc.dominik<zavináč>gmailtečkacom

    Souhlasím, dnes může být návštěvnost z mobilních zařízení už možná kolem 50%.

  3. 3
    Kubát

    Myslím, že se návštěvnost z mobilů a optimalizace pro mobily dlouhá léta přeceňovala. Až teď, kdy nejlevnější smartphony díky čínským výrobcům padají někam ke dvěma tisícům, se dá čekat, že dojde k masivnímu rozšíření a generování mobilních návštěv opravdu ve všech segmentech. Otázkou je ale třeba odlišné chování pro mobilní a desktopové návštěvníky. Předpokládám, že například drtivá většina nákupů na e-shopech bude i nadále realizovaná z desktopu, kdežto první návštěvy stránek budou čím dál, tím víc z mobilů.

  4. 4
    Miloš

    info<zavináč>forex-investortečkacz

    Google bude penalizovat weby které nebudou optimalizovány pro mobilní zařízení. Takový web se prostě nezobrazí na prvních příčkách ve vyhledávači při vyhledávaní přes mobil.

  5. 5
    Honza

    jan.libal<zavináč>posttečkacz

    Miloši, penalizovat weby, které nejsou optimalizované pro mobilní zařízení určitě Google nebude. Maximálně se můžeme bavit o znevýhodnění, ale i tak mám zkušenost, že neoptimalizovaný web se zobrazuje na první stránce v Google na několik klíčových slov, ovšem do budoucna na to bude brán čím dál tím větší zřetel.

  6. 6
    Tesla

    davidpuchyr<zavináč>gmailtečkacom

    A je to tu, ceho jsme se obavali. Google uprednostnuje to, jak web vypada na mobilech spolecne s mobilnim prohlizecem.