Miksi kuvan värit näyttävät erilaisilta verkkosivullani?

Vertaa saman kuvan kolmea versiota

Valokuva näyttää oikealta kuvankäsittelyohjelmassa, mutta sen värit muuttuvat verkkosivulla. Kuvaa tekisi mieli kirkastaa tai sen värejä voimistaa. Tarkista ensin, johtuuko ero itse kuvasta, sivusta vai näytöstä.

Vertailuun tarvitaan alkuperäinen kuva, verkkosivua varten tallentamasi kopio ja sivustolla näkyvä kuva. Valmiin kopion tallentamista muokkausohjelmasta kutsutaan usein vienniksi. Sivusto voi tämän jälkeen tehdä kuvasta oman pienennetyn tai pakatun versionsa.

1. Säilytä alkuperäinen. Käytä vertailukohtana alkuperäistä valokuvaa tai muokattavaa suunnittelutiedostoa. Tee muutokset kopioihin, jotta voit palata alkuperäiseen.
2. Tarkista tallennettu kopio. Avaa se kuvankäsittelyohjelmaan alkuperäisen rinnalle. Vedä tallennettu tiedosto myös selaimen välilehteen ja katso, miltä se näyttää siellä.
3. Tarkista sivuston kuvaversio. Napsauta julkaistun sivun kuvaa tietokoneella hiiren oikealla painikkeella. Etsi valinta Avaa kuva uudessa välilehdessä tai vastaava. Jäljempänä kerrotaan, mitä tehdä, jos tätä valintaa ei ole.
4. Vertaa samaa kohtaa. Käytä samaa näyttöä ja mahdollisimman samanlaista taustaa. Katso kuvia suunnilleen samankokoisina. Valitse kohta, jossa ero näkyy selvästi, kuten tuotteen kangas tai logon tasainen värialue.

Pidä tässä vaiheessa näytön kirkkaus ja muut asetukset ennallaan. Jos katsot yhtä kuvaa puhelimella ja toista kannettavalla tietokoneella, on vaikeampi erottaa tiedoston ja näytön vaikutus.

Valitse seuraava tarkistus näkyvän eron perusteella

Mikä väriprofiili on ja miksi sillä on merkitystä?

Kuva tallentaa värit numeroina. Väriprofiili kertoo sovellukselle, miltä näiden numeroiden pitäisi näyttää. Kun profiili tallennetaan kuvatiedoston sisään, puhutaan upotetusta profiilista. Voit nähdä myös nimen ICC-profiili, joka viittaa profiilien käyttämään standardiin. International Color Consortiumin usein kysytyt kysymykset kertovat niiden toiminnasta.

sRGB on yleinen tapa määrittää verkkokuvien värit. Sitä voi ajatella yhteisinä väriohjeina. Se on käytännöllinen valinta tavallisille valokuville ja grafiikalle, joita katsotaan monilla laitteilla. Adobe RGB ja Display P3 määrittävät erilaiset, laajemmat värialueet.

Jos väritietoja puuttuu tai niitä luetaan väärin, sovellus voi näyttää kuvan eri tavalla. Puuttuva profiili ei silti automaattisesti tarkoita virheellistä tiedostoa. Jo valmiiksi sRGB:tä varten tehty kuva voi näyttää tarkoitetulta. Ongelma syntyy, jos kuvan värejä tulkitaan väärillä ohjeilla. Katso Adoben selitys kuvien väriprofiileista.

Myös näytöllä on oma profiilinsa, joka kuvaa sen värintoistoa. Se on eri asia kuin kuvan profiili. Oman näyttösi profiilia ei pidä liittää verkkokuviin kaikkia kävijöitä varten.

Muunna värit, älä vaihda pelkkää profiilin nimeä

Kuvankäsittelyohjelmassa voi olla sekä Assign Profile eli profiilin määrittäminen että Convert to Profile eli profiiliin muuntaminen. Ne tekevät eri asioita:

• Profiilin määrittäminen antaa olemassa oleville väriluvuille uuden tulkinnan. Luvut pysyvät samoina, mutta kuvan ulkoasu voi muuttua.
• Profiiliin muuntaminen muuttaa värilukuja uusia väriohjeita varten ja pyrkii säilyttämään kuvan ulkoasun.

Jos haluat tehdä oikein tunnistetusta Adobe RGB -kuvasta sRGB-kopion, käytä muunnosta. Pelkkä sRGB-profiilin määrittäminen voi muuttaa värejä. Kaikkia hyvin voimakkaita värejä ei voida toistaa täsmälleen sRGB:n suppeammalla värialueella, joten tarkista tulos. Adoben profiiliohje kuvaa molemmat toiminnot.

Jos alkuperäinen profiili on tuntematon, etsi alkuperäinen suunnittelutiedosto tai kysy sen tekijältä. Älä valitse profiilia vain siksi, että kuva näyttää sillä värikkäämmältä. Ohjelma on voinut olettaa profiilin tiedostoa avatessaan. Sen tällä hetkellä näyttämä profiili ei siis todista, missä profiilissa kuva on tehty.

Tallenna verkkokäyttöön sRGB-kopio

Tee tavallisesta verkkosivun valokuvasta tai grafiikasta erillinen sRGB-kopio ja säilytä alkuperäinen. Tarvitset ohjelman, joka tukee värimuunnoksia. Photoshop on yksi vaihtoehto. Toisessa ohjelmassa vientiasetuksissa voi olla valinta Convert to sRGB eli muunna sRGB:ksi. Alla olevat Photoshopin valikkonimet ovat englanninkielisestä käyttöliittymästä.

1. Tarkista alkuperäisen profiili. Etsi ohjelmasta dokumentin väriasetukset. Avaa Photoshopissa Edit → Convert to Profile ja katso kohta Source Space. Jos ohjelma varoittaa puuttuvasta profiilista, selvitä alkuperäisen tiedoston asetukset tai kysy tekijältä sen sijaan, että arvaat.
2. Valitse kopion väriprofiiliksi sRGB. Valitse Photoshopin muunnosikkunassa kohteeksi sRGB IEC61966-2.1. Ota Preview eli esikatselu käyttöön, tarkista muutos ja hyväksy se. Adobe tarjoaa koko Photoshop-työvaiheen ohjeen.
3. Tallenna tai vie kopio. Jos vientiasetuksissa on Embed Color Profile, sisällytä kuvaan sitä vastaava sRGB-profiili. Muuntaminen muuttaa värilukuja. Upottaminen tallentaa ohjeet niiden lukemiseen.
4. Avaa tallennettu tiedosto uudelleen. Tarkista se kuvankäsittelyohjelmassa ja selaimessa ennen sivustolle lataamista. Käytä eri tiedostonimeä, jotta tunnistat uuden kopion.

Jos ohjelmassasi ei ole väriprofiilien asetuksia, tarkista sen ohjeista, miten se tallentaa värit viennissä. Pyydä suunnittelijalta sRGB-kopio verkkokäyttöön, jos et pysty varmistamaan asetuksia itse.

Valitse kuvamuoto erikseen. JPG sopii usein valokuville. PNG voi sopia grafiikalle, joka tarvitsee läpinäkyvän taustan. Verkkokuvien kuvamuoto-opas kertoo vaihtoehdoista. Pelkkä JPG:n vaihtaminen PNG:ksi ei korjaa virheellisiä väritietoja.

Tarkista, muuttaako sivusto kuvaa

Jos tallennettu tiedosto näyttää oikealta mutta sivuston kuva ei, selvitä, mitä lataamisen jälkeen tapahtuu. Sivuston julkaisualusta, kuvalisäosa tai kuvien jakelupalvelu voi pienentää kuvaa, pakata sen tai vaihtaa sen kuvamuodon.

