Responsivní obrázky

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č?

  1. 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ů.
  2. 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á:

  1. Bude se značně plýtvat s daty.

  2. Zmenšení/zvětšení v prohlížeči nebude tak kvalitní, jak by mohlo být.

  3. 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.

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.

Odkazy

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Max-width pro pozadí

Maximální šířka pozadí

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

Nastavení rozměrů responsivního obrázku

Nastavení výšky responsivního obrázku

Jak zabránit poskakování responsivních obrázků během načítání stránky.

Responsivní web

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

Obtékané boxy s proměnlivou šířkou

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

Responsivní design webu

Responsivní design webu

Jak jednoduše a kvalitně vytvořit web, který se přizpůsobí všem velikostem cílových zařízení.

Komentáře