Waarom zien de kleuren van mijn afbeeldingen er anders uit op mijn website?

Vergelijk drie versies van dezelfde afbeelding

Een foto ziet er goed uit in je beeldeditor, maar de kleuren veranderen op je website. Je wilt de foto misschien lichter of kleurrijker maken. Controleer eerst of het probleem bij de afbeelding, de pagina of het scherm ligt.

Vergelijk het origineel, de kopie die je voor de website hebt opgeslagen en de afbeelding die de website daadwerkelijk toont. Een afgewerkte kopie opslaan vanuit een editor heet vaak exporteren. Daarna kan de website een eigen verkleinde of gecomprimeerde versie maken.

1. Bewaar het origineel. Gebruik de oorspronkelijke foto of het bewerkbare ontwerpbestand als referentie. Werk met kopieën zodat je kunt teruggaan naar het origineel.
2. Controleer de opgeslagen kopie. Open die in je beeldeditor naast het origineel. Sleep het bestand ook naar een browsertabblad om te zien hoe het daar wordt weergegeven.
3. Controleer de websiteversie. Klik op een computer met de rechtermuisknop op de afbeelding op de gepubliceerde pagina. Zoek Afbeelding openen in nieuw tabblad of een vergelijkbare optie. Verderop lees je wat je kunt doen als die ontbreekt.
4. Vergelijk hetzelfde deel. Gebruik hetzelfde scherm, ongeveer dezelfde weergavegrootte en een vergelijkbare achtergrond. Kies een deel waar het verschil duidelijk is, zoals de stof van een product of een egaal gekleurd vlak in een logo.

Laat helderheid en andere scherminstellingen voorlopig staan. Als je de ene afbeelding op een telefoon bekijkt en de andere op een laptop, is moeilijker te bepalen of het bestand of het scherm het verschil veroorzaakt.

Kies je volgende controle op basis van het verschil

Wat is een kleurprofiel en waarom is het belangrijk?

Een afbeelding slaat kleuren op als getallen. Een kleurprofiel vertelt een app hoe die getallen eruit moeten zien. Als het profiel in het afbeeldingsbestand wordt opgeslagen, heet het een ingesloten profiel. Je kunt ook de term ICC-profiel tegenkomen. Die verwijst naar de standaard voor deze profielen. De veelgestelde vragen van het International Color Consortium leggen uit hoe ze werken.

sRGB is een veelgebruikte manier om kleuren voor webafbeeldingen te definiëren. Zie het als gezamenlijke instructies voor kleurweergave. Het is een praktische keuze voor gewone foto's en illustraties die op veel apparaten worden bekeken. Adobe RGB en Display P3 definiëren andere, grotere kleurbereiken.

Ontbreekt kleurinformatie of wordt die verkeerd gelezen, dan kan een app de afbeelding anders weergeven. Een ontbrekend profiel betekent echter niet automatisch dat het bestand onjuist is. Een afbeelding die al voor sRGB is voorbereid, kan er nog steeds uitzien zoals bedoeld. Het probleem ontstaat als een app verkeerde instructies voor de kleuren aanneemt. Lees Adobes uitleg over afbeeldingsprofielen.

Een scherm heeft ook een eigen profiel dat de kleurweergave van dat scherm beschrijft. Houd dat gescheiden van het afbeeldingsprofiel: het profiel van jouw monitor hoort niet in alle webafbeeldingen voor je bezoekers.

Converteer de kleuren in plaats van alleen het profiel te wijzigen

Beeldeditors kunnen zowel Assign Profile (profiel toewijzen) als Convert to Profile (omzetten in profiel) aanbieden. Ze doen verschillende dingen:

• Een profiel toewijzen geeft bestaande kleurgetallen een andere betekenis. De getallen blijven gelijk, maar de afbeelding kan er anders uitzien.
• Omzetten in een profiel past de getallen aan de nieuwe kleurinstructies aan, met als doel het uiterlijk van de afbeelding te behouden.

Gebruik conversie om een sRGB-kopie te maken van een Adobe RGB-afbeelding waarvan het profiel correct is vastgesteld. Alleen sRGB toewijzen kan de kleuren veranderen. Sommige zeer levendige kleuren zijn niet exact te reproduceren binnen het kleinere sRGB-bereik, dus bekijk het resultaat. Adobes profielinstructies beschrijven beide opdrachten.

