„Retina“ displeje a CSS pixel

CSS pixel. Referenční pixel. Ať už tomu říkáme jakkoliv, pixel už hold 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 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 bude 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, když použijete meta značku pro viewport, pak 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 čtyřná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

comments powered by Disqus

Podobné články

zařazené v kategorii Responzivní design.

Efektivní ladění responzivních webů

27. 6. 2016 v příručce

Jak si poradit s dnešní škálou prohlížečů a zařízení? A jak s nepřítomností pořádných vývojářských nástrojů na mobilech? Svatý grál neznám, ale pár tipů ze své praxe bych měl.

Tři viewporty na mobilních zařízeních

24. 4. 2016 v příručce

Co je layoutový a co vizuální viewport? Co přesně přesně vyjadřuje device-pixel-ratio a proč nepoužívat screen.width v Javascriptu nebo min-device-width v CSS?


Martin Michálek

Autor: Martin Michálek

Nezávislý frontend designér s šestnáctiletou praxí a nadšením pro moderní webové postupy a technologie. Píše Vzhůru dolů, školí a je k dispozici pro konzultace.

Kurz „Responzivní design“

Přijďte probrat principy, které s nástupem smartphonů a tabletů změnily tvorbu webů. Vezmeme to pořádně do hloubky a vše si vyzkoušíte. Příští termín: 13. října.

Termíny dalších veřejných školení

29. září SVG
6. října Dnešní webová kodéřina
27. října Optimalizace rychlosti načítání
24. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč