Online PNG kompresor pracuje jinak než běžná komprese textových souborů na serveru, protože PNG má bezztrátový algoritmus zabudovaný už uvnitř formátu, a dodatečné zapnutí gzipu či brotli mu proto k výraznější úspoře většinou nepomůže. Předchozí kontrola gzip a brotli komprese se zaměřila na to, jak server komprimuje HTML, CSS nebo JS při přenosu, tenhle článek naopak vysvětluje, co se s daty děje uvnitř samotného PNG souboru ještě předtím, než na řadu vůbec přijde přenosová komprese. Rozdíl mezi oběma přístupy přitom rozhoduje o tom, kdy se PNG vyplatí použít a kdy je na místě sáhnout po jiném formátu.
Proč gzip a brotli u PNG souboru téměř nic neudělají
Gzip i brotli fungují nejlépe tam, kde v datech zůstává hodně opakujících se vzorů, typicky u textových souborů jako HTML, CSS či JavaScript, kde se stejné znaky a struktury opakují znovu a znovu. PNG ale svá vlastní opakování odstranil už při uložení, protože formát sám používá kompresi deflate, tedy stejnou rodinu algoritmů, na které stojí i gzip. Pokus o druhé kolo komprese nad už zkomprimovanými binárními daty proto obvykle ubere jen zlomek procenta navíc, zatímco u nekomprimovaného HTML souboru dokáže gzip zmenšit objem přenosu na desetinu.
Jak funguje bezztrátová komprese uvnitř PNG
Formát PNG před samotnou kompresí ještě každý řádek obrázku projde filtrem, který převede hodnoty pixelů na rozdíly oproti sousedním pixelům, čímž vzniknou dlouhé řady podobných či nulových hodnot. Právě tahle úprava dělá výsledná data mnohem stlačitelnější, než kdyby se komprimovaly syrové barevné hodnoty. Na takto připravená data se pak použije kombinace algoritmu LZ77, který nahrazuje opakující se sekvence odkazem na jejich dřívější výskyt, a Huffmanova kódování, které kratší kód přidělí častěji se vyskytujícím hodnotám. Výsledkem je soubor, ze kterého jde zpětně sestavit originál do posledního bitu.
Proč PNG šetří nejvíc tam, kde je hodně jedné barvy
Účinnost celého procesu závisí na tom, kolik opakujících se vzorů obrázek obsahuje. Screenshot rozhraní s velkými jednobarevnými plochami a ostrými hranami textu se zkomprimuje výrazně víc než fotografie plná jemných barevných přechodů a šumu, protože právě u plynulých přechodů žádná dlouhá řada stejných hodnot nevznikne. Tahle vlastnost je také důvod, proč PNG dlouhodobě patří k ikonám, diagramům a snímkům obrazovky, zatímco běžné fotografie si lépe rozumí se ztrátovou kompresí.
Kdy se PNG hodí a kdy ho nahradit modernějším formátem
PNG zůstává vhodnou volbou tam, kde je potřeba zachovat ostré hrany, průhlednost či přesné barvy bez jakékoliv ztráty, jak shrnuje tento nedávný přehled formátů a optimalizace médií na webu, podle kterého ale pro fotografie a produktové snímky dnes lepší poměr kvality a velikosti nabízí WebP nebo AVIF, zatímco jednoduché ikony a loga se čím dál častěji řeší formátem SVG. Podle stejného zdroje jeden neoptimalizovaný obrázek dosahuje klidně čtyř megabajtů, zatímco jeho AVIF varianta se vejde do padesáti až sto kilobajtů, a i jednoduchá ikona v PNG o velikosti osmdesáti kilobajtů má v SVG ekvivalent kolem dvou kilobajtů.
Kolik dat moderní formáty ušetří oproti PNG a JPEG
Konkrétní čísla z téhož přehledu ukazují, že WebP bývá zhruba o čtvrtinu až třetinu menší než JPEG při srovnatelné kvalitě, AVIF pak ještě o dalších dvacet až třicet procent méně než WebP. Ten navíc zvládá bezztrátovou i ztrátovou variantu a hodí se i tam, kde PNG dosud vyhrávalo díky průhlednosti. Volba mezi PNG a novějším formátem se tak dnes vyplatí posuzovat podle obsahu obrázku, ne podle zvyku použít vždy stejný formát.
PNG optimalizátory a automatizace ve WordPressu
Vedle jednorázového zmenšení souboru online nástrojem existuje i cesta automatizace přímo v redakčním systému, jak ukazuje tento přehled pluginů pro optimalizaci obrázků ve WordPressu, který popisuje řešení jako Smush, ShortPixel či Imsanity, jež obrázek zmenší automaticky hned při nahrání do knihovny médií. Tahle automatizace se hodí tam, kde web denně přibírá desítky nových souborů, zatímco pro jednorázovou přípravu jedné sady obrázků před publikací zůstává rychlejší online nástroj, u kterého se dá výsledek hned porovnat s originálem.
Co online PNG kompresor s nahraným souborem udělá
Nástroj po nahrání souboru najde optimální nastavení filtrování a komprese a výsledek porovná s originálem ještě před stažením, takže je vidět, zda zmenšení nezasáhlo do ostrosti hran či do průhlednosti. Dávkové zpracování víc souborů najednou umožňuje připravit celou sadu ikon nebo screenshotů z jednoho místa, aniž by bylo nutné každý soubor upravovat zvlášť. Volba mezi zachováním plné bezztrátové komprese a agresivnějším nastavením navíc umožňuje najít rovnováhu mezi datovou úsporou a zachováním detailů podle toho, k čemu obrázek na webu slouží.
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í obrázek zůstává nedotčený v zařízení uživatele, takže je možné kdykoliv zkusit jiné nastavení komprese a porovnat výsledek s předchozí verzí.
Nejčastější chyby v praxi
V praxi se u přípravy PNG souborů pro web opakuje několik podobných problémů:
- Spoléhání na gzip nebo brotli u přenosu s očekáváním výrazné úspory, která u už zkomprimovaného PNG nepřijde.
- Použití PNG pro běžnou fotografii místo formátu určeného pro ztrátovou kompresi.
- Ponechání ikon a jednoduché grafiky ve velkém PNG místo přechodu na výrazně menší SVG.
- Ruční komprese jednotlivých souborů na webu, kde by se lépe hodila automatizace přímo v redakčním systému.
Co si z tohoto postupu odnést
Bezztrátová komprese uvnitř PNG odvádí většinu práce už při uložení souboru, takže dodatečná přenosová komprese typu gzip či brotli k tomu přidá jen málo. Volba mezi PNG a modernějšími formáty jako WebP, AVIF či SVG by se přitom měla řídit obsahem obrázku, ne zavedeným zvykem.
Řešíte u obrázků na webu spíš jejich formát a obsah, nebo se spoléháte hlavně na přenosovou kompresi typu gzip a brotli?
Související příspěvky
