Pixel (obrazový bod)

Příklady z praxe

1. 01

   Canvas ostrý na Retina displeji

   Plátno vykreslené v CSS rozměrech vypadá na displeji s devicePixelRatio 2 rozmazaně, protože se roztáhne na dvojnásobek fyzických pixelů. Řešením je nastavit atributy width a height na násobek DPR a poté zmenšit plátno CSS stylem. Kreslicí kontext se přeškáluje, takže souřadnice v kódu zůstanou v CSS pixelech.

   const dpr = window.devicePixelRatio || 1;
   const cssW = 800, cssH = 400;
   canvas.width = cssW * dpr;
   canvas.height = cssH * dpr;
   canvas.style.width = cssW + 'px';
   canvas.style.height = cssH + 'px';
   const ctx = canvas.getContext('2d');
   ctx.scale(dpr, dpr);

2. 02

   Odhad paměti pro obrazový buffer

   Nekomprimovaný snímek ve Full HD s 8 bity na kanál a alfa kanálem zabere 1920 × 1080 × 4 bajty, tedy zhruba 8,3 MB. Při 4K rozlišení je to už asi 33 MB na jeden snímek, což vysvětluje, proč se u dvojitého bufferování a HDR formátů rychle narazí na limity VRAM. Stejný výpočet používá i backend při rozhodování, jestli obrázek zpracovat proudově.

   width = 3840
   height = 2160
   bytes_per_pixel = 4  # RGBA8
   print(width * height * bytes_per_pixel / 1024**2, "MB")

Časté omyly

MýtusVíc megapixelů znamená lepší fotku.

Ve skutečnostiKvalita snímku závisí především na velikosti snímače, optice, dynamickém rozsahu a zpracování signálu. Vysoký počet pixelů na malém snímači znamená menší plochu na jeden pixel, tedy horší poměr signálu k šumu při slabém světle.

MýtusJeden CSS pixel je jeden bod na obrazovce.

Ve skutečnostiCSS pixel je referenční jednotka. Na displejích s vysokou hustotou odpovídá dvěma, třem i více fyzickým pixelům podle devicePixelRatio, a proto se rastrová grafika musí dodávat ve vyšším rozlišení.

MýtusTracking pixel je neškodný obrázek, takže nepotřebuje souhlas.

Ve skutečnostiTracking pixel typicky přenáší IP adresu, identifikátor a kontext návštěvy třetí straně a často pracuje s uloženými identifikátory. V EU proto zpravidla vyžaduje souhlas stejně jako marketingové cookies.

Časté dotazy

Jak převést pixely na centimetry nebo milimetry?

Převod pixelů na fyzickou délku vyžaduje znát hustotu zobrazení nebo tisku. Při 96 PPI odpovídá 96 pixelů jednomu palci, tedy 2,54 cm; jeden pixel tak měří asi 0,26 mm. Pro tisk se místo toho počítá s hodnotou DPI zvolenou v exportu: obrázek 3000 pixelů na šířku vytištěný při 300 DPI má šířku 10 palců, při 150 DPI dvojnásobek. Samotný soubor tedy fyzickou velikost neurčuje, tu určuje až zvolená hustota při zobrazení nebo tisku.

Proč se pixely při zvětšení obrázku rozmažou?

Rastrový obrázek obsahuje pevný počet vzorků. Při zvětšení je nutné dopočítat mezilehlé hodnoty interpolací, například bilineárně nebo bikubicky, což vede k rozmazání, protože chybějící detail nikde uložený není. Zvětšení bez interpolace naopak vytvoří viditelné čtverce. Modely pro superrozlišení dokážou detail dogenerovat, ale jde o odhad podle naučených vzorů, nikoli o obnovení původní informace. Proto se pro loga, ikony a text doporučuje vektorový formát, který se přepočítává při každém vykreslení.

Kdy dává smysl v CSS použít px místo rem?

Jednotka px se hodí tam, kde má rozměr zůstat konstantní bez ohledu na uživatelské nastavení velikosti písma: tenké oddělovací linky, okraje, poloměry zaoblení nebo přesné pozicování dekorativních prvků. Pro velikost písma, odsazení a výšku řádku je vhodnější rem, protože respektuje volbu uživatele v prohlížeči a zlepšuje přístupnost. Kombinace obou přístupů je běžná praxe: typografie v rem, jemné detaily v px.

Jaký je rozdíl mezi pixelem a subpixelem?

Pixel je logická jednotka obrazu s jednou barevnou hodnotou, subpixel je fyzická součást panelu, obvykle samostatná červená, zelená nebo modrá buňka. Jeden pixel na displeji tvoří několik subpixelů umístěných vedle sebe. Subpixelové vyhlazování písma adresuje tyto buňky odděleně a zvyšuje tím zdánlivou horizontální ostrost textu. Výsledek ale závisí na uspořádání subpixelů v konkrétním panelu, takže na otočené obrazovce nebo u OLED s netradičním rozložením může vzniknout barevný lem.

Zdroje

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

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.
• 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.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.
• Ambient occlusionAmbient occlusion je technika stínování, která u každého bodu povrchu odhaduje, jak velká část okolní polokoule oblohy je zastíněna blízkou geometrií, a podle toho ztlumí rozptýlené okolní světlo. Výsledkem jsou tmavší kouty, spáry, záhyby a místa dotyku objektů, díky nimž scéna působí prostorově a objekty vypadají skutečně položené na podložce.