Už ste ich určite videli. Tie obrázky s veľkými tmavými fľakmi a zvláštnymi šmuhami. Prečo ale vznikajú na červenej farbe viac ako na iných podkladoch? A prečo je samotný text tak hnusný?

Jasné. Súbory JPG/JPEG poznáme všetci. Ide o suverénne najpoužívanejší obrázkový formát (či presnejšie kompresnú metódu), s ktorým sa stretávame dnes a denne. Týmto spôsobom sú uložené všetky fotky vo vašom smartfóne a aj väčšina obrázkov, ktoré na internete vidíte.

Vytvorilo ho v 90. rokoch minulého storočia Medzinárodné konzorcium fotografických expertov, z čoho vychádza aj výsledná skratka JPEG (Joint Photographic Experts Group).

Krásne farebný chameleón a jeho JPEG /Foto: Freder/

V skratke ide o veľmi vynaliezavú a prefíkanú metódu na stratovú kompresiu, určenú na fotografie z reálneho sveta. Využíva sa pri nej fakt, že náš vizuálny vnem je výrazne viac senzitívny na pomalé a plynulé zmeny jasu a farby, než na extrémne rýchle zmeny na malom priestore.

To znamená, že vysokofrekvenčné zmeny v obrázku môžeme spriemerovať a presnejšie dáta vyhodiť, bez toho aby sme si všimli nejaký rozdiel. Dáta pritom odoberáme naozaj vo veľkom. V základe platí, že 8 až 10 násobné zredukovanie objemu dát je nepozorovateľné (bez toho, aby sme sa nazoomovali až na veľkosť samotných pixelov).

Problémom je, že táto metóda je dobre použiteľná len pri fotografiách. Ak sa použije pri  „neprirodzených“ obrázkoch, ako sú napríklad komiksy, texty či snímky obrazovky programov, výsledkom je nepekné zašumenie ostrých hrán. A to už aj pri malom odoberaní dát.

Nezničiteľnosť digitálnych dát v akcii /XKCD.com/

Dôležitým faktom takisto je, že kompresia JPEG je kumulatívna. To znamená, že čím viackrát ju použijeme, tým viac šumu a artefaktov výsledný obrázok bude obsahovať. JPEG totiž nevie, že tie fragmenty vytvoril on. Skrátka počíta s tým, že ide o obrazovú informáciu ako každú inú a výsledkom sú ešte horšie artefakty artefaktov

Dôsledkom je jav, ktorý je vidieť na obrázku vyššie. Nie je spôsobený tým, že obrázok kopírujete (dáta sú totožné a kvalita nikdy neklesne). Je to z dôvodu, že sa nahrávajú na rôzne on-line služby či sociálne siete, ktoré vždy aplikujú vlastnú JPEG kompresiu znova (kvôli ušetreniu objemu dát na svojich serveroch).

PREČO ALE OKOLO TEXTU A NA OSTRÝCH HRANÁCH TIE ŠKAREDÉ ARTEFAKTY VZNIKAJÚ?

NEMÁM ČAS, CHCEM RÝCHLU ODPOVEĎ PIATIMI VETAMI:  extrémne účinný redukčný mechanizmus JPEG využíva delenie obrázku na 8 × 8 pixelov, pričom ich spoločne popisuje matematickou funkciou. Výborne to funguje na bežných fotografiách, pretože naše oči v rámci bežného sveta vysokofrekvenčné zmeny zväčša ignorujú a všímajú si celok, takže vyhladenie/odobranie ostrých prechodov obrazový dojem vôbec nezmení.

Problémom je, že text alebo plochá grafika okna programu pravidlo nedôležitosti ostrých hrán porušuje. V tomto prípade sú ostré hrany a rýchle zmeny intenzity (medzi textom a pozadím) naopak extrémne dôležité, ba až esenciálne. A keďže JPEG je navrhnutý práve tak, aby tieto javy podceňoval alebo ignoroval, jeho používaná metóda masívne zlyhá a produkuje nezmysly – artefakty.

FÍHA, TO JE ZAUJÍMAVÉ, POVEDZ MI PREČO JE TO TAK: Pochopiť základné princípy a dôvody tohto javu nie je vôbec zložité. Na všeobecný a pritom správny prehľad nemusíte nutne chápať všetky matematické aspekty kompresného algoritmu. Stačí základná šablóna.