Is het oorspronkelijke profiel onbekend? Zoek dan het originele ontwerpbestand of vraag het aan de maker. Kies geen profiel alleen omdat het de afbeelding kleurrijker maakt. Een editor kan bij het openen een profiel hebben aangenomen. Het profiel dat hij nu meldt, bewijst dus niet met welk profiel de afbeelding is gemaakt.

Sla een webkopie met sRGB-kleuren op

Maak voor een gewone websitefoto of illustratie een aparte sRGB-kopie en bewaar het origineel. Je hebt een editor nodig die kleurconversie ondersteunt, bijvoorbeeld Photoshop. Andere editors bieden mogelijk Convert to sRGB in hun exportinstellingen. De Photoshop-menunamen hieronder komen uit de Engelse interface.

1. Controleer het profiel van het origineel. Zoek de kleurinstellingen van het document. Open in Photoshop Edit → Convert to Profile en lees Source Space. Meldt de app een ontbrekend profiel, controleer dan de instellingen van het originele bestand of vraag de maker, in plaats van te gokken.
2. Kies sRGB voor de kopie. Selecteer in het conversievenster sRGB IEC61966-2.1 als doel. Zet Preview aan om de wijziging te bekijken en bevestig daarna. Adobe heeft de volledige Photoshop-handleiding.
3. Sla de kopie op of exporteer de kopie. Biedt de editor Embed Color Profile aan, sluit dan het bijbehorende sRGB-profiel in. Conversie wijzigt de kleurgetallen; insluiten bewaart de instructies om ze te lezen.
4. Open het opgeslagen bestand opnieuw. Controleer het in de editor en de browser voordat je het uploadt. Gebruik een andere bestandsnaam om de nieuwe kopie te herkennen.

Heeft je editor geen kleurprofielinstellingen, raadpleeg dan de documentatie over het exporteren van kleuren. Vraag de ontwerper om een sRGB-webkopie als je de instellingen zelf niet kunt controleren.

Kies het bestandsformaat apart. JPG is vaak geschikt voor foto's; PNG kan handig zijn voor illustraties met een transparante achtergrond. Onze gids voor webafbeeldingsformaten legt de keuzes uit. Alleen van JPG naar PNG overstappen herstelt geen onjuiste kleurinformatie.

Controleer of de website de afbeelding verandert

Ziet het opgeslagen bestand er goed uit, maar de afbeelding op de website niet? Bekijk dan wat er na het uploaden gebeurt. Een websitebouwer, afbeeldingsplug-in of dienst die afbeeldingen aan bezoekers levert kan de afmetingen aanpassen, het bestand comprimeren of het formaat wijzigen.

Begin met de afbeelding die je in een eigen tabblad hebt geopend. Sla die kopie op je computer op en vergelijk die in dezelfde beeldeditor met het geüploade bestand. Kleinere afmetingen bewijzen geen kleurprobleem, maar laten zien dat je mogelijk verschillende versies vergelijkt.

Als je de afbeelding niet rechtstreeks kunt openen

De ontwikkelaarstools van de browser laten zien welk bestand de pagina laadt. Dit gaat het makkelijkst op een computer:

1. Open de pagina en zoek in het browsermenu naar Ontwikkelaarstools of Developer tools, vaak onder Meer hulpprogramma's.
2. Kies het tabblad Network of Netwerk en laad de pagina opnieuw. Je krijgt een lijst van geladen bestanden.
3. Gebruik het afbeeldingsfilter, meestal Img of Images. Selecteer een bestand en bekijk Preview of het voorbeeldtabblad om je afbeelding te vinden.
4. Klik met de rechtermuisknop op de regel en kies, indien beschikbaar, Openen in nieuw tabblad. Kopieer anders het webadres, ook URL genoemd, naar een nieuw browsertabblad. Sla de afbeelding op voor de vergelijking.

De Chrome-handleiding voor het Network-paneel illustreert deze tools. Menunamen en indeling verschillen per browser en taal.

De pagina kan op een telefoon en een computer andere afbeeldingsbestanden kiezen. De gids voor responsieve afbeeldingen legt dat verder uit.

