Barvno upravljanje na spletu

• Dušan Smolnikar :: 9. feb 2009

Barvno upravljanje je proces pretvorbe barv za različne naprave tako, da so povsod videti enake. Poznamo ga iz skeniranja, fotografiranja, tiskanja, ipd. Tu gre za pomemben proces, brez katerega bi bili rezultati nezadovoljivi. Redkokdaj pa se vprašamo kako je s tem na spletu. Je barvno upravljanje tu prav tako pomembno? Je sploh mogoče?

V tem članku se bom osredotočil na reprodukcijo barv na spletu. Poskušal bom najti teoretična pravila za le-to in pa še, če v praksi res držijo.

Zakaj je prikaz pravilnih barv tako pomemben?

Preden se poglobimo v samo delovanje spleta in prikaz barv na le-tem, se vprašajmo, zakaj je to vprašanje sploh tako pomembno? Poglejmo si dva primera.

Fotografije

Splet je danes uporaben kot portfolio za mnoge ljudi, med drugim tudi fotografe. Ti na spletu objavljajo svoje fotografije, da se z njimi predstavijo bodočim naročnikom. Zato jim je še kako pomembno, da so te slike prikazane kar se da nepopačeno in v pravilnih barvah. Nesaturirane barve, napačni toni kože in izguba detajlov v temnih predelih so tako slaba reklama za fotografa. Le-ta mora torej poskrbeti da so barve prikazane pravilno na vseh zaslonih.

Spletno nakupovanje

Vse več nakupov danes poteka prek spletnih trgovin. Tu so med drugim zelo priljubljena oblačila. V klasičnih trgovinah si ta dodobra ogledamo in preverimo če nam barva res ustreza. Enako želimo storiti tudi v spletnih prodajalnah. Barve na zaslonu torej želimo videti čim bolj podobne, oziroma enake pravim. To, da naročimo rdečo majico, za katero se izkaže da je oranžna je pogosta težava, do katere lahko pride v nasprotnem primeru.

Nekaj zgodovine, ali kaj so »web-safe« barve

Že od samih začetkov barvnih zaslonov, so bili ti sposobni prikazovati tri osnovne barve – rdečo, zeleno in modro. S selektivnim prižiganjem in ugašanjem teh barv pa smo lahko dobili še cian magento in rumeno, ter črno in belo. Tako smo lahko sestavili osnovno barvno paleto osmih barv. Le ta je zasedla 3 bite pomnilnika, ki je bil tiste čase zelo drag in zato omejen.

Naslednji korak v barvni reprodukciji je bila dodana možnost zatemnitve osnovnih barv. Tako smo s 50% osvetlitvijo pik dobili temno rdečo, modro in zeleno barvo, ter z mešanjem teh še temno magento, rumeno, cian in sivo. Tako se je barvna paleta povečala na 15 barv. Za zpolnitev štirih bitov pomnilnika (16 barv) pa je bila dodana še svetlejša siva, s tričetrtinsko osvetlitvijo vsake izmed osnovnih barv. S tem je bila ustvarjena osnovna, 16 barvna paleta, ki je bila uporabljena še v prvih verzijah operacijskega sistema Windows.

Apple Mac II pa je prišel na trg z možnostjo prikaza kar 256 različnih barv. Torej črna in bela, ter še 254 poljubnih barv, sestavljenih iz različnih kombinacij rdeče, zelene in modre. Vsaka izmed osnovnih barv je lahko zavzemala 256 različnih odtenkov, vendar pa zaradi premajhnega pomnilnika hkrati ni bilo moč prikazati vseh 16,7 milijonov barv, kot bi jih dobili z vsemi kombinacijami teh treh. Izdelovalci programske opreme so se morali torej omejiti na barvno paleto 256 barv. Med njimi so bile skoraj po pravilu vse barve iz 16-barvnega sistema, ostale pa poljubno izbrane. Dodatne barve smo lahko dobili le z »razpševanjem« (ang. dithering). Sivo barvo bi tako po sistemu razprševanja dobili s kombiniranjam črnih in belih pik.

Leta 1994, s prihodom brskalnika Netscape je tako še ogromno računalnikov delovalo v 256 barvnem načinu. Poleg razvijalcev programske opreme so zdaj kontrolo nad barvnimi paletami dobili še spletni oblikovalci. Kaj hitro se je zgodilo, da je bilo na zaslonu potrebno prikazati več kot 256 različnih barv, kar pa ni bilo mogoče. Barve na nekaterih spletnih straneh so torej postale le približki tistih pravih barv. Da bi se tem težavam ognili, je Netscape določil posebno paleto 216 rezerviranih barv, ki bi jih moral biti brskalnik vedno sposoben pikazati. To paleto so poimenovali »web safe colors«, oziroma barve, varne za splet. Te barve naj bi se tako v brskalniku prikazale vedno enako, ostale barve pa bi dobili z razprševanjem.

Danes, ko imajo računalniki dovolj spomina, le ti lahko prikazujejo vseh 16,7 milijonov različnih barvnih odtenkov hkrati. Potrebe po »web-safe« barvah tako ni več. [1, 2, 3]