V základe si uvedomte, že JPEG vidí obrazovú informáciu ako čísla. My síce vidíme obrázok ako celok a vidíme na ňom tigra, písmo alebo ženské ňadro, ale JPEG vidí len jednotlivé pixely a to, že ten tretí pixel zľava v druhom riadku má hodnotu jasu 79 a hodnotu červenej farby 54.

Toto je skrátka obrázok a v základe nič viac. Aby JPEG dosiahol jeho objemové zmenšenie, začne trošku podvádzať. V základe všetko robí v štyroch krokoch.

V prvom kroku oddelí hodnoty jasu od farby, v druhom čísla farieb redukuje o 75 % (stratovo – dáta sa zahodia), v treťom sa redukuje ostrosť hrán (stratovo – dáta sa zahodia) a v poslednom štvrtom kroku sa samotné dáta skomprimujú (nestratovo).

To pôsobí trochu suchopárne, že áno, ale nebojte sa. Za každým krokom sa skrýva nejaká zaujímavosť.

Pozrime sa na tú prvú. Prečo oddeľujeme hodnoty jasu od farby? Nuž, ľudské oko má až 120 miliónov svetlo citlivých tyčiniek (fotoreceptorov), ktoré registrujú zmeny jasu, avšak iba zhruba 6 miliónov čapíkov, schopných rozpoznávať farby. Aj keď si to teda možno neuvedomujete, na drobučké zmeny jasu ste mnohonásobne viac citlivejší (dokážete si ich všimnúť), ako na zmeny farby.

JPEG to využíva a v prvom kroku tieto dve dáta oddelí. Celý obrázok si rozdelí na úseky veľké 8 × 8 pixelov a očísluje si hodnoty jasu každého z nich. Použije čísla od 0 až po 255. Nula je totálna tma (čierny pixel) a 255 maximálny jas (biely pixel). Medzi tým sú odtiene šedi.

Vytvorí si tak dobre popísaný „čiernobiely“ 8 × 8 pixelov veľký úsek, ktorý vidíte ako druhý zľava (Y). Farbu si následne uloží oddelene, čo sú hodnoty nasledovných štvorcov. Ide o metódu, respektíve farebný model, YCrCb, čo v jednoduchom rozpise znamená, že má tri hodnoty. Priemerný čiernobiely jas (Y) a červenú a modrú odlišnosť farby (Chroma red, Chroma blue).

Následne dôjde k druhému kroku, pri ktorom JPEG zmenší a zjednoduší farby každého 64 pixelového bloku (8 × 8) na 16 hodnôt (4 × 4 pixely), teda na štvrtinu. Stratíme teda farebné údaje, JPEG ich zahodí. Keďže naše oko je na jas citlivejšie, každý zo 64 pixelelov si jas zachová, ale pri farbe, na ktorú nie sme až tak citlivý, sa 64 pixelov popíše len 16 hodnotami a teda susedné 4 pixely zdieľajú jednu hodnotu.

Na tomto pekne vidíte, prečo sa nepoužíva štandardný farebný model RGB (červená, zelená, modrá). Pri ňom totiž každá farba nesie hodnoty svojho jasu. Ak by JPEG dáta uchovával takto, tak 75 % zredukovaním 8 × 8 pixelov (64) na 4 × 4 (16) by o dôležité rozdiely v jase prišiel.

Takto o ne nepríde. Priemerný jas pixelov zostane zachovaný pre celý rozmer a redukuje sa len rozdiel v jase červeného a modrého spektra zvlášť. Rozdiely v zelenom spektre sa nezaznamenajú, pretože ich je možné z daných dát odvodiť. Je triviálne vedieť hodnotu ZELEŇ, ak máte uložené hodnoty 5 = 2 + 1 + ZELEŇ. Je jasné, že ZELEŇ je 2 a tieto dáta tak netreba ukladať. Vypočítajú sa pri zobrazení obrázku.

Nasleduje tretí a finálny stratový krok, ktorý je z hľadiska nášho článku najdôležitejší. Práve tu sa láme chleba. Výsledný úsek 8 × 8 pixelov (64 hodnôt jasu + 16 + 16 hodnôt farby) sa totiž popíše goniometrickou funkciou.

