Rozlišení (Resolution)

Příklady z praxe

1. 01

   Produktová fotka pro běžný a jemný displej

   E-shop zobrazuje produktovou fotografii v kartě široké 400 CSS pixelů. Na běžném monitoru prohlížeč stáhne menší soubor, zatímco na jemném displeji může použít variantu 2x. Výsledkem je ostřejší náhled bez toho, aby každý uživatel povinně stahoval největší obrázek.

   <img src="product-800.jpg"
        srcset="product-800.jpg 1x, product-1600.jpg 2x"
        width="400" height="300"
        alt="Detail produktu">

2. 02

   Ostrý canvas na Retina displeji

   Dashboard kreslí graf do prvku canvas o velikosti 300 × 150 CSS pixelů. Bez úpravy interního rozlišení by byl graf na displeji s poměrem 2 rozmazaný. Zvětšení bitmapy podle devicePixelRatio zachová rozvržení stránky a zároveň zlepší ostrost čar i textu.

   const ratio = window.devicePixelRatio || 1;
   const canvas = document.querySelector('canvas');
   const width = 300;
   const height = 150;
   
   canvas.style.width = `${width}px`;
   canvas.style.height = `${height}px`;
   canvas.width = width * ratio;
   canvas.height = height * ratio;
   
   const ctx = canvas.getContext('2d');
   ctx.scale(ratio, ratio);
   ctx.fillText('Ostrý text', 20, 40);

Časté omyly

MýtusVyšší rozlišení vždy znamená lepší obraz.

Ve skutečnostiVyšší rozlišení přidává více pixelů, ale kvalitu ovlivňuje také zdrojový materiál, panel, optika, komprese, kontrast a způsob škálování. Špatně zaostřená nebo silně komprimovaná fotka nebude kvalitní jen proto, že má velké rozměry.

MýtusFull HD je na každém zařízení stejně ostré.

Ve skutečnostiFull HD znamená stejný počet pixelů, ne stejnou hustotu. Ostrost závisí na fyzické velikosti obrazovky a pozorovací vzdálenosti, takže 1920 × 1080 na telefonu a na velkém monitoru nepůsobí stejně.

MýtusDPI u obrázku rozhoduje o tom, jak velký bude na webu.

Ve skutečnostiWebové zobrazení se řídí hlavně rozměry v pixelech, CSS a pravidly prohlížeče. Hodnota DPI v metadatech může být důležitá pro tiskový workflow, ale běžný webový layout podle ní obrázek automaticky neměří.

Časté dotazy

Proč má telefon s menším displejem větší rozlišení než monitor?

Telefon s menším displejem může mít větší rozlišení, protože rozlišení není fyzická úhlopříčka. Počet pixelů a velikost panelu jsou dvě různé vlastnosti. Malý telefon často používá velmi jemnou mřížku, aby text, ikony a fotografie působily ostře z krátké pozorovací vzdálenosti. Velký monitor může mít méně pixelů na palec, protože se obvykle sleduje z větší vzdálenosti.

Kdy zvýšit renderovací rozlišení místo zapnutí anti-aliasingu?

Zvýšení renderovacího rozlišení pomáhá ve chvíli, kdy obraz ztrácí jemné detaily napříč celou scénou, například u textur, vzdálených objektů nebo drobné geometrie. Anti-aliasing je vhodnější, když hlavní problém tvoří zubaté hrany a třpytivé kontury. Rozlišení je výpočetně drahé, protože přidává mnoho pixelů. Praktické nastavení často kombinuje mírné zvýšení interního rozlišení s vhodným vyhlazováním.

Co znamená 2x obrázek ve webovém designu?

Obrázek označený jako 2x obsahuje přibližně dvojnásobný počet pixelů na šířku i výšku oproti velikosti, ve které se má zobrazit v rozhraní. Webová karta široká 300 CSS pixelů tedy může použít bitmapu širokou 600 pixelů. Jemný displej má dost fyzických bodů na vykreslení detailu, takže fotografie nebo ikona nepůsobí rozmazaně.

Proč screenshot z Retina displeje vypadá obrovsky?

Screenshot z jemného displeje může být větší, protože systém často ukládá fyzické pixely, ne CSS nebo logické body rozhraní. Okno široké 1000 logických bodů může mít při poměru 2 výsledný snímek široký 2000 pixelů. Grafický editor potom ukáže skutečný bitmapový rozměr souboru, zatímco původní aplikace zobrazovala stejné okno v logických jednotkách.

Zdroje

1. CSS Values and Units Module Level 4(otevře se v novém okně)W3C
2. CSSOM View Module(otevře se v novém okně)W3C
3. HTML Standard(otevře se v novém okně)WHATWG
4. Window: devicePixelRatio property(otevře se v novém okně)MDN Web Docs

Související pojmy

• Anti-aliasingAnti-aliasing je soubor technik, které omezují zubaté hrany a třepení detailů vznikající při převodu spojitého obrazu na mřížku pixelů. V grafice barvy na hranách obvykle průměruje nebo vzorkuje vícekrát, aby diagonály, text a 3D modely působily plynuleji, i když za cenu výkonu nebo mírné ztráty ostrosti.
• RasterizaceRasterizace je převod geometrie, písma, vektorových tvarů nebo obrazových popisů na mřížku pixelů či vzorků. V grafických kartách tvoří klíčový krok mezi 3D scénou a obrazem na displeji: rozhoduje, které pixely pokrývá trojúhelník, jakou mají hloubku a jaké fragmenty dostanou shadery.
• Snímková frekvenceSnímková frekvence je počet samostatných obrazů, které systém zobrazí nebo zaznamená za jednu sekundu. Udává se obvykle ve FPS a ovlivňuje plynulost videa, hry, animace i snímání kamerou. Důležitý není jen průměr, ale také pravidelnost intervalů mezi snímky v čase.
• TexturaTextura je datový obraz nebo procedurální vzor, který se v počítačové grafice používá k určení vzhledu povrchu objektu. Může nést barvu, průhlednost, drsnost, normály nebo jiné hodnoty, které shader čte při vykreslování. Textury umožňují bohatý detail bez modelování každé nerovnosti geometrií a výrazně ovlivňují paměť i výkon.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.