Colour on the web mostly does not matter. A button that renders 3% warmer on someone's monitor costs you nothing.
There is a category where it costs you the sale, and if you build sites for that category you should know which parts of the stack are lying to you.
Where the colour goes
Four places, in order of how often I see them break.
No colour profile on the image. A JPEG with no embedded ICC profile gets interpreted as sRGB by most browsers, which is fine if it was sRGB and wrong if the photographer exported Adobe RGB. Adobe RGB interpreted as sRGB comes out desaturated and slightly cold. Painters notice this immediately, and it reads as your site being broken rather than the export being wrong.
Your pipeline strips the profile. Plenty of resize and optimise steps drop ICC data by default to save bytes. Check yours. sharp keeps it only if you ask:
sharp(input).resize(1600).withMetadata().jpeg({ quality: 88 }).toFile(out)
withMetadata() is the whole fix, and it costs a few hundred bytes.
CSS filters applied for consistency. Someone adds a slight saturate(1.05) to make the gallery pop. On a design portfolio that is you overriding the designer's colour choices with your own, which is an odd thing to do on their site.
Display P3 without a fallback. If you author in P3, browsers that do not support it fall back to whatever the raw values decode to, which can shift hues rather than just flattening them. Use color-gamut media queries or stay in sRGB.
Why these four trades specifically
Makeup artists are the strictest case. Their entire portfolio is colour, and a warm shift makes carefully chosen tones read as a different product. Neutral, high-CRI light and an intact profile are not optional.
Interior designers have the same problem at room scale, and an extra one: a strong interior competes with the person standing in it. Depth of field is doing rhetorical work there, so a compression setting that mushes bokeh into banding is a real cost.
Artists care about accuracy for obvious reasons and often have work photographed under controlled light, which makes any downstream shift more visible, not less.
Musicians and designers are looser, but both trade on a coherent visual identity, and inconsistency across a gallery reads as carelessness.
The house conventions for each are written up: artist, musician, designer, makeup artist and interior design portraits.
The 10 minute check
Export a test image with a known colour patch, run it through your full pipeline, and screenshot it next to the original in the same browser. If they differ, something in the chain is dropping or reinterpreting the profile, and now you know to go looking. Most pipelines I have checked fail this the first time, and a portfolio of headshots is where it shows.
More from this series
- The same portrait at 5 sizes: what breaks at 1200px, 400px, 96px, 48px and 15mm of print
- Building a staff directory: the photo fields you will wish you had added
- Zoom, Teams, Meet and Slack all crop your avatar differently. Here are the numbers.
- Was die kostenlose Version wirklich taugt, und die eine Sache, die sie nicht kann
On BetterPic
Top comments (0)