NIE POČKAJTE. Neutekajte preč. Nebudeme tu riešiť matematiku. Skrátka ide o to, že každý kus obrázku reprezentuje vždy nejaký zástup čísiel (hodnôt). Namiesto zapamätania každej zvlášť ale ušetríme hromadu miesta tým, že si nebudeme pamätať čísla ako také, ale len ich vhodný popis.

Napríklad hodnoty 2, 0, -2, 0, 2, 0, -2 môžeme zapísať ako: cyklická vlnka o výške dva body. A to je celé. JPEG sa v tomto kroku teda snaží nájsť vlnku (matematicky ľahko vyjadriteľnú), ktorá sa do všetkých čísiel daného úseku trafí a popíše ich.

Jedna vlnka je obvykle málo, ale ak skombinujeme dve jednoduché s inými hodnotami, výsledkom je komplexnejšia tretia. Ak skombinujeme tri, štyri alebo päť jednoduchých vlniek s rôznymi hodnotami, výsledkom je čoraz komplexnejšia výsledná vlnka, s ktorou sa budeme triafať čoraz lepšie.

Toto je práve tá kompresná hodnota JPEG. Ak použijete „vysokú kompresiu“ (10 MB obrázok chcete zmenšiť na 20 kB), JPEG použije na dané úseky len malý počet vlniek. Dané popisy čísiel teda budú fakt len približné a výsledkom je, že obrázok pôsobí kockato (obrázok progresu) – vidíte práve tých 8 × 8 pixelov, popísaných smiešne malými hodnotami.

Ak ale nastavíte JPEG rozumne a chcete zmenšiť 10 MB obrázok na 1 MB, JPEG má už dosť priestoru na to, aby čísla popísal dostatočným počtom vlniek a výsledná vlnka je teda veľmi presná a podobá sa na pôvodné hodnoty skoro úplne presne.

Tu JPEG ťaží z toho, že naše oči sú citlivé na nízkofrekvenčné zmeny (čísla sa menia plynulo a postupne), než na ostré a rýchle (čísla náhle skáču z veľkých na malé hodnoty rýchlo po sebe) – nevadí teda, že práve do toho druhého prípadu sa krivka netrafí. Koniec nejakého objektu či hrany posudzujeme práve na základe nízkofrekvenčných zmien. To je mimochodom dôvod, prečo nás a iné zvieratá oklame kamufláž, ako napríklad dobre sfarbená srsť zvieraťa, ktorá splynie s pozadím (je to vysokofrekvenčná zmena na malom priestore, ktorá nám unikne).

Zaujímavé, že? A práve tu je problém s písmom a obrázkami plochej grafiky. Kvôli ostrým a vo svete neprirodzeným prechodom čísla jasu masívne skáču (z veľkých na malé hodnoty a to okamžite) a ak ich chce JPEG presne popísať vlnkou, musí byť mimoriadne komplexná.

Ak je JPEG nastavený na podobnú úroveň, ako pri fotografii, počet vlniek nestačí. Do zmien sa výsledná vlnka začne občas výrazne netriafať. To znamená, že sa hodnoty posúvajú inam a tam kde nepatria a to je na jasnej ostrej hrane extrémne viditeľné.

Výsledkom sú fragmenty. Tie šmuhy a fľaky iných odtieňov a farieb okolo textu, mimo správneho miesta. To je to miesto, kde sa vlna netrafila a kde číslo skončilo na inej hodnote. Táto miera netriafania na fotkách nie je vidieť, pretože čísla tak rázne a ostro nikdy nemenia hodnoty. A práve preto je JPEG na plochú grafiku a text maximálne nevhodný. Jeho inak najsilnejšia stránka sa pri nich totiž stáva masívnou slabinou.

A to je všetko. Preto tieto hnusné fragmenty a fľaky vznikajú. Navyše, ak skomprimujete obrázok znova (napríklad uploadovaním na Facebook), ešte sa zhoršia, pretože JPEG nevie, že tie fragmenty vytvoril pôvodne on. Netrafí sa znova, ale tentoraz inak, v snahe popísať tie fľaky, o ktorých si myslí, že do obrázku patria.

