Obrázky, komprese a barevné prostory: jak RGB, sRGB a CMYK ovlivňují velikost souboru
Když grafik exportuje fotku z Photoshopu a soubor je o třetinu větší, než očekával, první podezření padá na to, že byla u obrázku komprese nedostatečná. Skutečný problém je ale často ještě dřívější a spočívá v nastavení barevného prostoru. Barevný prostor není jen technická formalita pro tiskárny a fotografy. Na webu přímo ovlivňuje velikost souborů, rychlost načítání a to, jak barvy na různých zařízeních skutečně vypadají.
Co barevný prostor vlastně znamená?
Barevnými prostory je definovaná množina barev, které soubor dokáže zachytit a zobrazit. Různé barevné prostory pokrývají různě velké oblasti viditelného spektra a ukládají barevné informace různě efektivně.
RGB je základní model, který popisuje barvy jako kombinaci červené, zelené a modré složky. Každá složka nabývá hodnot od 0 do 255 a jejich kombinací vzniká přes 16 milionů barev. Tento model používají monitory, fotoaparáty i webové prohlížeče. RGB ale není jeden konkrétní prostor, spíš rodina prostorů, které se liší v tom, jak velkou část viditelného spektra pokrývají.
sRGB je standardizovaná verze RGB navržená v devadesátých letech pro konzistentní zobrazení na monitorech a internetu. Pokrývá zhruba 35 procent viditelných barev a je výchozím barevným prostorem pro web. Prohlížeče, telefony i většina monitorů jsou na sRGB kalibrované.
Adobe RGB pokrývá výrazně širší gamut, přibližně 50 procent viditelného spektra. Používá se ve fotografii a prepressové přípravě, kde záleží na co nejpřesnějším zachycení barev. Na webu ale Adobe RGB způsobuje problémy, protože prohlížeče bez správného color managementu zobrazí takový soubor se špatnými barvami.
CMYK je tiskový model pracující se čtyřmi složkami: azurovou, purpurovou, žlutou a černou. Používá ho tiskárna při fyzickém tisku. Na webu CMYK nemá co dělat.
Jak barevný prostor ovlivňuje velikost souboru?
Tady se dostáváme k jádru věci. CMYK soubor ukládá čtyři barevné kanály místo tří. To znamená, že každý pixel nese o 33 procent více dat než v RGB. JPEG fotografie uložená v CMYK je proto výrazně větší než stejná fotografie v sRGB při identickém nastavení kvality komprese.
Pro web je CMYK souborů čistý problém. Prohlížeče ho sice přijmou, ale nezobrazí správně, a soubor je zbytečně velký. Pokud dostanete od grafika nebo tiskárny soubory v CMYK a nahrajete je rovnou na web, platíte daň v podobě pomalejšího načítání za barvy, které stejně nikdo neuvidí správně.
Adobe RGB přináší ještě subtilnější problém. Soubor má stejný počet kanálů jako sRGB, takže datová náročnost je podobná. Potíž nastane při kompresi. Algoritmy JPEG a WebP jsou optimalizované pro sRGB gamut. Barvy ležící mimo sRGB, ale uvnitř Adobe RGB gamutu, se komprimují méně efektivně a při stejném nastavení kvality produkují větší soubory nebo viditelnější artefakty.
Proč sRGB vyhrává na webu bez výjimky?
sRGB je pro webové použití správná odpověď z několika důvodů najednou. Kompresní algoritmy jsou na něj optimalizované a produkují nejmenší soubory při nejlepší vizuální kvalitě. Prohlížeče ho zobrazí konzistentně napříč různými zařízeními. A převod z Adobe RGB na sRGB při exportu je operace, která trvá sekundy a ušetří kilometry nepříjemností.
Praktický test to potvrdí rychle. Exportujte stejnou fotografii dvakrát z Photoshopu nebo Lightroom. Jednou jako JPEG v Adobe RGB, jednou v sRGB, obojí na kvalitu 80. Soubor v sRGB bude menší a barvy na standardním monitoru budou věrnější.
ICC profil a jeho vliv na data souboru
Ke každému barevnému prostoru patří ICC profil, malý datový soubor, který popisuje, jak mají být barvy interpretovány. Tento profil se vkládá přímo do obrázku a přidává k jeho velikosti zhruba dva až čtyři kilobajty.
Pro web je ICC profil sRGB zbytečný balast. Prohlížeče sRGB předpokládají jako výchozí prostor a profil nepotřebují. Při exportu ho proto smažte. Nástroje ShortPixel, Squoosh nebo příkazová řádka přes ImageMagick to zvládnou automaticky. U fotografií s ICC profilem Adobe RGB nebo ProPhoto RGB situace jiná. Tam profil nesmažte, dokud soubor nepřevedete do sRGB, jinak přijdete o informaci nutnou ke správné konverzi barev.
Kde se chyby dělají nejčastěji?
Nejběžnější situace vypadá takto. Fotograf odevzdá soubory v Adobe RGB, protože v tom nastavení fotoaparát pracuje a fotograf barvy edituje na wide-gamut monitoru. Webmaster soubory vezme, zkomprimuje je a nahraje. Výsledek jsou větší soubory, než by být musely, a barvy, které na většině monitorů vypadají trochu vybledlé nebo desaturované.
Druhá situace se týká tiskáren. Připravujete-li web i tisk z jednoho zdroje, dostanete CMYK soubory určené primárně pro tiskárnu. Ty na web nesmí jít bez konverze. Photoshop, GIMP i online nástroje konverzi zvládnou, ale vždy ji zkontrolujte vizuálně. Převod CMYK na sRGB není vždy přesný a saturované barvy se mohou posunout.
Třetí zdroj chyb jsou screenshoty a grafiky z designových nástrojů. Figma exportuje v sRGB konzistentně, ale starší verze Illustratoru nebo Inkscape mohou přidat nečekaný barevný profil podle systémového nastavení. Výsledný soubor pak nese profil, se kterým nikdo nepočítal.
Praktický postup pro bezproblémový export
Při přípravě obrázků pro web nastavte barevný prostor na sRGB ještě před editací, ne až při exportu. Lightroom to dělá automaticky při exportu pro web, Photoshop vyžaduje ruční nastavení nebo akci. Při exportu vždy odstraňte ICC profil sRGB, protože je redundantní. Profily jiných prostorů odstraňte až po konverzi na sRGB.
Po kompresi ověřte výsledek v prohlížeči na běžném monitoru, ne na kalibrovaném wide-gamut displeji. To, co vypadá skvěle na profesionálním monitoru, nemusí odpovídat tomu, co uvidí většina uživatelů vašeho webu.
Barvy jako datový problém
Barevné prostory nejsou jen téma pro fotografy a grafiky. Pro každého, kdo spravuje web s obrázky, jde o přímý vliv na rychlost načítání a vizuální konzistenci. Správně zvolený barevný prostor je optimalizace, která nevyžaduje kompromis v kvalitě. Soubor je menší, barvy vypadají lépe a web se načte rychleji. Stačí vědět, kde v exportním dialogu kliknout.