Aloita kuvasta, jonka avasit omaan välilehteensä. Tallenna tämä kopio tietokoneellesi ja vertaa sitä sivustolle lataamaasi tiedostoon samassa kuvankäsittelyohjelmassa. Pienemmät kuvamitat eivät todista värivirhettä, mutta ne kertovat, että vertailussa voi olla eri kuvaversiot.

Jos kuvaa ei voi avata suoraan

Selaimen kehittäjätyökalut näyttävät, mitä tiedostoa sivu käyttää. Tämä on helpointa tietokoneella:

1. Avaa sivu ja etsi selaimen valikosta Kehittäjätyökalut eli Developer tools. Ne ovat usein kohdassa Lisää työkaluja eli More tools.
2. Valitse Network-välilehti eli verkkopyyntöjen näkymä ja lataa sivu uudelleen. Näet luettelon sivun lataamista tiedostoista.
3. Rajaa luettelo kuviin. Suodattimen nimi on yleensä Img tai Images. Valitse tiedosto ja katso Preview-välilehden esikatselusta, onko se etsimäsi kuva.
4. Napsauta tiedoston riviä hiiren oikealla painikkeella ja valitse Avaa uudessa välilehdessä, jos valinta on käytettävissä. Muussa tapauksessa kopioi tiedoston verkko-osoite eli URL ja liitä se uuteen selainvälilehteen. Tallenna kuva vertailua varten.

Chromen Network-paneelin ohje havainnollistaa näitä työkaluja. Valikkojen nimet ja asettelu voivat vaihdella selaimen ja käyttöliittymän kielen mukaan.

Sivu voi valita eri kuvatiedoston puhelin- ja tietokonenäkymissä. Responsiivisten kuvien opas kertoo tästä tarkemmin.

Jos et vastaa sivuston teknisistä asetuksista, toimita alkuperäinen lataamasi tiedosto ja sivuston kuvaversio niistä vastaavalle henkilölle. Pyydä tarkistamaan, poistaako kuvankäsittely väriprofiilin tai muuntaako se värit väärin. Korjauksen jälkeen sivuston kuvaversiot voidaan joutua luomaan uudelleen ja välimuisti tyhjentämään. Välimuisti säilyttää aiemmin tuotettuja tiedostoja. Varmista, että katsot uutta versiota.

Väritiedot ovat eri asia kuin yksityiset tiedot, kuten kuvan GPS-sijainti. Metatietojen eli kuvan yhteyteen tallennettujen tietojen poistaminen kokonaan voi poistaa myös väriprofiilin. Tarkista sekä yksityisyys että kuvan ulkoasu, kun teet jaettavan kopion. Valokuvien metatieto-opas käsittelee tätä työvaihetta.

Tarkista sivun tehosteet ja tausta

Jos sivuston kuva näyttää oikealta omassa välilehdessään mutta erilaiselta sivulla, sivu saattaa muuttaa sen ulkoasua. Kokeile sivuston vaaleaa ja tummaa teemaa. Tarkista myös, muuttuuko kuva, kun viet hiiren osoittimen sen päälle.

• Väri- ja kirkkaustehosteet: teema voi tummentaa kuvia, vähentää niiden värikkyyttä tai muuttaa ne harmaiksi. Näitä tehosteita kutsutaan usein suodattimiksi. MDN:n filter-ohje näyttää, miten ne vaikuttavat kuvaan.
• Osittainen läpinäkyvyys: kuva tai sitä ympäröivä osio voi päästää taustan näkymään läpi, jolloin värit näyttävät haaleilta. Tätä säädetään opacity- eli peittävyysasetuksella. Asetus voi vaikuttaa kuvaan myös silloin, kun se on määritetty ympäröivälle osiolle. Katso MDN:n opacity-selitys.
• Kuvan päällä oleva kerros: värillinen peittokerros tai osoittimen tuoma tehoste voi sävyttää kuvaa muuttamatta sen tiedostoa.
• Erilainen tausta: läpinäkyvät ja osittain läpinäkyvät alueet sekoittuvat sivun taustaan. Myös täysin peittävät värit voivat näyttää erilaisilta valkoisen ja tummanharmaan ympäristön keskellä.

