PNG 8 vs PNG 24. Jak se liší počet barev, průhlednost a velikost souboru a kdy zvolit kterou variantu
Na výběr mezi PNG 8 vs PNG 24 máte vždy, když ukládáte grafiku pro web. Většina lidí ji automaticky volí PNG 24, které považuje za „kvalitnější“. Tím ale často zbytečně zvětší soubor několikanásobně, aniž by na obrazovce byl vidět rozdíl. Obě varianty patří k témuž formátu a liší se hlavně tím, kolik barev a jakou průhlednost umějí uložit. Vysvětlleme si tedy, co čísla v názvu znamenají, jak obě varianty pracují s průhledností, jaký je rozdíl ve velikosti souboru a podle čeho se rozhodnout.
Co znamenají čísla v názvu
Označení PNG-8 a PNG-24 nejsou oficiálními názvy ze specifikace formátu. Jde o zkratky z grafických programů, které popisují, kolik bitů připadá na jeden pixel. Specifikace sama mluví o barevných režimech, shrnutých v tomto přehledu obrazových formátů pro web od Mozilly.
PNG-8 používá režim s paletou. Obrázek obsahuje tabulku nejvýše 256 barev a každý pixel jen odkazuje na jednu z nich. Na jeden pixel tak stačí 8 bitů.
PNG-24 ukládá u každého pixelu plnou barvu, tedy 8 bitů pro červenou, zelenou a modrou složku. Dohromady to dává 24 bitů a přes 16 milionů možných odstínů. Pokud se k tomu přidá ještě kanál průhlednosti, mluví se o PNG-32.
Počet barev v praxi
Číslo 256 se někomu může zdát málo, pro velkou část webové grafiky ale bohatě stačí. Logo, ikona, schéma či jednoduchá ilustrace obvykle obsahují jen několik desítek barev. Takový obrázek v PNG-8 vypadá stejně jako v PNG-24.
Problém je jen u obrázků s plynulými přechody, stíny a fotografickými prvky. Pokud se miliony odstínů musí vejít do 256 barev, objeví se v přechodech viditelné pruhy a na plochách zrnění. Grafické programy to zmírňují rozptylováním, kdy se barvy střídají v jemném vzoru, aby oko vnímalo mezitóny. Výsledek přesto bývá patrný na první pohled a soubor kvůli vzoru roste.
Ohledně průhlednosti vzniká nejvíc omylů
Rozšířený názor říká, že PNG-8 umí jen jednoduchou průhlednost, při níž je pixel buď plně viditelný, nebo zcela průhledný. Tato představa pochází z některých grafických programů, které PNG-8 skutečně ukládají jen takto. Specifikace PNG ale umožňuje přiřadit každé barvě v paletě vlastní míru průhlednosti.
To znamená, že i PNG-8 dokáže uložit logo s měkkými okraji či jemným stínem, pokud ho vytvoří nástroj, který tuto možnost využívá. Některé kompresní nástroje proto převádějí PNG-24 s průhledností na paletovou variantu s plynulou průhledností a výrazně tím zmenší soubor.
Pokud váš program PNG-8 ukládá jen s jednoduchou průhledností, projeví se to zubatými okraji. Logo pak na barevném pozadí působí neupraveně, typicky se světlým lemem. V takovém případě zvolte PNG-24 s průhledností či nástroj, který zvládne paletu s plynulou průhledností.
Rozdíl ve velikosti souboru
Velikost je hlavním důvodem, proč se PNG-8 vůbec používá. Paletový obrázek potřebuje na pixel třetinu dat oproti plnobarevnému a bezeztrátová komprese s ním navíc pracuje snáz. U log, ikon a diagramů proto bývá PNG-8 výrazně menší, často i několikanásobně.
Nejvíc je rozdíl vidět u velkých grafik, například u infografik a schémat na celou šířku stránky. U drobné ikony o pár kilobajtech je úspora v absolutních číslech malá, na stránce s desítkami ikon se ale sčítá.
U fotografií a složitých ilustrací je situace jiná. Převod do palety tu zhorší vzhled a úspora nebývá tak velká, aby to vyvážila. Pro fotografie navíc PNG není vhodné v žádné variantě, lepší volbou je JPG či WebP.
Podle čeho se rozhodnout
Rozhodování vám usnadní jednoduchá otázka, kolik barev obrázek skutečně obsahuje. Loga, ikony, piktogramy, grafy a schémata s plochými barvami patří do PNG-8. Ilustrace s přechody, snímky obrazovky s fotografiemi a grafika s výraznými stíny patří do PNG-24.
U průhlednosti rozhoduje nástroj. Pokud zvládne paletu s plynulou průhledností, vyzkoušejte nejdřív PNG-8 a výsledek porovnejte s originálem. Pokud vidíte zubaté okraje či pruhy, zůstaňte u PNG-24.
Udělejte také přímé srovnání. Uložte obrázek v obou variantách, porovnejte velikost souborů a oba obrázky si prohlédněte při stoprocentním zvětšení. Pokud rozdíl nevidíte, zvolte menší soubor.
Jak zjistit, kterou variantu máte
Dilema PNG 8 vs PNG 24 se týká i obrázků, které už na webu máte. Variantu zjistíte bez speciálních programů. Ve Windows klikněte na soubor pravým tlačítkem, otevřete Vlastnosti a na kartě Podrobnosti najdete údaj o bitové hloubce. Hodnota 8 znamená paletu, 24 plné barvy a 32 plné barvy s průhledností.
Pokud zjistíte, že jednoduchá loga a ikony na webu mají hloubku 24 či 32 bitů, máte před sebou snadnou úsporu. Převod do palety u nich obvykle ušetří velkou část velikosti a návštěvníci rozdíl nepoznají.
Komprese je další krok
Obě varianty se dají dál zmenšit bezeztrátovou optimalizací, která odstraní nepotřebná metadata a zvolí účinnější nastavení komprese. Hotové soubory proto před nahráním na web ještě projděte kompresorem, například pomocí služby optimalizace PNG obrázků, která běží přímo v prohlížeči.
Jak do kompresního postupu zapadají i další formáty a jak připravit obrázky pro rychlý web, popisuje článek věnovaný tématu komprimace obrázků.
Menší soubor bez viditelné ztráty
Rozdíl mezi PNG-8 a PNG-24 je hlavně v počtu barev a ve způsobu uložení průhlednosti. Pro jednoduchou grafiku s plochými barvami stačí PNG-8 a ušetří velkou část dat, pro přechody a stíny je lepší PNG-24.
Při příští přípravě grafiky proto uložte každý obrázek v obou variantách a vyberte tu menší, u které nevidíte rozdíl. Logům a ikonám tak často uberete většinu velikosti, a na výsledné kvalitě se to vůbec nemusí projevit.