Barve na spletu

Za lažje razumevanje barve na spletnih stranih, si poglejmo tehnološko plat določanja le-teh.

Elementom v HTMLju (barva pisave, barva ozadja, barva obrob, ...) lahko določimo katerokoli barvo, sestavljeno iz rdeče, zelene in modre, torej RGB barvo. To navadno zapisujemo v šestnajstiškem zapisu [4].

Rumeno tako zapišemo kot #FFFF00, kjer je:

• # - indikacija da gre za šestnajstiški zapis barve
• FF (= 255) delež rdeče barve
• FF (= 255) delež zelene barve
• 00 (= 0) delež modre barve

Ta zapis razumejo vsi brskalniki, najdemo pa ga tudi v programu Adobe Photoshop, v spodnjem delu okna »color picker«. V Photoshopu še najdemo opcijo, da nam prikazuje »Only Web Colors«, torej samo barve ki so v »web-safe« paleti. S tem izbiramo samo med barvami ki jih pravilno prikazuje vsak 256 barvni operacijski sistem, vendar pa le ti danes niso več v uporabi, zato ta opcija nima praktične uporabne vrednosti.

Poleg obarvanih elementov pa na spletnih straneh lahko prikazujemo tudi druge obarvane elemente, kot so slike, flash animacije, video vsebine, ipd. Vsi ti elementi bodo prikazani v RGB barvnem prostoru. V primeru slike v CMYK barvnem prostoru pa smo odvisni predvsem od brskalnika. Tako nekateri slike sploh ne bodo prikazali, drugi pa jo bodo najprej pretvorili v RGB prostor in nato prikazali. Pretvorba je nekontrolirana in odvisna od brskalnika samega. Za čim bolj pravilen prikaz je tako pomembno, da slike že pred vključevanjem na spletno stran pretvorimo v RGB barvni prostor.

Barvni profili na spletu

sRGB barvni prostor

Kljub standardnem RGB zapisu, pa ta ne podaja točne barve. Ta namreč podaja le koordinate barve v barvnem prostoru, ne pa tudi prostora samega. Ta je podan z ICC profilom. V znanem ICC barvnem profilu pa RGB vrednost natančno podaja eno samo barvo. Pri določanju vsake barve tako rabimo podati RGB vrednost in barvni profil. Ker pa bi bilo to na spletu zelo zamudno in potratno, je inštitut »World Wide Web Consortium« (kratko W3C), ki je odgovoren za standare na spletu, določil, da se vse barve na spletu, kjer ni drugače določeno, upodabljajo v sRGB barvnem prostoru. [5]

sRGB, ali »standardni RGB« je barvni prostor ustvarjen s strani velikanov HP in Microsoft za uporabo na zaslonih, tiskalnikih in spletu. Standard obsega barvni prostor dovolj majhen, da ga lahko pravilno prikaže večina domačih zaslonov. Za profesionalno uporabo in v pripravi za tisk pa je ta barvni prostor premajhen in so zato rezultati slabši, kot naprimer pri prostoru ProPhoto RGB. [6]

Za pravilen prikaz barv pa je potrebno, da je izhodna naprava (zaslon) kalibrirana, saj le tako sistem lahko zagotovi pravilen prikaz vseh barv. [7]

Drugi barvni prostori

Poleg prikazovanja sRGB barvnega prostora, pa je na spletu mogoča tudi uporaba drugih barvnih prostorov. Le te lahko vključimo v slike. Praktična uporaba tega se pokaže, ko želimo naprimer povečati barvni obseg na fotografiji. Pripenjanje barvnih profilov je identično kot pri uporabi za tisk. Na internetu se uporabljata predvsem tipa slik GIF in JPEG, zadnje čase pa tudi PNG. Vektorski format SVG je manj razširjen.

Pri slikah tipa GIF (Graphics Intercange Format) barvenga profila ni moč pripeti. Vse GIF slike se naj torej na spletu prikazujejo v profilu sRGB. [8]

Format JPEG (Joint Photographic Experts Group) omogoča pripenjanje ICC barvnih profilov. Brskalniki morajo torej sliko prikazati z upoštevanjem pripetega barvnega profila. Če profil ni pripet, jo morajo prikazati v privzetem sRGB barvnem profilu. [9]

Tudi format PNG (Portable Network Graphics) omogoča pripenjanje barvnih profilov in se torej obnaša podobno kot JPEG. Poleg tega pa PNG datoteke vključujejo še Gamma »correction«, oziroma popravek gamme. Ta naj bi sliko posvetlil, oziroma potemnil, glede na svetlost uporabnikovega zaslona. PNG Slike naj bi tako bile na vseh zaslonih enako svetle, ne glede na nastavitev gamma vrednosti. [10]

Barvni prostori v brskalnikih

Kljub standardiziranem barvnem prostoru pa danes brskalniki vsebine brez barvnih profilov ne prikazujejo v barvnem prostoru sRGB, temveč v barvnem prostoru trenutnega zaslona. Slika, ki sem jo shranil v profilu sRGB tako v brskalnikih ni bila pravilno prikazana, ista slika v barvnem profilu mojega zaslona pa se je pravilno pokazala povsod. Vendar pa je ponovljivost barv pri takem obnašanju nemogoča, saj uporabniki ne uporabljamo enakih zaslonov, kaj šele enakih konfiguracij enega zaslona.

