Fotka z telefonu na webu vypadá šedě a vybledle, i když na displeji telefonu zářila. Není to nutně špatný snímek ani „rozbitý“ web. Telefon ukládá širší barevný prostor Display P3 a často i automatické HDR. Web a většina CMS pořád počítají se sRGB. Když převod HEIC nebo nahrání do redakce odřeže barevný profil, prohlížeč vezme čísla z P3, jako by to bylo sRGB — a barvy zešednou.
Displej telefonu není náhled webu
Když fotíte mobilem, díváte se na panel, který umí sytější barvy než běžný kancelářský monitor. Od iPhonu 7 Apple ukládá a zobrazuje snímky v Display P3. Android od verze 8 umí totéž u zařízení se širokým gamutem. Galerie v telefonu barvy přepočítá na ten konkrétní displej. Proto snímek v kapse vypadá ostře a „živě“.
Webová stránka není ta galerie. Čtenář ji otevře na notebooku, v prohlížeči, který u obrázku bez profilu předpokládá sRGB. CSS Color 4 to říká přímo: soubor bez platného ICC profilu se má brát jako sRGB. Telefonní displej tedy není důkaz, jak bude fotka z telefonu na webu vypadat. Je to důkaz, jak vypadá na jednom zařízení, které o ní ví víc než web. Otevřete stejný soubor na telefonu a na notebooku vedle sebe, už na stránce. Když je na notebooku mdlý a na telefonu sytý, nejde o „horší počítač“. Jde o to, jestli se profil na cestě zachoval.
Display P3 versus sRGB
Barevný prostor je dohoda, co znamenají čísla v souboru. sRGB je od roku 1999 standard IEC 61966-2-1. ICC k němu vydává profily, které prohlížeče a editory používají k převodu. Display P3 je širší: zvládne sytější červenou a zelenou, které se do sRGB nevejdou. Stačí vědět, že P3 má rezervu sytosti, kterou sRGB nemá.
Když soubor v P3 někdo otevře jako sRGB — bez převodu, jen se stejnými čísly —, syté tóny spadnou do užšího prostoru. Červená zešedne, zelená zežloutne. Není to komprese JPEG. Je to špatně čtený profil. Převod P3 → sRGB barvy namapuje a část sytosti oželí vědomě. Zahození profilu je horší: čísla zůstanou, význam se změní.
| Co se stalo | Jak to vypadá na webu | Co s tím |
|---|---|---|
| P3 s platným ICC | blízko telefonu, na sRGB monitoru klidnější | pro jistotu stejně exportujte sRGB |
| P3 bez profilu, čísla jako sRGB | šedá, mdlá, „jako přes fólii“ | převést do sRGB a profil zapsat znovu |
| HDR zploštěné do SDR | světla bez lesku, stíny bez kresby | export SDR sRGB, ne náhled z HDR displeje |
| HEIC → JPEG bez správy barev | stejný ořez, jiné barvy | převádět v editoru, který profil čte |
Poměr ořezu je jiná vrstva než barva. Široký 16:9 vám uřízne obličej, ale zešednutí z něj neplyne. K geometrii rámu je text proč 16:9 na webu nestačí. Tady jde o to, jaká čísla v tom rámu leží.
Automatické HDR, které web ještě nenosí
Novější telefony fotí s mapou zisku (gain map) a ukládají Ultra HDR nebo HEIC s HDR vrstvou. Na OLED panelu to znamená jasnější odlesky, než umí běžný SDR web. Apple u sRGB a Display P3 počítá s referenční bílou kolem 80 cd/m². ISO HDR posouvá referenční bílou výš a zbytek nechává jako headroom. Android od verze 14 vyžaduje HDR režim okna.
Prohlížeč na webu ten headroom často nemá kam dát. Výsledek je zploštělý SDR náhled: nebe bez kresby, pleť bez růžové. Na telefonu vidíte HDR, na webu základ. Fotka z telefonu na webu proto potřebuje SDR export, ne snímek obrazovky z galerie.
HEIC převod, který zahodí profil
iPhone ve výchozím nastavení ukládá HEIC. V souboru je obraz i ICC, často Display P3. Problém začíná, když soubor „jen rychle“ převedete na JPEG: v Průzkumníku Windows, v online konvertoru, v messengeru. Mnoho těchto cest profil nečte. Vezmou kanály, zapíšou JPEG a ICC vynechají. Prohlížeč podle CSS Color 4 bere výsledek jako sRGB. Barvy zešednou, i když jste „jen změnili formát“.
Správný převod má tři kroky. Otevřít HEIC v nástroji, který ICC čte. Převést (convert) do sRGB, ne jen přiřadit (assign) sRGB profil na P3 čísla. Uložit JPEG nebo WebP s vloženým sRGB profilem. Přiřazení bez převodu je častá chyba: soubor tvrdí sRGB, čísla jsou pořád P3. Když posíláte fotku z iPhonu e-mailem, volba „Most Compatible“ / JPEG má šanci barvy namapovat dřív, než soubor skončí v CMS.
CMS, které profil odřeže
I dokonalý sRGB JPEG umí zešednout až v redakci. WordPress, plugin na WebP, CDN a „optimalizace obrázků“ soubor často znovu enkódují a ICC zahodí jako zbytečná metadata. Výstup je menší — a bez profilu. Untagged JPEG z P3 dat znovu spadne do sRGB interpretace. Stáhněte obrázek z živé stránky, ne z disku, a ověřte v ColorSync, Photoshopu nebo GIMPu, jestli profil existuje a jestli je to sRGB.
Nahrání do editoru je i chvíle, kdy se pletou textová pole. Alt, popisek a title jsou jiná vrstva než barva; k tomu je text proč alt text není popisek fotky. Vyplňte alt až u snímku, který už má správný export. Šedý soubor s dokonalým altem pořád vypadá šedě.
Praktický export: sRGB JPEG nebo WebP
Pro web počítejte se sRGB, dokud šablona a CDN neprokážou opak. Display P3 na webu existuje, ale jen tam, kde prohlížeč i soubor mluví stejným jazykem. Redakční jistota je užší prostor a vložený profil.
- Originál nechte originálem. HEIC nebo RAW s P3/HDR archivujte. Na web z něj dělejte kopii.
- Převeďte do sRGB. V editoru zvolte Convert to Profile / převést do sRGB, ne Assign. V Lightroomu zapněte sRGB v exportním presetu.
- Uložte JPEG nebo WebP. JPEG je nejširší kompatibilita. WebP jen tehdy, když řetězec úprav profil zachová.
- Vložte profil. „Strip metadata“ v optimalizátoru často smaže i ICC. Pokud plugin umí výjimku pro profil, zapněte ji.
- Nekontrolujte barvu na telefonu. Náhled udělejte na monitoru, na kterém čtenář web uvidí.
- Až potom řešte ořez a alt. Nejdřív barva a formát, pak poměr v šabloně, pak textová pole.
Kvalita JPEG 75–85 při šířce kolem 1200 px na článek stačí. Když po exportu snímek na notebooku pořád vypadá mdlý, vraťte se k převodu profilu. Netlačte sytost „od oka“ na P3 souboru, který web stejně přepíše.
Co z toho ještě neplyne
- Neplyne z toho, že Display P3 je chyba. Na web z něj musí vést převod, ne slepé zkopírování čísel.
- Neplyne z toho, že potřebujete kalibrovanou sondu. Stačí sRGB export a kontrola na běžném monitoru.
- Neplyne z toho, že WebP barvy „vylepší“. WebP je komprese. Bez profilu zešedne stejně jako JPEG.
- Neplyne z toho, že šedá fotka znamená špatný fotoaparát. Často znamená ztracený ICC nebo HDR zploštěné do SDR.
- Neplyne z toho, že jeden soubor z galerie telefonu obslouží web i tisk. Web chce sRGB SDR. Telefonní náhled je jiný výstup.
Shrnutí na lísteček: fotka z telefonu na webu vypadá šedě, když se P3 nebo HDR čte jako sRGB. Exportujte sRGB JPEG nebo WebP s profilem. Převádějte HEIC v editoru, ne v náhodném konvertoru. CMS zkontrolujte stažením živého souboru. Displeji telefonu při tom nevěřte.
Obrázek u článku je ilustrační stock. Nezobrazuje konkrétní značku telefonu ani čitelnou obrazovku webu.
Zdroje
- W3C CSS Color Module Level 4 — tagged and untagged images (ICC u souboru; untagged RGB se bere jako sRGB)
- ICC — sRGB encoding (IEC 61966-2-1:1999)
- ICC — sRGB profiles
- Apple Developer — CGColorSpace.displayP3
- Apple WWDC23 — Support HDR images in your app
- Android Developers — wide color gamut
- Android Developers — Display Ultra HDR images