V našom popise pre úplnosť JPEG kompresie pravdaže zostáva ešte posledný štvrtý krok, ale ten je už z hľadiska témy tohto článku nezaujímavý. Ide skrátka len o nestratovú kompresiu dát, podobne ako je ZIP či RAR. Dáta sa pri nej nestratia. Len sa zhutnia nejakým vhodnejším zápisom. Napríklad binárnu sekvenciu 1111000000000000000 môžeme zapísať ako 4×1,15×0. Žiadne dáta nestratíme, len potrebujeme výkon na spätný prevod do pôvodnej podoby.

PREČO JE ALE VÝSLEDOK NA ČERVENEJ FARBE NAJHORŠÍ?

RÝCHLA ODPOVEĎ: prekvapením je, že v skutočnosti výsledok nie je na červenej farbe technicky horší. Pri pozornom pohľade odhalíte, že JPEG produkuje celkom rovnaké fľaky aj na podkladoch inej farby. Na červenom podklade ich však výrazne viac vnímame, čo je dôsledkom vlastností ľudského zraku, nie kompresie. Defacto teda ide o optický klam.

PODROBNEJŠIA ODPOVEĎ A UKÁŽKY: Mnoho ľudí si celkom prirodzene všimne, že JPEG kompresia textu a plochej grafiky produkuje mimoriadne nevzhľadné fľaky hlavne v súvislosti s červenou farbou.

Ako ukážka môže slúžiť naša Facebooková stránka, kde pravidelne násilná JPEG kompresia tejto sociálnej siete brutálne masakruje obálky nášho časopisu a upútavky.

Vidíte ten červený kruh s nápisom vyhraj Canon IXUS 185? To je veru riadna kompresná machuľa. Ako to, že iný text na žltom alebo modrom pozadí takýto výprask nedostal? Ako to, že on vyzerá na pohľad normálne, ale tá červená pasáž je akoby ju niekto už týždeň rajbal?

Veď na celý obrázok je použitá rovnaká kompresia, tak ako je možné, že iba na tom konkrétnom kúsku dopadla tak zle?

Je to zaujímavé, pretože sa tu opäť prejavuje vlastnosť nášho oka. Ľudské oko má zhruba 6 miliónov farebných čapíkov a zhuba 65 % z nich je určených na detekciu červenej farby (na zelenú 32 % a na modrú len 2 %). To má zrejme značný vplyv na to, že defekty v odtieňoch červenej vidíme lepšie.

Je to však len klam, ktorý sa rýchlo ukáže, ak si jednotlivé pasáže výrazne zväčšíte. Náhle zbadáte, že JPEG kompresia farby nijako nediskriminuje a artefakty vytvára všade tam, kde sú ostré hrany (ako sa kompresná vlnka netriafa).

Ide teda o súhru okolností. Čierny artefakt na červenom podklade je pre naše oči značne rušivejší, ako svetlomodrý fľak na žltom. Efekt je viac viditeľný, pretože sa farby vzájomne opticky nemaskujú. Výsledné pokazenie kompresie je ale rovnaké.

Je to skrátka dôsledok nášho vizuálneho systému, o ktorom sa ľahko presvedčíme priblížením, respektíve zväčšením pixelov. Nejde o vlastnosť JPEG. Ten robí stále všetko rovnako.

AKO TO CELÉ VYRIEŠIŤ A NA OBRÁZKOCH HNUSNÉ FĽAKY NEMAŤ

RÝCHLA ODPOVEĎ: Je to jednoduché. Na plochú grafiku skrátka nikdy JPEG nepoužívajte. Jeho algoritmy sú navrhnuté pre fotografie z bežného sveta. Jeho PRINCÍPY NEFUNGUJÚ pri obrázkoch plochej grafiky, ako sú snímky obrazovky, celofarebné plochy a písma. Ak JPEG použijete na nich, jeho kompresia masívne zlyhá a ukáže všetky svoje negatíva. Na tieto typy obrázkov preto vždy používajte formát PNG, ktorý je naopak pre ne navrhnutý. Výsledná veľkosť v kB či MB bude dokonca menšia, ako v prípade JPEG a nikdy nestratíte ostrosť a ani nevzniknú vizuálne machule.

PODROBNEJŠIA ODPOVEĎ A PRAKTICKÉ RADY: Niekedy je pravdaže JPEG kompresiu vhodné použiť aj v súvislosti s textom. Typicky napríklad na bežnej fotografii, kde je text len doplnok. V takomto prípade je vhodné nastaviť JPEG kompresiu čo najštedrejšiu (vysokú kvalitu), pri ktorej sa používa veľké množstvo „vlniek“.

