Přejít k navigační liště

Zdroják » Webdesign » Hardwarový a CSS pixel v responzivním designu

Hardwarový a CSS pixel v responzivním designu

Články Webdesign

Proč nás nezajímá rozlišení udávané výrobci? Co je CSS pixel a co device-pixel-ratio? Proč nestačí mít 2x velké obrázky? Tentokrát se podíváme do hloubky jedné ze základních technických problematik responzivního designu.

Nálepky:

Původně vyšlo na blogu VzhůruDolů.cz. Tento i další technické aspekty responzivního webdesignu se můžete naučit na autorově školení.

CSS pixel. Referenční pixel. Ať už tomu říkáme jakkoliv, pixel už holt není, co za našeho mládí býval.

Na to, jak je CSS pixel v dnešním webdesignu důležitý, je pohříchu málo známý. Proto tady začneme úplně od základů.

Hardwarové rozlišení nás moc nezajímá

Retina, Amoled, QuadHD. Asi jste si všimli, že mobilní zařízení mají v poslední době dost šílená rozlišení. A trend u mobilních zařízení neskončí, viz MacBook Pro s Retina displejem.

Kouká se přes ně na weby dobře, což o to. Ale kdo má pro ně ty weby navrhovat?!

Vezměme iPhone5S, ten má rozlišení 640×1136 pixelů. Když tohle na školení zmíním, je to přesně ta chvíle kdy se někteří webaři začnou čertit: „Když si někdo otočí iPhone na šířku, zobrazí se mu web tak, jak jsem ho v breakpointu 1024px připravoval pro tablet nebo menší desktop. Hrůza!“

Není to tak. Hardwarové pixely nás webaře totiž skoro nezajímají. Zato CSS pixely jsou naši kamarádi.

CSS rozlišení vs. hardwarové rozlišení

Autorům webů totiž prohlížeče hardwarové rozlišení přepočítají do takzvaného CSS rozlišení.

V případě iPhone5S to bude polovina, tedy 320×568. To už je docela normální „mobilní“ rozlišení, že?

Retina displej na iPhone má tedy poměr mezi CSS a hardwarovým rozlišením 1:2. Ale pozor, když v CSS vykreslíme objekt 1×1 pixel, bude zabírat 4 hardwarové pixely. Půjde o mřížku o velikosti 2×2 pixely, odtud ten poměr 1:2.

Když tedy do stránky vložíme obrázek…

<img src="fotka.jpg"
    width="100" height="100"
    alt="Fotka z dovolené">

…vykreslí se na Retina displeji v ploše 200×200 hardwarových pixelů.

A tady vznikají problémy. Prohlížeč totiž nebude mít fotografii v dostatečné kvalitě, protože vykresluje 100×100 velký obrázek na 200×200 mřížce. Na iPhone s Retina displejem tedy naše úžasná fotografie z dovolené prostě nebude tak krásně ostrá. Kurnik šopa!

Zjednodušeně řečeno je tedy lepší fotografii rovnou vyrobit ve velikosti 200×200 pixelů. Do stránky ji ale vložíte stejným HTML kódem. Prohlížeč ji zmenší na 100×100 CSS pixelů, na běžných displejích nic nepoznáte a na Retina displeji to bude vypadat hezky.

Jenže tak jednoduché to není, a tak raději ještě chvilku čtěte.

Nejdříve ale ještě o tom, kde všude s CSS pixely pracují webaři. Stručná odpověď je — všude.

Autoři stránek pracují jen s CSS pixely

Raději doslovně připomenu, že v HTML, CSS i Javascriptu vždy pracujeme s CSS pixely. K hardwarovým zatím rozumný přístup nemáme.

Takže když napíšu media query…

@media screen and (max-width: 600px) { … }

…cílím s její pomocí na rozlišení obrazovky nebo velikosti okna, které mají méně než 600 CSS pixelů. A cílím tedy i na ten proklatý iPhone5S.

2×? 1.5×?! 1.325×!!! 2.37×!!! 3×!!!! 4×!!!!

Ještě mi rozumíte? Výborně, trochu to zkomplikujeme.

device-pixel-ratio

Poměru mezi hardwarovým a CSS rozlišením se říká device-pixel-ratio.Mimochodem, pomocí media query je možné zacílit zařízení s displeji v určitém poměru i v CSS:

@media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) {  …  } 

Jenže tady se děje další častá chyba webařů. Jejich responzivní weby počítají jen s poměrem 1:2, (technicky řečeno device-pixel-ratio: 2).

Už dříve existovaly zařízení s poměry 1.5×, 1.325×, 2.37× a dalšími. A ne vždy na nich obrázek ve 2násobném rozlišení vypadá uspokojivě, zejména pokud jde o ikonku.