Vertaa läpinäkyvää kuvaa samalla taustalla, jota käytettiin suunnittelussa. Jos se näyttää väärältä vain tietyllä taustalla, arvioi kuvan sopivuus tähän käyttökohteeseen. Läpinäkyviä taustoja käsittelevä opas kertoo vaihtoehdoista.

Etsi sivueditorin tai teeman asetuksista kuvatehosteita. Jos tarvitset apua, kerro sivuston kehittäjälle, että kuva näyttää yksinään oikealta, ja pyydä tarkistamaan suodattimet, peittävyys ja peittokerrokset. Hän voi poistaa yksittäisiä tyylisääntöjä hetkeksi käytöstä syyn löytämiseksi. MDN:n CSS-vianetsintäohje selittää tämän menetelmän.

Vertaa näyttöjä samanlaisissa olosuhteissa

Jos sama tiedosto näyttää erilaiselta kahdella näytöllä, älä muokkaa tiedostoa näyttöjen tarkistamisen aikana. Näytön kirkkaus, huoneen valaistus ja näytön ominaisuudet vaikuttavat siihen, mitä näet.

Poista vertailun ajaksi käytöstä asetukset, jotka tarkoituksella muuttavat näytön ulkoasua. Applen Night Shift tekee näytön sävyistä lämpimämpiä. True Tone mukauttaa väriä ja voimakkuutta ympäristön valoon. Katso Applen näyttöasetusten ohje. Muilla laitteilla etsi esimerkiksi sinisen valon suodatinta, yötilaa tai värejä voimistavaa näyttötilaa.

Jos koko sivu näyttää samalla tavalla lämpimältä tai tavallista värikkäämmältä, näytön asetukset ovat hyvä lähtökohta. Jos ero koskee vain yhtä kuvaa, palaa sen väritietoihin ja tarkista, onko kyseessä HDR-kuva. HDR selitetään usein kysytyissä kysymyksissä.

Kun tuotevärien luotettavuus on työssä tärkeää, kalibroitu näyttö antaa paremman vertailukohdan. Kalibrointi säätää näyttöä kohti tunnettua tavoitetta. Näyttöprofiili puolestaan kuvaa, miten näyttö toistaa värit. ICC:n usein kysytyt kysymykset selittävät nämä tehtävät. Oikein valmisteltu kuva auttaa värejä säilymään johdonmukaisina, mutta se ei saa kaikkien kävijöiden näyttöjä näyttämään täysin samalta.

Esimerkki: tuotekuva näyttää selaimessa haalealta

Kuvitellaan tuotekuva, jonka alkuperäisessä tiedostossa on tunnettu Adobe RGB -profiili. Kuva näyttää oikealta editorissa, mutta tallennettu kopio näyttää selaimessa haalealta. Tämä on kuvitteellinen esimerkki. Profiilin katoaminen ei vaikuta kaikkiin kuviin samalla tavalla.

1. Etsi ensimmäinen ero. Tallennettu tiedosto eroaa alkuperäisestä jo ennen lataamista, joten aloita editorin vientiasetuksista.
2. Tarkista, mitä tallennettiin. Tässä esimerkissä viennissä katosi Adobe RGB -profiili, mutta värejä ei muunnettu sRGB:ksi.
3. Tee alkuperäisestä uusi kopio. Muunna se sRGB:ksi ja tallenna mukaan sitä vastaavat profiilitiedot.
4. Vertaa ennen lataamista. Avaa uusi kopio editorissa ja selaimessa samalla näytöllä.
5. Tarkista myös sivusto. Lataa kopio ja vertaa sivun todella käyttämää kuvaa.

Värikylläisyyden lisääminen voimistaa värejä. Se voisi saada ensimmäisen vientitiedoston näyttämään paremmalta yhdessä sovelluksessa, mutta liian värikkäältä toisessa. Vientiasetusten korjaaminen puuttuu syyhyn ja pitää alkuperäisen käyttökelpoisena myös muihin tarkoituksiin.