Beheer je de technische instellingen niet zelf, stuur dan het geüploade bestand en de websitekopie naar de verantwoordelijke persoon. Vraag of de beeldverwerking het kleurprofiel verwijdert of kleuren verkeerd omzet. Na een correctie moet de site mogelijk nieuwe afbeeldingsversies maken en de cache wissen. De cache bewaart eerder gemaakte bestanden. Controleer of je de nieuwe versie bekijkt.

Kleurinformatie is iets anders dan privégegevens, zoals de GPS-locatie van een foto. Als je alle metadata verwijdert, dus de extra informatie die bij de afbeelding is opgeslagen, kan ook het kleurprofiel verdwijnen. Controleer zowel privacy als uiterlijk wanneer je een kopie maakt om te delen. De gids voor fotometadata behandelt die stappen.

Controleer pagina-effecten en de achtergrond

Klopt de websiteafbeelding in een eigen tabblad, maar ziet de afbeelding er op de pagina anders uit? Dan kan de pagina de weergave veranderen. Probeer het lichte en donkere thema en kijk of de afbeelding verandert wanneer je de aanwijzer erover beweegt.

• Kleur- en helderheidseffecten: een thema kan afbeeldingen donkerder, minder kleurrijk of grijs maken. Deze effecten heten vaak filters. De MDN-referentie voor filter laat de werking zien.
• Gedeeltelijke transparantie: de afbeelding of de omliggende sectie kan de achtergrond laten doorschijnen, waardoor kleuren flets lijken. Dit heet dekking of opacity. Ook een instelling op de omliggende sectie kan de afbeelding beïnvloeden; zie MDN's uitleg van opacity.
• Een laag over de afbeelding: een gekleurde overlay of een effect bij het aanwijzen kan het beeld een tint geven zonder het bestand te veranderen.
• Een andere achtergrond: transparante en deels transparante gebieden mengen met de pagina-achtergrond. Ook dekkende kleuren kunnen anders lijken met wit eromheen dan met donkergrijs.

Vergelijk een transparante afbeelding op dezelfde achtergrond als in het ontwerp. Oogt zij alleen op één achtergrond verkeerd, beoordeel dan het ontwerp voor die plek. De gids voor transparante achtergronden legt de mogelijkheden uit.

Zoek naar afbeeldingseffecten in de pagina-editor of thema-instellingen. Heb je hulp nodig, vertel de ontwikkelaar dan dat de afbeelding op zichzelf goed wordt weergegeven en vraag om filters, dekking en overlays te controleren. Individuele stijlregels kunnen tijdelijk worden uitgeschakeld om de oorzaak te vinden. De MDN-gids voor CSS-foutopsporing beschrijft die methode.

Vergelijk schermen onder vergelijkbare omstandigheden

Ziet hetzelfde bestand er op twee schermen anders uit, laat het bestand dan ongewijzigd terwijl je de displays controleert. Helderheid, kamerverlichting en de mogelijkheden van het scherm beïnvloeden wat je ziet.

Zet functies die het beeld bewust aanpassen tijdelijk uit. Apple's Night Shift maakt het scherm warmer; True Tone past kleur en intensiteit aan het omgevingslicht aan. Bekijk Apple's uitleg over scherminstellingen. Zoek op andere apparaten naar een blauwlichtfilter, nachtmodus of een stand voor levendige kleuren.

Heeft de hele pagina een vergelijkbaar warme of levendige uitstraling, begin dan bij de scherminstellingen. Verschilt slechts één foto, bekijk dan de kleurinformatie van die foto en controleer of het een HDR-afbeelding is. HDR wordt uitgelegd in de veelgestelde vragen.

Moeten productkleuren voor je werk betrouwbaar zijn, dan is een gekalibreerd scherm een betere referentie. Kalibratie stelt het scherm af op een bekend doel; een schermprofiel beschrijft hoe het kleuren weergeeft. De ICC-FAQ leggen die rollen uit. Een goede beeldvoorbereiding helpt bij een consistente weergave, maar maakt niet alle schermen van bezoekers gelijk.

Voorbeeld: een productfoto oogt flets in de browser

Stel je een productfoto voor waarvan het originele bestand een bekend Adobe RGB-profiel bevat. De foto klopt in de editor, maar de opgeslagen kopie ziet er flets uit in de browser. Dit is een denkbeeldig voorbeeld: profielverlies beïnvloedt niet elke afbeelding op dezelfde manier.

