Velikost PNG souboru v řadě případů neodpovídá tomu, co obrázek zobrazuje. Jednoduché logo o několika barvách zabírá stovky kilobajtů, ikona v patičce webu víc než fotografie v článku. Za nafouknutým souborem přitom málokdy stojí samotný formát. Většinou jde o nastavení při exportu, které nikdo nezkontroloval. Projděte si sedm nejčastějších chyb, které PNG soubory zvětšují, a zjistěte, jak je opravit, aniž by obrázek ztratil na ostrosti.
Proč velikost PNG snadno naroste
PNG ukládá obrázek bezztrátově. Každý pixel zůstane přesně takový, jaký byl, a soubor se zmenšuje jen tím, že algoritmus najde opakující se vzory. Čím víc pixelů, barev a nepravidelností tedy obrázek obsahuje, tím hůř se komprimuje. Většina chyb uvedených níže zbytečně přidává právě jednu z těchto tří věcí.
Jak poznat, že je PNG zbytečně velké
Pevná hranice neexistuje, ale orientačně se dá říct, že logo či ikona pro web se obvykle vejdou do 20 kB, ilustrace a schémata do 100 až 200 kB. Pokud jednoduchá grafika zabírá stovky kilobajtů, je téměř jisté, že v ní zůstala některá z chyb popsaných níže.
Podezřelý je i velký rozdíl mezi podobnými soubory. Dvě ikony stejné velikosti, z nichž jedna má desetkrát víc dat, prozrazují rozdílné nastavení exportu.
7 největších chyb, které zvětšují PNG
1. Export ve 300 DPI pro web
Údaj DPI sám o sobě velikost souboru nemění, je to jen informace pro tiskárnu. Problém nastává, když grafik pracuje v tiskové šabloně. Plakát formátu A4 ve 300 DPI má na šířku 2480 pixelů a při exportu si tento rozměr ponechá.
Pro web proto vždy exportujte podle pixelů a ne podle centimetrů a DPI. Rozhoduje šířka, ve které se obrázek na stránce skutečně zobrazí. Pokud stejnou grafiku potřebujete i pro tisk, uložte si dvě samostatné verze.
2. Rozměry větší, než se zobrazují
Obrázek široký 2000 pixelů, který se na webu zobrazí v šířce 500 pixelů, obsahuje šestnáctkrát víc pixelů, než je potřeba. Prohlížeč ho přesto stáhne celý. Exportujte v zobrazované šířce, pro displeje s vysokým rozlišením nejvýše v dvojnásobku.
3. Plná barevná paleta u jednoduché grafiky
PNG umí uložit miliony barev, ovšem logo, ikona či schéma jich obvykle potřebují jen několik desítek. Varianta s indexovanou paletou do 256 barev, označovaná jako PNG-8, bývá u takové grafiky několikanásobně menší.
Rozdíl na první pohled nepoznáte. Opatrní buďte jen u plynulých přechodů a stínů, kde by příliš malá paleta vytvořila viditelné pruhy. V takovém případě pomůže ponechat 128 až 256 barev a mírný rozptyl pixelů, který přechody vyhladí.
4. Průhlednost, kterou nikdo nepotřebuje
Alfa kanál přidává ke každému pixelu čtvrtou hodnotu, informaci o průhlednosti. U obrázků s plným pozadím je zbytečný a soubor zvětšuje. Pokud obrázek leží na bílém či jiném jednolitém podkladu, uložte ho bez průhlednosti.
Některé editory přitom alfa kanál přidávají automaticky, i když je celý obrázek neprůhledný. Před exportem proto zkontrolujte, jaký barevný režim máte nastavený.
5. Skrytá metadata a zbytky z editoru
PNG se skládá z bloků a kromě samotného obrazu do nich programy ukládají i další data. Patří sem barevné profily, údaje o programu, textové poznámky a u některých editorů dokonce informace o vrstvách pro pozdější úpravy. Na webu nic z toho nepotřebujete.
Volba „uložit pro web“, případně následná optimalizace, tato data odstraní. Úspora se pak pohybuje od několika kilobajtů po desítky procent velikosti souboru. Barevný profil má smysl ponechat jen tam, kde záleží na přesném odstínu, třeba u grafiky ve firemních barvách. U ikon a schémat ho klidně odstraňte.
6. Fotografie uložená jako PNG
Bezztrátová komprese si s fotografiemi neporadí. Každý snímek obsahuje šum a jemné přechody, ve kterých algoritmus nenajde opakující se vzory. Fotografie v PNG proto bývá i desetkrát větší než stejný záběr v JPEG, rozdíl v kvalitě ale běžný divák ani nepozná.
PNG si nechte pro grafiku s ostrými hranami, text a průhlednost. Pro fotky volte JPEG či WebP.
7. Export bez dodatečné optimalizace
Grafické programy ukládají PNG rychle, nikoli úsporně. Nezkoušejí různé filtry ani nejvyšší úroveň komprese, protože by export trval déle. Dodatečná optimalizace přitom soubor zmenší bez jakékoli změny obrazu.
Optimalizační nástroje vyzkouší více kombinací filtrů a nastavení a vyberou tu, která dává nejmenší výsledek. U souborů z běžných editorů se úspora často pohybuje v řádu desítek procent.
Pro rychlé zpracování poslouží online PNG komprese zdarma, která soubor zmenší přímo v prohlížeči bez instalace programu. Podobný postup pro různé formáty umožňuje třeba online optimalizátor obrázků OptiBot.
V jakém pořadí chyby opravovat
Začněte rozměry, protože ty mají na velikost největší vliv. Snížení šířky na polovinu zmenší počet pixelů na čtvrtinu. Potom rozhodněte o formátu a u grafiky, která v PNG zůstane, odstraňte nepotřebnou průhlednost a zmenšete paletu.
Optimalizaci a odstranění metadat nechte na konec. Pracuje už s finální podobou obrázku a dokáže z něj vytěžit poslední procenta úspory.
Menší soubory bez kompromisů v kvalitě
Velikost PNG souboru nafukují hlavně zbytečné pixely, nadbytečné barvy a data, která na webu nikdo nevidí. Většinu chyb odstraníte už při exportu a zbytek dořeší dodatečná optimalizace.
Projděte obrázky na svém webu, začněte těmi největšími a porovnejte velikost před úpravou a po ní. U log, ikon a schémat bývá úspora překvapivě velká. Nastavte si zároveň pravidla pro nové obrázky, aby se stejné chyby při dalším exportu neopakovaly.
Nejnovější komentáře