Käytä Pixiloa, kun kuvan värit ovat kunnossa

Kun tallennetun kopion värit ovat kohdallaan, voit muuttaa sen kokoa sivua varten tai pienentää tiedostokokoa Pixilolla. Säilytä valmistelemasi kopio ladatun tuloksen vertailua varten.

Pixilo tarjoaa koon muuttamista ja pakkaamista, mutta siinä ei ole asetuksia väriprofiilien korjaamiseen tai valitsemiseen. Koonmuutoksissa ja monissa kuvamuunnoksissa selain piirtää kuvan uudelleen. Jos haluat säilyttää Display P3- tai HDR-ominaisuudet, tarkista tulos huolellisesti. Älä oleta jokaisen toiminnon säilyttävän niitä.

Aloita yhdestä kuvasta ennen usean kuvan käsittelyä. Vertaa sen tärkeitä värejä ja yksityiskohtia lataamisen jälkeen ja tarkista sitten julkaistu tulos. Jos ero syntyy vasta sivustolle lataamisen jälkeen, tutki sivuston kuvankäsittelyä tai sivun tehosteita.

Usein kysytyt kysymykset

Pitäisikö Display P3 -kuvat aina muuntaa sRGB:ksi?

Ei. Display P3 mahdollistaa laajemman värialueen ja voi olla hyödyllinen, kun sivusto ja kävijöiden laitteet tukevat sitä. Jos et tiedä, miten sivustosi käsittelee sitä, sRGB-kopio on yksinkertaisempi lähtökohta tavalliseen julkaisemiseen. Säilytä alkuperäinen. WebKit selittää, miten profiililla varustetut kuvat sovitetaan näytölle.

Miksi puhelinkuvan kirkkaimmat kohdat himmenevät?

Alkuperäinen voi olla HDR-kuva. High dynamic range tarkoittaa laajaa kirkkausaluetta, jolla tummien ja kirkkaiden alueiden ero voi näkyä tavallista suurempana. Tavallinen kuvakopio ei välttämättä säilytä tätä ulkoasua. Etsi vientiasetuksista tavallista kirkkausaluetta tarkoittava SDR-vaihtoehto. Ohjelma voi kutsua sovitusta nimellä tone mapping eli sävykartoitus: HDR-kuvan kirkkaus sovitetaan tavalliselle alueelle. Tarkista etenkin valokohdat ja varjot. Pelkkä väriprofiilin vaihtaminen ei tee tätä. WebKitin HDR-esittely kertoo näytön ominaisuudesta.

Takaako PNG oikeat värit?

Ei. PNG voi säilyttää tallennetut pikseliarvot muuttumattomina, mutta sovelluksen täytyy silti tulkita ne oikein. Kuvamuodon vaihtaminen ei korjaa väärää tai tuntematonta väriprofiilia.

Entä jos suunnittelija toimitti CMYK-kuvan?

CMYK käyttää painamista varten syaania, magentaa, keltaista ja mustaa. RGB käyttää näyttökuviin punaista, vihreää ja sinistä. Pyydä erillinen sRGB-kopio verkkokäyttöön tai tee se värimuunnoksia tukevalla ohjelmalla. Säilytä painotiedoston alkuperäinen versio. Adoben väritilaopas selittää eron.

Miksi logo ei vastaa sivun värikoodia?

Esimerkiksi #336699 on heksadesimaalinen värikoodi, joka määrittää verkkosivulla sRGB-värin. Eri väriprofiililla valmisteltu logo ei välttämättä vastaa sitä. Tarkista myös läpinäkyvyys ja sivun tehosteet. Vertaa logon sisällä olevaa tasaista värialuetta, sillä pehmeissä reunoissa voi olla osittain läpinäkyviä pikseleitä. MDN:n hex-väriohje selittää merkintätavan.