velikost souborů png s transparentní vrstvou

Reaguji na Návštěvníka:
„gif nepodporuje jemné přechody barev?“
GIF má omezenou paletu barev, takže v podstatě ano.

Máš zapnutou kompresi?

Návštěvník:
Já když potřebuji snížit datovou velikost obrázku, tak používám online aplikaci http://compresspng.com

Můžeš si tam zvolit míru komprese a real-time vidět, jak to bude vypadat. Ze zkušenosti vím, že u drtivé většiny obrázků je možné velikost srazit až na polovinu, aniž by jsi se všiml změny. Fyzicky se tam změna skutečně udělá, jen to bude natolik nepatrné, že to nebude téměř znát.

„že gif nepodporuje jemné přechody barev“
GIF (správně džif) umí všechny barvy typu RGB, ale můžeš použít v rámci jednoho obrázku jen 256 různých barev. Je to z důvodu lepší bezztrátové komprese (je to celkem věda, tím tě nechci zatěžovat). Spíše si jen pamatuj, že je počet barev omezen.

Potřebuješ vůbec průsvitnost? Pokud má stránka jednobarevné pozadí, průsvitnost není nutná.

GIF (nebo PNG) s indexovanými barvami má 256* barev, přičemž jedna z nich může být průhledná, datová velikost průsvitného a neprůsvitného obrázku je shodná.
Všechny možnosti jsou 2, 4, 8, 16, 32, 64, 128, 256 barev.

PNG s alfakanálem má standardně čtyři osmibitové kanály, takový obrázek je zpravidla větší, než PNG s indexovanými barvami.

Návštěvník:
„Je ještě nějaký formát, který by uměl vytvořit průsvitné pozadí ale s menší velikostí obrázků?“
Je, WebP, ale problém je, že jej podporuje jen Opera a Chrome.

Pokud sem můžeš vložit některou z ikon, tak bych se podíval, co se s tím dá dělat. Třebas tebou vložený obrázek http://i57.tinypic.com/20jguip.png zbyzečně obsahuje cca 2.6 Kb dat barevného profilu. Též obsahuje data pro gama korekci, což způsobí, že obrázek je v IE8 (a starších) o chlup tmavší.

janbarasek:
„GIF (správně džif) umí všechny barvy typu RGB, ale můžeš použít v rámci jednoho obrázku jen 256 různých barev. Je to z důvodu lepší bezztrátové komprese“
Tohle čtu poprvé a dovolím si nesouhlasit. Možná to myslíš dobře, ale je to velmi nešťastně napsáno a začátečníka tyhle nepřesnosti často dokáží dokonale zmást.

Prožeň obrázek přes tenhle online editor: https://pixlr.com/editor/
Odkázaný editor zpravidla při ukládání do PNG děla větší soubory, než jiné programy, ale v tomto případě vyšel vítězně. Vždy záleží na konkrétní předloze (obrázku).
výsledek: http://www.imghosting.cz/images/93rate_11.png 1,7 KB (1 690 bajtů)


Další možnost je použít ztrátové úpravy služby https://kraken.io/web-interface, výsledný obrázek není shodný, ale je podobný, zpravidla to nevadí.
výsledek: http://www.imghosting.cz/images/85rate_12.png 815 bajtů

Návštěvník:
To už raději dát všechny ikony do jednoho obrázku jako sprite.
http://jecas.cz/css-sprite

Hlavní rozdíl mezi transparentností u obrázku GIF a PNG je v tom, že PNG umožňuje i částečnou transparentnost pixelu - tj. procentuální. Gif pixel je vždy buď 100% transparentní, nebo 100% neprůhledný.

Proto okraje obrázků PNG vypadají hladce, okraje přejímají barvu pozadí a tak výsledek působí harmonicky jako jeden celek.

Pokud ovšem limitujeme PNG kompresi 256 nebo ještě menší paletou barev, pak bývá PNG obrázku přidělena paleta stejná jako obrázkům GIF - to znamená že výsledek je také s okousaným okrajem. Tedy alespoň já neznám žádný grafický editor, který by umožňoval uživateli navolit v paletě omezené barvy a k tomu škálu průhlednosti.

Pokud chci png obrázek s minimální velikostí a hladkými okraji, pak je možné použít tento postup:

1. napřed exportovati obraz do formátu gif (bez průhlednosti) s omezenou škálou barev - tady by mohlo stačit 64
2. potom tento obrázek otevřu v editoru a oříznu okraje tak aby přechod byl co nejostřejší ale současně vypadal vyhlazeně
3. exportuji upravený soubor do formátu png

Výsledný soubor nebude nikdy tak malý jako gif, ale bude menší než originální png s plnou škálou barev. Okraje ale budou stát za to.

takto může vypadat obrázek po první editaci:
toto je obrázek vytvořený tímto postupem:

Pixr.com a jiné online editory zmenší, ale hezky to bude vypadat jen na nějakém pozadí, tady například na světle šedém ano:

pro porovnání ještě přidávám náhled ikon, jak vypadají na různě barevném pozadí:



při zvětšení je rozdíl skutečně markantní - a podobně je to s obrázky png / gif - nahoře komprese PNG nebo GIF, dole ikona PNG o velikosti 1,56kB vytvořené metodou výše:

poustevnik:
„Výsledný soubor nebude nikdy tak malý jako gif“
Nesouhlasím. Sice záleží na konkrétní předloze, ale já mám zkušenosti přibližně takové:
rozměry 10×10px a méně, GIF je zpravila menší, než PNG
rozměry 15×15px šance obou jsou asi 50 na padesát
20×20px a více, PNG je zpravidla je zpravila menší, než GIF
40×40px a více, šanci na to, že by se našel GIF, který bude menší, než PNG, vidím jako nulovou

„Pokud chci png obrázek s minimální velikostí a hladkými okraji, pak je možné použít tento postup:“
Postup nevidím jako nejlepší, je sice možné, že to děláš správně, ale něco jsi zamlčel.
Pro začátek jsou dvě možnosti, mám obrázek s alfa kanálem, nebo nebo obrázek, který potřebuje ořezat.
Pokud obrázek potřebuje ořezat, volím editor, který udělá hladký ořez, tedy s alfa kanálem. Doporučuji obrázek uložit a dále pracovat s jeho kopii.
Otevřu nový, dostatečně velký obrázek s barvou pozadí, jaká bude převažovat pod obrázkem, pokud pod obrázkem bude tráva, tak pozadí zvolím zelené, pokud pod obrázkem bude nebe, tak pozadí zvolím nebesky modré... Naneštěstí ne vždy bývá situace tak jednoduchá.
Vložím obrázek s alfa kanálem, uložím, dále pracuji s (už druhou) kopií.
Snížím počet barev, množství výsledných barev, na které se dá jít záleží na předloze a použitých algoritmech, je to trochu šamanství a laborování, bo jak dithering, tak větší množství barev vede k vizuálně lepšímu výsledku a k větší velikosti souboru (a naopak).
Uložím do PNG a GIFu, zjistím, že PNG ne datově menší, mažu GIF.

Mého výše popsaného postupu se není nutné držet zuby nehty, je možné, že v editotu XYZ za situace bflmpsvz budě pozměněný postup výhodnější. Nejpodstatnější myšlenka je v tom, že doporučuji optimalizovat obrázek s průhledností pro podklad, na kterém bude "ležet".

Obrázky - pozadí
Zde popsaným postupem vznikne prostřední z červených koleček na odkázané stránce, na světlém pozadí vypadá dobře, na odlišném pozadí to bude děs, ukázka http://kod.djpw.cz/ofcb-
Protože mám uložený původní obrázek s alfa kanálem, není problém vytvořit průhledný obrázek optimalizovaný pro jiné pozadí.

Bubák:
Samozřejmě mám na mysli, že png s plynulým přechodem průhlednosti nebude nikdy tak malý jako gif. Což snad z mého popisu vyplývá jasně.
Tvými slovy, png s alfakanálem nebude tak malý jako gif, protože režim RGBA (png) bude oproti RGB (gif) obsahovat kanál A, který nese data navíc. Ale to tazatel nemusí vědět, aby si vytvořil představu jak to funguje.