Prav tako brskalniki z izjemo enega (Apple Safari) ne upoštevajo barvnih profilov pripetih slikam. Tako vse slike kažejo v barvnem profilu zaslona, ne glede na pripet barvni profil.

Applov Safari je edini brskalnik ki v tem trenutku prepozna barvni profil slike in jo pravilno prikaže. Vendar pa kljub temu slike brez barvnega profila prikazuje v profilu zaslona, kar ni v skladu s standardom. Safari je tudi edini brskalnik, ki upošteva že omenjeni Gamma correction v PNG datotekah. [11]

Mozilla Firefox, od verzije 3 naprej zna upoštevati barvne profile, vendar pa je potrebno to posebej nastaviti. Uporabnik se lahko tako odloči, da brskalnik pravilno prikazuje slike s pripetim barvnim profilom, ali pa da pravilno prikazuje tudi tiste brez barvnega profila in jih prikazuje skladno s standardom v sRGB barvnem prostoru. Težava pri tem je, da gre za nastavitev skrito večini uporabnikov, vključitev tega pa po besedah razvijalcev slabo vpliva na delovanje brskalnika samega. [5]

Adobe Flash Player zna od verzije 10 naprej upravljati z barvnimi profili. Pri izdelavi videa, oziroma aplikacije mora izdelovalec omogočiti barvno upravljanje, s čimer Flash Player prikazuje grafiko v sRGB barvnem prostoru. [12]

Uporaba v praksi

Kako pa je s samim barvnim upravljanjem v praktičnem delu?

Moja prva predpostavka je, da povprečen domač uporabnik ne zna pravilno kalibrirati zaslona, za to nima potrebne opreme ali pa ga to sploh ne zanima. Tak uporabnik bi barve na zaslonu videl napačne tudi če bi uporabljal brskalnik pisan po standardih.

Kot smo že videli, pa večina brskalnikov sploh ne podpira barvnega upravljanja. Žal pa večina ljudi uporablja brskalnik Internet Explorer, ki je priložen operacijskemu sistemu Windows. Po statističnih podatkih je takih kar okrog 75%. Mozilla Firefox dosega nekje do 20%. Vendar pa vsi še niso prešli na verzijo 3, le peščica pa jih je vklopila barvno upravljanje. Le par odstotkov uporabnikov pa uporablja Safari, ki ima barvno upravljanje privzeto vklopljeno, pa čeprav to ni popolno.

Tako so razmere za spletne razvijalce precej slabe. Tudi če se držijo standardov, upoštevajo sRGB barvni profil in fotografije opremijo z ICC profili, bo pravilne barve videl zelo majhen odstotek končnih uporabnikov. Ena izmed rešitev bi bila tako uporaba Flash-a 10. Ta bi sicer povečal možnost za pravilne barve na zaslonu, vendar pa oteži delo razvijalcem ter negativno vpliva na uporabnost in dostopnost spletišč. Poleg tega je tu še nekaj odstotkov uporabnikov ki flash vtičnika sploh nimajo naloženega in strani ne bi videli.

Moje priporočilo razvijalcem bi tako bilo, naj uporabljajo sRGB barvne profile ter jih pripenjajo fotografijam, za katere želijo, da so pravilno prikazane. Pri uporabnikih z ustreznimi nastavitvami in programsko opremo si tako zagotovijo pravilen prikaz, pri ostalih pa vsaj bolj korekten kot z nekaterimi večjimi barvnimi prostori, kot na primer Adobe RGB. V prihodnosti pa bo brskalnikov in zaslonov ki prikazujejo barve pravilno vse več.

Spoznanja

Barvno upravljanje na spletu je danes torej težko in skorajda nemogoče. Do pravih rezultatov sicer lahko pridemo v kontroliranem okolju, ter pri uporabnikih z ustreznim znanjem, nemogoče pa je pri širših množicah. Situacija se sicer izboljšuje, upam pa si trditi da se v kratkem ne bo bistveno spremenila.

Viri

1. Is the Web Safe Palette really dead?. Gillespie, J. 2001.
2. Frequently Asked Questions. VisiBone. 2008.
3. How a 16 color palette is represented in different pixel formats. A Witness to YAHWEH. 2002.
4. HTML Colors. W3Schools. Citirano 27. 12. 2008.
5. So Many Colors. Holley, B. 2008.
6. sRGB. Wikipedia. 2008.
7. A Standard Default Color Space for the Internet - sRGB. Stokes M., Anderson M., Chandrasekar S., Motta R. 1996.
8. Graphics Interchange Format. Wikipedia. 2008.
9. JPEG. Wikipedia. 2008.
10. The Sad Story of PNG Gamma “Correction”. Sivonen, H. 2008.
11. Browser Gamma-Correction Test Page. Roelofs, G. 2005.
12. Get better color online through Flash Player 10. Nack, J. 2008.