JPEG-kuvien väriero webdisainissa

En olisi uskonut, että saan näin pienestä ja helposta vinkistä näinkin pitkän postauksen, mutta kun tykkään jaaritella niin pirskatisti.

Jos olet onnistunut tuottamaan todella hienon webbisivuston, missä käytät taustalla esim. häivytyskuvia (liukuväri), mutta huomaatkin jälkeen päin, että toisella selaimella taustan väri ei olekaan sama, mikä kuvassa, vaikka Photoshop tai jokin muu kuvankäsittelyohjelma niin väittääkin.

Makeata mahantäydeltä

Ongelma pystyy johtumaan jokaisen selaimen ja käyttöjärjestelmän ominaistavasta tulkita värit omalla tavallaan. Esimerkiksi: Safari ja Firefox tulkitsee värit eri tavalla Macillä, koska Firefoxin Mac-versiosta on kehnompi tuki väriprofiileille kuin Safarissa. Värit toistuvat näin ollen Firefoxissa haaleammin.

Vaikka käytössä olisikin vain PC-tietokone Windows-käyttöjärjestelmällä, jolle värit on saatu optimoida, niin kannattaa ottaa huomioon myös ne muut ihmiset, jotka käyttävät eri käyttöjärjestelmiä ja alustoja. Sivu joka sisältää selviä virheen näköisiä värieroja laskee illuusioita ammattitaitoisesta osaamisesta.

Suosittelen käyttämään seuraavaa tallennusmenetelmää Photoshopissa:

File » Save for Web

Vaihtoehtoina tallennuksella voit valita joko “Optimized” tai “Progressive“. Oikeastaan on sama käytätkö optimoitua vai progressiivista pakkausta, molempien pitäisi toimia. Optimoidun pakkauksen etuna kuitenkin on se, että tiedosto koko pienenee enemmän kuin progressiivisessa pakkauksessa. Progressiivisen pakkauksen ero optimoituun on kuitenkin se, että jos toisessa päässä erittäin hidas yhteys, niin JPEG-kuva paljastaa itseään samalla tavalla kuin ladatessa GIF-kuvaa.

Jos kuitenkin optimoitu ei toimi, käytä progressiivista. Jos progressiivinen ei toimi, käytä optimoitua. Jos mikään ei toimi, etsi joku, joka osaa tämän asian paremmin kuin minä.

Mutta niin, kerronpa vielä asian vierestä. Itse olen vaihtanut valokuviin väriprofiilin “ColorMatch RGB” kiriäkseni valokuvien värieroa pienemmäksi Safari- ja Firefox -selaimilla, koska kyseiseen profiiliin tuntuu löytyvän parempi tuki. Itse “ColorMatch” -väriprofiili on suunniteltu vanhoja näyttöjä varten, missä ei ole valtavan suurta värientoisto mahdollisuutta. Kyseisessä väriprofiilissa on kuitenkin pienempi väriavaruus, mutta se ei ole tähän mennessä webbikäytössä itseäni haitannut.

Ei se “Save for Web” siellä turhaan ole, vaikka jotkut vaihtoehdot siellä olisikin 56k modeemin aikuisia.

+ Progressive pelaa minulla paremmin.