Online PNG optimalizátor na stránce, který zachová průhlednost i ostré hrany
Logo nebo ikona uložená ve formátu PNG bývá zbytečně těžká, přestože obsahuje jen pár barev a jednoduchou kresbu. Online PNG optimalizátor na stránce takový soubor zmenší, aniž by se dotkl ostrých hran, textu či průhledného pozadí. Vyzkoušet si to jde přímo tímto odkazem. Tento text vysvětluje, čím se zmenšení PNG liší od komprese fotografií, a co přesně se se souborem uvnitř takového nástroje děje.
Co online PNG optimalizátor na stránce dělá
PNG je ze své podstaty bezeztrátový formát, soubor tedy standardně nese naprosto stejná obrazová data jako originál. Skutečná úspora u online optimalizátoru proto nepřichází ze stejného principu jako u fotografií, ale ze dvou jiných kroků: z převodu na indexovanou paletu omezeného počtu barev a z efektivnější bezeztrátové komprese zbylých dat. Typický nástroj tohoto typu zvládá nahrát víc souborů najednou, u každého zvlášť nabídne posuvník pro volbu velikosti palety a výsledek porovná s originálem ještě před stažením, takže se dá u celé sady log či ikon doladit nastavení podle konkrétního obsahu každého souboru. U větší dávky souborů se tak dá poměrně rychle najít vhodná velikost palety pro každý typ grafiky zvlášť, místo aby se na celou sadu použilo jedno univerzální nastavení.
Kvantizace palety jako hlavní zdroj úspory
Kvantizace palety přemapuje barvy obrázku na omezenou tabulku, obvykle až 256 odstínů, místo aby každý pixel nesl svou vlastní plnou barevnou hodnotu. Specifikace PNG s takovou paletou přímo počítá prostřednictvím vyhrazeného bloku dat, podle kterého indexovaná barevnost může mít hloubku 1, 2, 4 či 8 bitů, tedy 2 až 256 odstínů. U log, ikon a screenshotů s omezeným počtem barev je výsledek vizuálně prakticky totožný s originálem, u fotografií nebo jemných barevných přechodů se ale při stejném postupu objeví viditelné pruhování. Volba menší palety, třeba 16 barev místo celých 256, dál zmenší soubor u jednoduché grafiky, ale u obrázku s víc odstíny stejná úspora už jde znát na kvalitě.
Proč zůstává průhlednost zachovaná i po kvantizaci
Alfa kanál, tedy informace o průhlednosti každého pixelu, se dá zapsat i do souboru s indexovanou paletou, nejen do plné barevné hloubky. Formát PNG umožňuje k paletě přiřadit hodnotu průhlednosti pro každou barvu zvlášť, jak vysvětluje tento materiál o bezeztrátových obrazových formátech, podle kterého alfa kanál určuje váhu mezi barvou pixelu a barvou pozadí při vykreslení. Zmenšení palety proto samo o sobě průhlednost nijak nenaruší, pokud nástroj počítá s barvami i s jejich průhledností současně.
DEFLATE komprese a prediktor jako druhá vrstva
Po zmenšení palety následuje samotná bezeztrátová komprese dat metodou DEFLATE, která hledá opakující se sekvence bajtů a nahrazuje je kratšími kódy. Před touto kompresí se navíc každý řádek obrázku upraví takzvanou predikcí, kdy se hodnota pixelu nahradí rozdílem proti odhadu z okolních pixelů. Tento krok samotná data nekomprimuje, ale připraví je do podoby, kterou následná komprese zpracuje účinněji, čímž se z téhož obsahu vytěží ještě o něco menší soubor. Jedna z používaných metod predikce, takzvaný Paethův prediktor, pro každý pixel vybere ze tří sousedních hodnot tu, která se nejvíc blíží společnému odhadu, a právě tahle volba se u obrázků s plochami jedné barvy ukazuje jako obzvlášť účinná.
Kdy má kvantizace palety smysl a kdy ne
Kvantizace funguje nejlépe u obsahu s malým počtem odstínů a ostrými hranami, tedy u log, ikon, diagramů nebo screenshotů uživatelského rozhraní. Právě to je zároveň obsah, který na firemní web nejčastěji dodává grafik, a proto se stejnému tématu detailně věnuje tento článek o přípravě grafických podkladů od designéra pro web, podle kterého komprese přichází na řadu jako poslední krok, po ověření barevného profilu a rozměrů. U fotografických motivů, přechodů barev či textur naopak PNG a jeho kvantizace paletou nedávají smysl, tam patří formáty založené na ztrátové kompresi.
Co se děje s nahranými soubory
Online nástroje tohoto typu obvykle zpracují soubor a po určité době, často po hodině od nahrání, data automaticky odstraní ze serveru. Původní soubor zůstává nedotčený v zařízení uživatele, takže je možné kdykoliv zkusit jinou velikost palety a porovnat výsledek. U firemní grafiky s interní vizuální identitou se vyplatí předem ověřit, jak dlouho a za jakých podmínek si konkrétní nástroj nahraná data ponechává.
Nejčastější chyby v praxi
V praxi se u komprese PNG souborů opakuje několik podobných problémů:
- Ponechání souboru ve fotografickém rozlišení a barevné hloubce i u jednoduchého loga s pár barvami.
- Použití PNG pro fotografie tam, kde by JPEG nebo WebP přinesly výrazně menší soubor při srovnatelné kvalitě.
- Kvantizace palety u obrázku s jemnými barevnými přechody, kde vznikne viditelné pruhování.
- Přehlédnutí zbytečných metadat a barevného profilu, které soubor zvětšují bez jakéhokoli vizuálního přínosu.
Co si z tohoto postupu odnést
Zmenšení PNG souboru stojí na jiném principu než komprese fotografií, protože formát zůstává bezeztrátový a úsporu přináší hlavně omezení počtu barev v paletě spolu s efektivnější kompresí zbylých dat. Volba vhodné velikosti palety podle typu obsahu patří mezi úpravy, které nezasáhnou do vzhledu loga ani ikony, přesto dokážou soubor zmenšit o výraznou část.
Kontrolujete si u firemní grafiky na webu, jestli PNG soubory prošly kvantizací palety, nebo zůstávají v podobě, v jaké je dodal grafik?