Poměrně běžné jsou také 3× displeje. Ostatně i v době psaní článku zveřejněný iPhone6+ bude z téhle kategorie. No a někteří z nás pak budou na svém zařízení používat 4násobný poměr mezi hardwarovými a CSS pixely. Tam už ani obrázek ve dvojnásobném rozlišení zřejmě stačit nebude.

Vezměme si pár oblíbených zařízení. Jaký je tam poměr mezi HW (hardwarovým) a CSS rozlišením?

Poměr mezi HW a CSS rozlišením u vybraných zařízení
Zařízení HW rozlišení CSS rozlišení device-pixel-ratio
iPad Mini 768×1024 768×1024 1
iPhone 4 640×960 320×480 2
Google Nexus 7 800×1280 604×966 1.325
HTC One 1080×1920 360×640 3
Xiaomi Mi3 1080×1920 270×480 4


Další zařízení najdete na canbike.org/CSSpixels

Ježíši, to je průšvih, co? Budeme vytvářet obrázky pro každé device-pixel-ratio?

Ale nějak se to řešit dá, nebojte. Jen člověk musí opustit staré zvyky.

Řešení pro svět s nekonečným množstvím device-pixel-ratio

Pokud vaše fotky nebo ikony nevypadají na některém device-pixel-ratio dobře, máte dvě možnosti:

  1. připravovat pro každý poměr speciální bitmapový obrázek, což je ekvivalentní frázi „brzy se zbláznit“, nebo…
  2. pro ikony použít vektory a chytřeji pracovat s fotografiemi.

Obrázky v rozhraní – ikony, logotypy, dekorace

Tady je rozhodně jedinou možnou cestou použít vektorovou grafiku. Ikonfonty považuji za dobré, ale spíše dočasné řešení. Do budoucna zajímavější možnosti nabízí SVG. Obě varianty jsou dnes ale dobré. Pro každý projekt se hodí něco jiného, posuzujte všechny aspekty.

Pro dekorace v rozhraní (vlastní stíny, vlastní vzhled tlačítek nebo rámečků…) je určitě nejvýhodnější využít možností CSS3. Pokud jeho možnosti nestačí, zkuste SVG.

Obsahové obrázky – fotografie

Fotky samozřejmě můžete připravit v ohromném rozlišení – klidně více než 4násobném – a v HTML kódu stránky zmenšit. Bude to vypadat všude hezky, ale nárust datového objemu stránky bude tak šílený, že vás brzy jistojistě uživatelé přijdou ubít svými smartphony. Připomínám, že fotka připravená pro Retina displej (2×) neobsahuje 2×, ale 4× více pixelů, takže její datový objem naroste klidně čtyřnásobně.

Osobně preferuji kombinaci responzivních obrázků s metodou chytré komprese pomocí stlačených (Compressive) obrázků. Více o ní třeba příště. Univerzální řešení však neexistuje a u každého projektu je potřeba vyzkoušet si různé varianty a hledat rovnováhu mezi kvalitou zobrazení na různých zařízeních a datovým objemem.

Komentáře

Subscribe
Upozornit na
guest
6 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Robin Pokorný

Hezky sepsáno!

Jak říkám: <picture> a <img srcset="…" /> FTW! Bez nich je (a ještě více bude) rastrová grafika na webu peklo.

A to se ještě, Martine nezmiňješ, že např. iPhone 6 Plus vytvoří obraz pro 3x, ale pak jej zmenší na cca. 87%. Nebo jak to celé ovlivňuje zoomování.

Pro zájemce o hlubší pochopení doporučuji článek od Petera-Paula Kocha A tale of two viewportsprvní a druhá část.

Pavel Lang

Ještě může být zajímavý jiný přístup – progresivní obrázkové formáty (http://www.html5rocks.com/en/mobile/high-dpi/#toc-prog)

Jinak kde to jde, tak vektory

Jakub Vrána

Měl jsem za to, že se Retina displeje vyznačují tím, že mají lepší rozlišení, než je lidské oko schopné rozeznat. Z tohoto pohledu by tedy už rozlišení nemělo být potřeba zvyšovat. Zdá se ale, že to tak docela není a byly to jen marketingové řeči.

Je opravdu poznat, když na 4x displeji zobrazím @4 obrázek místo @2 obrázku?

Branislav Blesák

Nejde o absolútne rozlíšenie, ale hustotu bodov, konkrétne 300+ PPI. Aby bola zachovaná, pri zväčšení uhlopriečky sa prirodzene musí zväčšiť aj rozlíšenie.

meky

těch 300 ppi se uvažuje za retina rozlišení u A4 papíru, na který se standardně člověk dívá z (plácnu) 45 cm. U menšího zařízení (mobil), na které se člověk dívá z větší blízky, je potřeba retina rozlišení přepočíst přes úhel, jaký svírají dva sousední pixely u toho A4 listu při oné vzdálenosti.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.