Ztrátová a bezztrátová komprese obrázků. Která metoda se hodí v jaké situaci
Chcete zmenšit velikost obrázků na webu, ale bojíte se, že ztratí na kvalitě? Rozdíl mezi ztrátovou a bezztrátovou kompresí obrázků rozhodne o tom, jestli budete mít pixelované fotky nebo perfektní výsledky.
Jak funguje bezztrátová komprese?
Data obrázku tvoří pomyslnou knihovnu plnou knih, kde každá má své místo. Některé regály jsou poloprázdné, některé knihy mají zbytečně velké mezery. Bezztrátová komprese dělá v podstatě reorganizaci. Uklidí, srovná a efektivněji využije prostor. Žádná kniha se neztratí, všechno zůstane na svém místě, jen chytřeji uspořádané.
V praxi to znamená, že algoritmus najde opakující se vzory v datech a zkrátí je. Místo toho, aby zapisoval „červená, červená, červená, červená, červená“ padesátkrát, zapíše „50x červená“. Výsledný soubor zabere méně místa, ale obsahuje naprosto identickou informaci.
Další trik spočívá v odstranění nadbytečných metadat. Fotoaparát do každé fotky uloží datum, čas, GPS souřadnice, model fotoaparátu, nastavení expozice a další technické údaje. Více na téma metadat v obrázcích viz tento článek. Pro zobrazení na webu ale tyto informace nepotřebujete. Bezztrátová komprese je vymaže a tím ušetří kilobyty.
Barevné informace se ukládají efektivněji. Místo ukládání barvy pro každý pixel zvlášť se využívají chytřejší metody kódování. Představte si, že máte velkou modrou plochu oblohy – nemusíte ukládat „modrá“ pro každý pixel, stačí říct „od tohoto bodu do tohoto bodu bude všechno modré“.
Princip ztrátové komprese
Tady už jdeme dál. Algoritmus aktivně odstraňuje data, která lidské oko těžko rozezná. Funguje to podobně jako MP3 u hudby – vyhodí frekvence, které stejně neuslyšíte.
Lidský zrak vnímá změny jasu citlivěji než změny barev. Ztrátová komprese tohoto faktu využívá a barevné informace komprimuje agresivněji než informace o jasu. Výsledek vypadá přirozeně, i když technicky obsahuje méně dat.
Další postup spočívá v zjednodušení detailů v oblastech, kde to nepoznáte. Mírně rozmazané pozadí za portrétovanou osobou nevypadá hůř, ale zabere výrazně méně místa. Ostrý detail tam stejně nikdo nehledá.
Algoritmus také sloučí podobné barvy do jedné. Když máte dva téměř identické odstíny modré vedle sebe, sloučí je. Rozdíl je tak minimální, že ho bez zvětšení na 400 % neuvidíte.
Zajímavé je, že různé formáty používají odlišné metody ztrátové komprese. JPEG se zaměřuje na fotografie a pracuje s barevnými bloky 8×8 pixelů. WebP využívá modernější algoritmy, které dosahují lepších výsledků při stejné kvalitě. Výběr správného formátu proto hraje stejně velkou roli jako samotné nastavení komprese.
Praktické scénáře pro bezztrátovou kompresi
- Logo vaší firmy vyžaduje přesnost do posledního pixelu. Každá čárka musí být ostrá, každá barva naprosto přesná. Tady nemáte prostor pro kompromisy. Bezztrátová komprese zachová každý detail.
- Ikony a tlačítka na webu taky nesnesou rozmazání. Představte si ikonu se šipkou. Když se rozmaže, vypadá amatérsky. Uživatelé to okamžitě poznají a působí to neprofesionálně.
- Infografiky s textem potřebují ostrá písmenka. Ztrátová komprese by text rozmazala a čitelnost by trpěla. Zvlášť u menších fontů by byl rozdíl výrazný.
- Screenshoty z aplikací nebo technická dokumentace spadají do stejné kategorie. Když vysvětlujete uživatelům, kam mají kliknout, musí všechno vidět křišťálově čistě.
- Technické výkresy, schémata nebo diagramy vyžadují absolutní přesnost čar. Jeden rozmazaný pixel dokáže zkreslit důležitou informaci. V těchto případech není prostor pro kompromisy a bezztrátová metoda je jediná správná volba.
Kdy sáhnout po ztrátové kompresi?
- Produktové fotografie v e-shopu jsou ideálními kandidáty. Fotka bílých tenisek na bílém pozadí vydrží kompresi na 80 % kvality bez viditelné ztráty. Ušetříte 70 % velikosti souboru a zákazník neuvidí rozdíl.
- Bannery na hlavní stránce obvykle zobrazují atraktivní fotky nebo grafiku. Jejich účel je zaujmout, ne zobrazit každý detail. Komprese na 75-80 % funguje skvěle.
- Fotogalerie z firemních akcí nebo portfolio prací nepotřebují maximální kvalitu. Návštěvníci chtějí vidět celkový dojem, atmosféru, koncept. Drobné ztráty kvality nikoho netrápí.
- Blog s ilustračními fotografiemi taky bez problémů zvládne ztrátovou kompresi. Čtete článek o cestování a u toho si prohlížíte fotky z Bali? Stačí kvalita 75 % a načte se to bleskově.
- Pozadí webových stránek často tvoří velké fotografie nebo gradienty. Tyto prvky primárně vytvářejí atmosféru a nenesou konkrétní informaci. Agresivnější komprese tady nevadí a výrazně zrychlí načítání celé stránky.
Kombinace obou metod
Chytří webdesignéři často začínají bezztrátovou kompresí a pak přidají ztrátovou. Nejdřív vyčistí metadata a následně optimalizují strukturu dat. Pak lehce sníží kvalitu JPEG. Takhle vytěžíte maximum.
PNG soubory projdou nejdřív bezztrátovým optimalizátorem, který vyčistí nadbytečná data. Když potřebujete ještě menší velikost a průhlednost není nutná, převedete je na JPEG a aplikujete ztrátovou kompresi.
Responzivní design využívá různé stupně komprese pro různá zařízení. Desktop dostane vyšší kvalitu, mobil trochu agresivněji komprimovanou verzi. Uživatel na malé obrazovce stejně nerozpozná drobné rozdíly.
Vyzkoušejte a porovnejte sami
Teorie je pěkná, ale vidět rozdíl na vlastní oči vás přesvědčí víc než jakékoliv vysvětlování. Vezměte si nějakou fotku a zpracujte ji oběma metodami. Postavte výsledky vedle sebe a zhodnoťte, jestli vidíte rozdíl. Pak se podívejte na velikost souborů. Možná zjistíte, že mnohem agresivnější komprese funguje bez viditelné ztráty. Nebo naopak uvidíte, že potřebujete zachovat každý detail. Každý web má jiné potřeby a vy sami nejlépe poznáte, co je pro vás ta správná cesta.