„Postup nevidím jako nejlepší, je sice možné, že to děláš správně, ale něco jsi zamlčel.“
Můj postup je zcela úplný a funkční - polopatě: je návodem, jak efektivně minimalizovat velikost souborů png při zachování alfakanálu. Hodí se zejména tehdy, pokud se obrázek má zobrazovat na různě barevných pozadích - což ti původní tazatel už sám říkal: "změním barvu pozadí ve stylopisu a pak bych musel generovat nové ikony...".

Pokud se to udělá postupem který doporučuji tj. že PNG rgba se vytvoří z GIFu s omezenou škálou barev , nejenže by nemusel generovat nové ikony pro jiné pozadí, můj postup je rychlejší, jednodušší a vůbec se nemusí řešit nějaká optimalizace barvy podkladu. To je dobře, protože všichni víme, jak to s tvorbou webů v praxi je :-) .... navíc 1,56kB je pro tuto referenční ikonu v režimu RGBA dostatečně malá velikost - dokonce o něco menší, než ta Tvá zubatá z pixru, která alfakanál nemá.

Samozřejmě tato moje úprava průhledných png v rgba režimu je vhodná i pro případné další grafické úpravy, což se o gifu, ani png v režimu rgb opravdu říct nedá.
Ale výsledný soubor nebude nikdy tak malý jako gif.

poustevnik:
Tvůj postup mi z tvého popisu nebxl příliš jasný, zkráceně děláš tohle:
0. ztácíš spousttu času uložením do GIFu. Tebou po
1. snížíš barevnou hloubku a zbavíš se alfakanáku, bo alfakanál v předloze je akorát pro kočku
2. uděláš ořez s antialiasingem včetně alfakanálu (tebou vytvořený obrázek obsahuje 16 úrovní průhlednosti z 256 možných)
3. uložíš jako PNG s alfakanálem

Obrázek vytvořený tebou popsaným postupem v pixlr.com, který ty chybně a soustavně pojmenováváš jako pixr.com. Pouze jsem si "vypůjčil" obrázek se sníženým počtem barev na 59.
Obrázek vytvořený tebou popsaným postupem v pixlr.com, z původní předlohy, je tatově objemnější, bo jsem nesnížil počet barev v kanálech RGB.

Bubák:
Tazatel se na pixr tedy pixlr ;) neptal, proto udávám návod, který je jednoduchý, ověřený a dá se použít v jakémkoliv editoru.

Máš pravdu:

1. krok sníží hloubku barev, časově zabere tak 5 sekund (cca 4 kliky) - šetří data a o to tu snad šlo
2. ořez - tazatel chtěl průhledné pozadé
3. export do png s alfakanálem (16 úrovní je dost na to, abys nemusel řešit, jakou barvu bude mít pozadí)

Pokud přeskočíš krok 1 a nesnížíš počet barev, tak bude obrázek datově objemnější, to dá rozum.

Domnívám se, že z naší další diskuse se už nikdo nic nového nedozví - už to musí umět všichni nazpaměť :-) díky za spolupráci.

poustevnik, Bubák:
Mám pocit, že vaše výměna, který postup je lepší je naprosto zbytečná, protože pokud má mít kolečko stín, tak ho prostě má mít a ne mu ho oříznout.

Návštěvník:
„Udělal jsem si ikony png“
V jakém programu jsi je uložil? Použil jsi Photoshop? Pokud ano, vyzkoušej raději Uložení pro web namísto Uložit jako, kde se k obrázku přidávají ještě meta data.

Otázkou pak také je, proč máš tolik duplicitních dat v obrázku? To kolečko se stínem stačí jen jedno a prázdné, k tomu pak už jen ty čísla. Když pominu, že to nevypadá vůbec dobře, jak bys postupoval, kdybys chtěl jinou barvu kolečka? Opět by jsi udělal další řadu koleček? V ideálním případě bych nic takového nevytvářel a raději použil CSS.

Omezenost počtu barev v gifu je mýtus, viz www.root.cz/clanky/pravda-a-myty-o-gifu/#k04 :)