Design & Grafika

PNG

Bezztrátový formát s podporou průhlednosti – vhodný pro loga a grafiku s průhledným pozadím

(Portable Network Graphics)

Co je PNG

PNG je bezztrátový obrázkový formát s podporou průhlednosti: uloží obraz přesně tak, jak vypadal, a navíc si u každého bodu pamatuje, jak moc má být vidět. Právě ta druhá vlastnost, alfa kanál, je hlavní důvod, proč PNG v podkladech pořád máte.

Průhlednost, kvůli které to celé je

Logo, piktogram, razítko s akcí přes fotku. Cokoliv, co má sednout na libovolné pozadí, potřebuje průhledné okolí a měkký přechod na okrajích. PNG zvládne i poloprůhledné body, takže hrany nejsou zubaté a nemusíte dopředu řešit, na jaké barvě prvek nakonec skončí. K tomu věrnost: text ve výřezu ani linky v tabulce se nerozpadnou, protože se nic nezahazuje.

Kdy je PNG zbytečná zátěž

Fotografie uložená v PNG. Na tenhle prohřešek narážím na webech pravidelně a stojí to slušný kus rychlosti načítání. Fotka má miliony jemných barevných přechodů, bezztrátová komprese je nemá jak zjednodušit, a soubor tak naroste na mnohonásobek toho, co by vážil stejný záběr v JPG. Sáhněte po PNG tam, kde se vyplatí:

  • logo nebo piktogram, který má fungovat na jakémkoliv pozadí;
  • screenshot administrace či grafu, kde musí zůstat čitelný text;
  • grafika s plnými barvami a ostrými hranami, u které by ztrátová komprese udělala kolem kontur špínu;
  • podklad do dalšího zpracování, protože bezztrátový soubor snese opakované úpravy a přeuložení bez postupné degradace.

Pro ikony a jednoduché tvary je ale ještě lepší volbou vektor, tedy SVG. Ten zůstane ostrý v jakékoliv velikosti a váží nesrovnatelně míň.

Když od klienta dostanu balík podkladů, bývají v něm varianty loga v PNG a produktové fotky taky v PNG, protože to tak vypadlo z exportu. Loga nechávám být. Fotky převádím dřív, než se dostanou na web nebo do reklamy: nejdřív rozměr na to, co se má opravdu zobrazit, potom jiný formát. Hodina práce, a stránka se přestane načítat jako přes vytáčené připojení.

Časté otázky

Kdy použít PNG a kdy JPG?

PNG na grafiku s ostrými hranami, plnými barvami a průhledným pozadím. JPG na fotografie, kde potřebujete srazit velikost a jemná ztráta detailu nevadí. Rozhoduje typ obrázku, ne to, který formát je obecně lepší.

Proč je moje PNG tak velké?

Skoro jistě je v něm fotografie nebo obrázek s plynulými přechody barev. Bezztrátová komprese u takového motivu nemá co ušetřit. Řešením je převod do JPG, případně do WebP, pokud potřebujete zachovat i průhlednost.

Zhorší se PNG, když ho několikrát uložím?

Ne. Bezztrátový formát ukládá pokaždé stejná data, takže opakované otevření a uložení kvalitu nesnižuje. V tom se liší od JPG, kde se ztráta s každým kolem nabaluje.