1. Vind het eerste verschil. Het opgeslagen bestand wijkt al af voordat je het uploadt. Begin daarom bij de exportinstellingen.
2. Controleer wat is opgeslagen. In dit voorbeeld verdween het Adobe RGB-profiel bij het exporteren zonder dat de kleuren naar sRGB werden omgezet.
3. Maak een nieuwe kopie van het origineel. Zet die om naar sRGB en sla de bijbehorende profielinformatie op.
4. Vergelijk vóór het uploaden. Open de nieuwe kopie in de editor en de browser op hetzelfde scherm.
5. Controleer ook de website. Upload de kopie en vergelijk de afbeelding die de pagina werkelijk gebruikt.

Meer verzadiging maakt de kleuren levendiger. Daardoor kan de eerste export er in de ene app beter uitzien, maar in een andere te kleurrijk worden. De export corrigeren pakt de oorzaak aan en houdt het origineel bruikbaar voor andere doelen.

Gebruik Pixilo zodra de kleuren goed zijn

Heeft de opgeslagen kopie de gewenste kleuren, gebruik Pixilo dan om de afmetingen aan te passen aan de pagina of de bestandsgrootte te verkleinen. Bewaar de voorbereide kopie om met de download te vergelijken.

Pixilo kan schalen en comprimeren, maar heeft geen instellingen om kleurprofielen te herstellen of te selecteren. Bij het schalen en bij veel formaatconversies tekent de browser de afbeelding opnieuw. Wil je Display P3- of HDR-eigenschappen behouden, controleer de uitvoer dan zorgvuldig. Ga er niet van uit dat elke bewerking ze behoudt.

Begin met één afbeelding voordat je meerdere verwerkt. Vergelijk belangrijke kleuren en details na het downloaden en bekijk daarna het gepubliceerde resultaat. Ontstaat het verschil pas na het uploaden, onderzoek dan de beeldverwerking van de website of de pagina-effecten.

Veelgestelde vragen

Moet ik Display P3-afbeeldingen altijd naar sRGB omzetten?

Nee. Display P3 biedt een groter kleurbereik en kan nuttig zijn als de website en de apparaten van bezoekers het ondersteunen. Weet je niet hoe je website ermee omgaat, dan is een sRGB-kopie voor gewoon publiceren een eenvoudiger begin. Bewaar het origineel. WebKit legt uit hoe afbeeldingen met een profiel op een scherm worden afgestemd.

Waarom worden de helderste delen van mijn telefoonfoto minder helder?

Het origineel kan HDR zijn, kort voor high dynamic range. Dat betekent een groter helderheidsbereik, waarmee het verschil tussen donkere en heldere delen groter kan zijn. Een standaardkopie behoudt dat uiterlijk mogelijk niet. Zoek een exportoptie voor het standaardbereik, ook SDR genoemd. De editor kan de aanpassing tone mapping noemen: HDR-helderheid passend maken voor het standaardbereik. Controleer vooral lichte delen en schaduwen. Alleen het kleurprofiel wijzigen voert die aanpassing niet uit. Het HDR-overzicht van WebKit legt de schermfunctie uit.

Garandeert PNG correcte kleuren?

Nee. PNG kan opgeslagen pixelwaarden ongewijzigd houden, maar de app moet die waarden nog steeds juist lezen. Een ander bestandsformaat herstelt geen verkeerd of onbekend kleurprofiel.

Wat doe ik als de ontwerper een CMYK-afbeelding stuurt?

CMYK gebruikt cyaan, magenta, geel en zwart voor drukwerk. RGB gebruikt rood, groen en blauw voor schermbeelden. Vraag om een aparte sRGB-webkopie of maak die in een editor met kleurconversie. Bewaar het origineel voor drukwerk. Adobes gids voor kleurmodi legt het verschil uit.

Waarom komt mijn logo niet overeen met de kleurcode van de pagina?

Een code zoals #336699 is een hexadecimale kleurcode. Op een webpagina beschrijft die een sRGB-kleur. Een logo met andere kleurinstructies hoeft daar niet mee overeen te komen. Controleer ook transparantie en pagina-effecten. Vergelijk een egaal vlak binnen het logo, want gladde randen kunnen deels transparante pixels bevatten. De MDN-referentie voor hexkleuren legt de notatie uit.