Pixel je mrtev, ať žije referenční pixel!
Je konec dohadům, zda navrhovat web pro šířku 1024 nebo 1200 pixelů (px). Proč? Pixel jako jednotka ztrácí svůj dřívější smysl a získává nový. Notebook, na kterém píšu tenhle text, má rozlišení 114 pixelů na palec (ppi), smartphone, na kterém ho možná čtete, už má ale rozlišení dvakrát jemnější. Až se vysoká rozlišení objeví na obrazovkách s většími úhlopříčkami, budou mít displeje kapacitu přes 4 Mpx. A to bude brzy.
Pixel v DTP
Vysoké rozlišení a kapacita displejů vykážou u webdesignu jednotce hardwarového obrazového bodu podobné místo, jaké má v DTP. U výstupů v DTP se obvykle předpokládá, že se budou pohybovat od 600 ppi výše, ale běžně se pracuje s dvojnásobkem nebo čtyřnásobkem. Obrázek o kapacitě 16 Mpx z dnes běžného fotoaparátu se při rozlišení 2540 ppi může smrsknout na 52 × 35 milimetrů. Zatímco pixel na obrazovce je široký asi 0,21 mm, černý bod na filmu z osvitky je třeba jen 0,01 mm velký. To je tak malý bod, že ho z běžné vzdálenosti okem nerozlišíte.
Běžně se tedy v DTP setkáte s praxí, že se vstupní raster obrazových dat na výstupu přerozděluje (použijete obrázek s rozlišením třeba jen 300 ppi) a rozlišení 2540 ppi (nebo častěji kolem 1200 ppi) má jen vektorová grafika, především písmo. Využívá se při tom toho, že polotónová grafika je stejně tištěna autotypickým rasterem kolem 85 až 185 bodů na palec (dpi), takže u fotografií na extrémně vysokém rozlišení nezáleží (jeden autotypický bod v tisku je tvořen více než jedním pixelem na filmu z osvitky).
Pixel v poměru
Co to pro nás znamená? Už dnes, když připravujeme web pro mobilní zařízení s jemným rozlišením, předpokládáme, že nebude zobrazován 1 : 1, ale v nějakém poměru. Obvykle se už pohybujeme ve zvětšení 1,5 : 1 až 2 : 1.
Máme tedy několik pixelů:
- pixel zdrojové rasterové grafiky (datový),
- pixel zobrazovacího zařízení (hardwarový),
- pixel datový zobrazený v poměru k hardwarovému (referenční).
Aby toho nebylo málo, s CSS2 nám W3C nadělilo pixel jako absolutní jednotku o rozměru 96 ppi (tedy 1 px = 1/96 palce). Pixel v CSS je tedy druhem pixelu referenčního s absolutně daným rozměrem kolem 0,26 mm.
Na zařízeních s operačním systémem Android se navíc můžeme setkat s jednotkou density-independent pixel (dip nebo dp), který normalizuje pixel, jako by zařízení mělo rozlišení 160 ppi. Takto definovaný pixel je opět pixelem referenčním o velikosti kolem 0,16 mm.
Na velikost referenčního pixelu se nemůžeme spolehnout. A to dokonce ani v případě, že by prohlížeč respektoval pixel jako absolutní jednotku podle W3C nebo jako dip Androidu. A víte co? Není to vlastně ani žádoucí. Je fajn, že si uživatel může webovou stránku v prohlížeči volně zvětšovat a zmenšovat.
Budoucnost patří vektoru
Elegantním řešením by bylo opustit rasterovou grafiku a přejít k vektorům. Nové prohlížeče podporují vektorovou grafiku přímo ve formátu SVG. Než ale SVG převezme své otěže, musí klesnout rozšíření Internet Exploreru ve verzích starších než 9, a to ještě pár let potrvá.
Velkou úlohu při odstraňování rasterové grafiky z webu sehrálo CSS3, které zavádí vymoženosti, jako jsou přechody, kulaté rohy, transformace, průhlednost barvy, stíny, odrazy… S CSS3 se proměnil výrazový sloh vizuálních designérů, kteří opouštějí návrhy vzhledu webů kdysi přehlcených rasterovou grafikou. S pomocí vlastností CSS3 můžeme přečkat těch několik let, než se budeme moci spolehnout na podporu SVG.
Web se sbližuje s PDF
Posledním místem, kde budeme stále spoléhat na rasterovou grafiku, zůstávají fotografie. A tady bychom se měli inspirovat praxí v DTP, kde se důsledně pracuje s rozměry v absolutních jednotkách, tolik nepopulárních u webdesignerů.
Grafický designer v DTP definuje rozměry v milimetrech, centimetrech nebo palcích a předpokládá, že budou na papír převedeny v poměru 1 : 1. U výstupů v PDF určených pro zobrazování na počítačích grafici automaticky předpokládají, že si je budeme zvětšovat a zmenšovat podle potřeby. Tímhle směrem se vydává i webdesign.
Rozměr fotografie nyní uváděný v pixelech už nic neznamená. Nevíte, jestli vašich 960 px (datový pixel) není náhodou u uživatele ve skutečnosti 1920 px (hardwarový pixel). Vzhledem k velikosti hardwarového pixelu ani při dvojnásobném zvětšení nepůsobí fotografie špatně.
Web není fixní médium
Web narozdíl od tisku ale není fixním médiem. Můžeme pro web navrhovat fluidní nebo elastické layouty. Můžeme pracovat s rozměry v intervalu. Absolutní jednotky můžeme kombinovat s násobky velikosti písma, procenty nebo s hodnotou auto. Výsledný vzhled bude vždy záviset na zobrazovacím zařízení a uživatelově volbě.
Kde je v tomhle novém paradigmatu místo pixelu? Zapoměňte na datové (rozlišení fotografie) a hardwarové pixely (rozlišení obrazovky). Přivítejte nový pohled na pixel jakožto refereční jednotku. Nemůžeme se spolehnout na to, že bude mít velikost 1/96 palce podle W3C ani 1/160 palce podle Androidu, protože uživatel si jednoduchým gestem nebo klávesovou zkratkou jeho velikost přizpůsobí svým potřebám. Pokud potřebujete v layoutu pevný bod, obraťte se k absolutním jednotkám a připravte se na jejich zobrazení v poměru. ↩
Pokud chcete vědět více k tomuto tématu, pokračujte čtením článku Scotta Kelluma Pixel Identity Crisis na webu A List Apart.
