„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ů.

Reklama: Vzhůru do lepší práce

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í nekončí. Podívejte se na MacBook Pro s Retina displejem nebo další laptopy.

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

Vezměme iPhone 5S, ten má rozlišení 640×1136 pixelů. Někteří webaři se pořád ještě čertí: „Když si někdo otočí iPhone na šířku, zobrazí se mu web v na malém zařízení web v rozlišení pro tablet. Hrůza!“

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

CSS versus 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ě iPhone 5S to bude polovina, tedy 320×568 pixelů. 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 velký 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 pak 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 to by znamenalo velké obrázky a neúměrnou datovou zátěž. 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ěď zní — všude.

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

Raději doslovně připomenu, když použijete správnou meta značku pro viewport, pak v HTML, CSS i Javascriptu vždy pracujeme s CSS pixely. K těm hardwarovým prostě jako vývojáři přístup nemáme.

Takže když napíšu následující dotaz na médium…

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

…cílím s jeho pomocí na rozlišení obrazovky nebo velikosti okna, které mají méně než 600 CSS pixelů. A cílím tedy i na zmiňovaný iPhone 5S.

Správnou meta značku pro viewport rozebírám v jiném článku. vrdl.cz/prirucka/viewport-meta

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

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

device-pixel-ratio

Poměr mezi hardwarovým a CSS rozlišením udává vlastnost resolution (dříve device-pixel-ratio. Mimochodem, pomocí dotazu na média je možné zacílit zařízení s displeji v určitém poměru i v CSS:

@media only screen and 
  (min-resolution: 2dppx) { … }

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

Existují zařízení s poměry 1,5; 1,325; nebo třeba 2,37. A ne vždy na nich obrázek ve dvojnásobném rozlišení vypadá uspokojivě, zejména pokud jde o ikonku.

Dnes už jsou běžné 3× a 4× displeje. Tam ani obrázek ve dvojnásobném rozlišení stačit vždycky 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

Poměr mezi HW a CSS rozlišením u vybraných zařízení

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?

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 poměrů CSS pixelů k harwarovým

Jsou dva typy obrázků na webech: vektorové a bitmapové.

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í. Zajímavější možnosti nabízí SVG. vrdl.cz/prirucka/svg

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ž čtyřná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 uživatelé jistojistě přijdou ubít svými smartphony. Připomínám, že fotka připravená pro Retina displej neobsahuje 2×, ale 4× více pixelů, takže její datový objem naroste klidně čtyřnásobně.

Pokud je to možné, servírujte obrázky ve více variantách. Máme pro to standardizované parametry srcset a sizes u značky <img>. vrdl.cz/prirucka/srcset-sizes

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Responzivní design.

Píšu ebook o responzivním designu, pomozte mi prosím předobjednáním

11. 1. 2017 na blogu

Ano, je to tak. Už nějadou dobu pracuji na novém ebooku. O procesu tvorby responzivních webů, o svých zkušenostech s ním a taky trochu o principech dnešního webdesignu. Bude rozsáhlejší, barevnější a detailnější než jeho starší sourozenec.

Majitelé „m tečka“ webů pozor: Google bude mobile-first

10. 11. 2016 na blogu

Google už oficiálně představil svůj záměr začít indexovat a řadit primárně z pohledu uživatele mobilních zařízení.

Veřejná školení

Responzivní design

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: 9. března.

23. února Dnešní webová kodéřina
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května 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č

Responzivní
design na školení

Naučte se všechny
responzivní fígle
na kurzu autora.