Waarom je foto's na het uploaden vaal ogen

Je bewerkt een productfoto, het rood komt precies overeen met de echte trui, je uploadt hem naar je webshop — en het rood komt terug als baksteen. Het groen wordt olijf. Open het origineel op datzelfde scherm: nog altijd perfect.

Dat is geen compressie, en het platform is je afbeeldingen niet "aan het verpesten". De gebruikelijke oorzaak is een kleurprofiel dat niet klopt: het bestand beschrijft zijn kleuren in de ene taal en de pagina leest diezelfde getallen in een andere.

Waarom dezelfde getallen twee verschillende kleuren opleveren

Een pixel is drie getallen, en 200, 40, 40 is pas een specifiek rood zodra je weet welke kleurruimte het meet. Display P3 duwt de rode primaire kleur verder naar buiten dan sRGB (x 0,68 tegenover 0,64), dus hetzelfde drietal beschrijft een dieper rood. Adobe RGB (1998) houdt de rode en blauwe primaire kleuren van sRGB precies aan en rekt in plaats daarvan de groene op, zodat het extra bereik in groen- en cyaantinten zit. Hoe dan ook betekenen die getallen iets anders voor een browser die sRGB aanneemt.

Het profiel is het briefje waarop staat welke meetlat is gebruikt, en het web valt hard terug op een standaard zodra dat briefje ontbreekt. CSS Color Module Level 4 is er expliciet over: voor compatibiliteit moeten kleuren die in HTML zijn opgegeven, en afbeeldingen zonder tag, worden behandeld alsof ze in de sRGB-kleurruimte zitten, tenzij anders aangegeven. Jouw upload zonder tag geeft nooit iets anders aan, dus sRGB wordt het.

Is je bestand dus geëxporteerd in Adobe RGB of Display P3 en sneuvelt het profiel onderweg — een pipeline die hercodeert, een converter die metadata weggooit — dan worden die getallen met een grote kleuromvang gelezen als sRGB. Geperst in een smallere aanname komen ze er ontzadigd uit: jouw vale look. Welke kleuren eronder lijden, hangt af van de bron: een Adobe RGB-bestand dat als sRGB wordt gelezen verliest zijn kracht in groen- en cyaantinten, terwijl een Display P3-bestand ook verzadigd rood verliest. Neutrale tinten bewegen nauwelijks: niets aan de hand bij een grijze packshot, een ramp bij een koraalkleurig badpak.

Controleer of het aan het bestand ligt en niet aan je scherm

Zet het origineel en de upload naast elkaar in één browservenster.

• Goed in je editor, vlak in de browser: profielprobleem.
• Identiek in de browser maar anders dan in je editor: je editor toont een voorbeeld in een werkruimte die de browser negeert.
• Alleen fout op je telefoon of op de laptop van een collega: verschil in beeldscherm, niet in het bestand.

Sleep daarna het origineel in een browsertabblad — browsers respecteren een ingesloten profiel. Klopt het lokale bestand wel en de upload niet, dan heeft het uploadtraject de tag weggegooid.

Zoek uit welk profiel het bestand draagt

• macOS: open het bestand in Voorvertoning en klik op de knop Info in de werkbalk (of druk op Command-I), en kijk dan op het tabblad Meer info, waar het kleurprofiel van de afbeelding staat vermeld.
• Photoshop: klik op het pijltje in de statusbalk van het document en kies Documentprofiel.
• Lightroom: het uitklapmenu Kleurruimte in het exportvenster is wat je daadwerkelijk hebt geleverd.
• Alles, elk platform: ExifTool drukt het af — exiftool -ProfileDescription photo.jpg.

Voor het web is alles behalve sRGB verdacht. Recente iPhones leggen foto's vast in wide color en taggen het bestand navenant — Apple noemt "wide color capture for photos and Live Photos" in de cameraspecificaties. Sommige Android-telefoons bieden ook een opname-optie met een grote kleuromvang, dus controleer het bestand.

Converteer naar sRGB — niet strippen, niet toewijzen

Drie handelingen die op elkaar lijken doen heel verschillende dingen.

• Strippen haalt het label weg en laat de getallen ongemoeid: data met een grote kleuromvang wordt nu gegarandeerd als sRGB gelezen, wat het alleen maar erger maakt.
• Toewijzen plakt er een ander label op zonder iets te herberekenen, waardoor het uiterlijk verandert, meestal in iets verkeerds.
• Converteren herberekent elke pixel zodat de kleur zo dicht mogelijk blijft als de kleinere ruimte toelaat, en hangt er daarna de sRGB-tag aan.

Converteren is wat je wilt: in Photoshop Bewerken › Omzetten naar profiel, of in Lightroom de Kleurruimte bij export op sRGB. Verwacht dat je meest verzadigde kleuren licht verschuiven.

Het omgekeerde geval: schermafbeeldingen die er te fel uitzien

Zelfde mechanisme, andere richting. Een schermafbeelding van een beeldscherm met een grote kleuromvang legt kleurwaarden vast in de ruimte van dat scherm. Schermafbeeldingen op macOS worden doorgaans opgeslagen met het profiel van het beeldscherm erbij; andere opnametools hangen er misschien geen aan. Teruggelezen als sRGB renderen dezelfde getallen feller dan wat je zag: neongroenen, verbrande huid. Zelfde oplossing.

Waarom dit ertoe doet als je de achtergrond vervangt

Een profiel dat niet klopt is hier niet langer subtiel. Zet een vrijstaand beeld op je merkkleur in remover.bg en plaats die afbeelding daarna op een pagina naast een blok van precies dezelfde hexcode in CSS: de CSS-kleur wordt als sRGB gerenderd.

Draagt de afbeelding een andere tag, dan liggen twee tinten van één kleur naast elkaar die weigeren te matchen. Converteren naar sRGB vóór je uploadt haalt die dubbelzinnigheid bij de bron weg.

Zuiver wit overleeft de conversie ongewijzigd, dus een profiel dat niet klopt laat je op zichzelf niet zakken voor de regels voor een witte achtergrond van een marktplaats — het zijn de productkleuren die eronder lijden. En het formaat redt je niet: PNG, JPEG en WebP dragen allemaal profielen, en worden allemaal verkeerd gelezen zodra de tag ontbreekt, transparante vrijstaande beelden inbegrepen.

Vóór je volgende upload

Zet de kleurruimte bij export één keer op sRGB, in de preset die je echt gebruikt, en het probleem komt niet meer terug. Controleer daarna steekproefsgewijs één upload naast het origineel op één scherm: houden de kleuren stand, dan is je pipeline schoon.