Súbor bude kapacitne väčší, ale text zostane pomerne dobrý, pričom na tých najvyšších možných hodnotách kvality JPEG kompresie zostane skoro bez fľakov. Kapacita výsledného obrázku ale bude pokojne aj dvojnásobná oproti tomu, čo by sa dalo zniesť v prípade, ak by žiadny text neobsahoval.

Okrem toho, tento postup platí iba vtedy, AK O KOMPRESII ROZHODUJETE. Ak hotový JPEG v dobrej kompresii uploadujete na Facebook, ten vám ho zmasakruje novou vlastnou JPEG kompresiou, ďaleko agresívnejšou, aby ušetril svoje serverové miesto. Vaše požiadavky na kvalitu sú mu ukradnuté.

Takže s tým počítajte a podľa toho sa zariaďte.

Čo sa týka rýdzo nefotografickej plochej grafiky, tak pri nej sa vyhýbajte JPEG ako čert krížu. Nemá totiž absolútne žiadny význam. Nielenže vám totiž zhorší obraz, ale dokonca vám aj súbor kapacitne zväčší. Ako sa hovorí často sarkasticky – je to dlhšia, ale za to horšia cesta.

Obzvlášť snímky obrazovky z bežných programov (nie z hier a videa) by v JPEG formáte nikdy nemali byť. Stačí sa pozrieť na obrázok vyššie, aby ste zistili prečo.

Nebojte sa pritom používať PNG aj na sociálnych sieťach. Napr. Facebook vám ich upload umožní a nezmasakruje vám ich inou kompresiou. Zostanú teda pekné a ostré.

Opačne to pravdaže neplatí. Nikdy sa nesnažte s pomocou PNG ukladať fotky. Nie že by sa stalo čosi zlé. Kvalita zostane rovnaká, je to nestratový formát. Avšak naplno pocítite to, ako veľmi je výhodná prakticky neviditeľne stratová kompresia. Vaša fotka zo smartfónu náhle nebude mať 2 či 3 MB ale napríklad 10 MB a žiadny vizuálny rozdiel vidieť nebude. Na tieto typy obrázkov je skrátka JPEG naozaj veľmi výhodný.

Ak potrebujete fotku kvôli editovaniu držať v nestratovej kvalite, existujú vhodnejšie formáty, ktoré podporujú vrstvy či iné vlastnosti.

/Ilustrácia: Miuranaoko/

Ak potrebujete niekde ostrú grafiku, ktorá je na pomedzí medzi fotkou a plochou grafikou, čo sú typicky napríklad komplexné ilustrácie, budete často riešiť dilemu medzi tým, či použiť PNG a na kvalite nestratiť, alebo JPEG a ušetriť na kapacite (ale rozostriť hrany).

V takomto prípade vám veľmi odporúčam použiť trik predpripravenej stratovej kompresie (uplatnenej na farbe), v rámci PNG. Pri nej sa prakticky neviditeľne zmenší len farebný rozsah, tak ako to robí JPEG v prvých dvoch krokoch, ale nepoužije sa ten tretí krok, ktorý rozostrí hrany. Tam sa už použije nestratová PNG kompresia.

Takéto hybridné uloženie vám umožní mať ostré komplexné ilustrácie. Budú výrazne objemovo menšie ako surové PNG a takisto menšie ako JPEG, pritom ale zostanú ostré, tak ako pri surovom PNG. Takúto hybridnú kompresiu vykonajú za vás aj niektoré webové služby.

Najviac sa dá odporučiť TinyPNG. Stačí stránku otvoriť, jednu alebo viac súborov do nej pretiahnuť myšou a za pár sekúnd je hotovo. Nie je žiadny limit na počet súborov. Službu môžete používať koľko len chcete.

Nuž, tak snáď vám nadobudnuté znalosti budú k osohu. Dajte machuliam navždy zbohom.

Prečítajte si aj ďalšie články zo seriálu Čo je prečo tak.

František Urban

František Urban
Zameriavam sa najmä na prehľadové a analytické články z oblasti najrôznejších technológií a ich vývoja. Nájdete ma takisto pri diagnostike HW a SW problémov.