Responsivní obrázky

6. ledna 2014 Responsivní design Obrázky Hotová řešení

Co s obrázky na mobilních zařízeních?

Nastavit max-width
Více obrázků
Řešení na straně serveru
Řešení v JavaScriptu
Detekce mobilního prohlížeče
Lightbox
Odkazy

Poradit si s obrázky (tím jsou myšleny obyčejné PNG/GIF/JPG obrázky vložené značkou <img> — ne například vektory/SVG) je jedna z největších výzev při vytváření responsivního designu. Proč?

Obrázky mají fysicky dané pevné rozměry v pixelech. Tyto rozměry jsou často větší než obvyklá šířka mobilních obrazovek, což je třeba 480 pixelů.
Při změně velikosti na jinou než výchozí, a to menší i větší, dojde ke ztrátě kvality.

Nastavit `max-width`

Nejprostší řešení je šířku obrázkům omezit na 100 %.

img {
  max-width: 100%
}

A je to. Je potřeba myslet na box model. V případě výchozího okrajového se přičte případný padding nebo border (ukázka). Zároveň je nutné nechat dopočítat výšku podle té nové šířky. Takže spíš použít:

img {
  max-width: 100%; 
  box-sizing: border-box; 
  height: auto
}

Nevýhoda tohoto postupu je zřejmá:

Bude se značně plýtvat s daty.
Zmenšení/zvětšení v prohlížeči nebude tak kvalitní, jak by mohlo být.
Prohlížeč nebude do načtení obrázku znát jeho rozměry a nepůjde mu tak vyhradit přesné místo. Stránka tedy může během načítání poskakovat.
- Nastavení výšky responsivního obrázku – nastavení výšky podle šířky

Více obrázků

Druhé (a kromě jednoduchosti lepší) řešení spočívá ve vytvoření více obrázků s různými rozměry. To je nejlepší nějak zautomatisovat na straně serveru (řešení v PHP).

Potom už stačí jen v závislosti na zařízení zobrazit ten vhodný rozměr.

Řešení na straně serveru

Hotové řešení v PHP je například Adaptive Images. Funguje to tak, že jednoduchý JavaScript uloží do cookie rozlišení obrazovky:

document.cookie = 'resolution=' + 
  Math.max(screen.width, screen.height) +
  '; path=/';

Potom se úpravou souboru .htaccess zajistí, aby požadavky na obrázky zpracovával PHP skript. Ten si vezme z cookie hodnotu rozlišení a podle toho vygeneruje obrázek. Různé velikosti obrázků se pro urychlení následně ukládají do cache.

Nevýhoda tohoto řešení může být v tom, že se na stejné adrese nachází různé velikosti téhož obrázku. A nejspíš bude taktéž problém v tom, že při změně rozměrů se zobrazí obrázek z cache, a tedy se špatnou velikostí.

Řešení v JavaScriptu

Když v redakčním systému zajistíme generování různých velikostí, můžeme je potom nastavovat JavaScriptem.

Využít jde podobného postupu jako při lazy loadingu obrázků — <noscript> značku, do které se umístí skutečný obrázek a poblíž ní vloží JavaScript zmenšeninu/zvětšeninu podle aktuálního rozlišení.

Tak funguje třeba Picturefill.

Detekce mobilního prohlížeče

Ještě je možnost detekovat mobilní prohlížeč z hlavičky user-agent a o velikosti obrázku, který se má vložit, rozhodnout na straně serveru.

Zde může být problém, že jako mobilní bude určeno staré zařízení s rozlišením 320 × 240 i nové s rozlišením 1920 × 1080.

Lightbox pro zobrazení plného obrázku je většinou lepší na mobilních zařízeních zrušit. Vyhneme se tak trapné situaci, kdy se po rozkliknutí náhledu zobrazí datově velký obrázek, který ale bude ve finále stejně velký nebo dokonce menší než náhled.