Ook ik ben ooit op een Windows PC begonnen met webdesign. Als een design voor een website dan af was sloeg ik de slices ‘gewoon’ op en bouwde er een HTML lay-out omheen. Dit ging allemaal prima, totdat ik (inmiddels al weer een tijd terug) een Mac kreeg. Kleuren van afbeeldingen klopten niet altijd en ik had geen idee waardoor dit kwam. Na een tijdje zoeken kwam ik erachter dat ik daar in Safari wel last van had, maar in Firefox niet. Het was best lastig om de oorzaak te vinden: kleurprofielen.

Toen ik afgelopen weekend op de website van de HEMA keek, zag ik daar een mooi voorbeeld van het probleem waar ik iets meer dan een jaar geleden ook mee worstelde. Waarschijnlijk weten de webbouwers van de HEMA-site ook niet dat ze last hebben van dit probleem omdat ze naar alle waarschijnlijkheid geen Mac hebben.

De site ziet er als volgt uit in Firefox:

En hieronder zie je hoe dit er in Safari uitziet:

Dit zijn de punten waarop het verkeerd gaat:

Het probleem

De rode achtergrondkleur (zowel bovenaan als bij het menu links) is geen afbeelding en de menuknoppen wel. Omdat die afbeeldingen inclusief een kleurprofiel zijn opgeslagen krijg je kleurverschil. In de meeste browsers heb je hier geen last van maar in Safari wel. Safari houdt namelijk rekening met kleurprofielen en dat doen andere browsers niet. Dit geldt overigens alleen op de Mac, als je de Windows-versie van Safari gebruikt, zul je geen verschil met Firefox zien.

De oplossing

De oplossing is niet heel lastig, het duurt alleen even voordat je erachter bent. Je moet namelijk alle kleurprofielen verwijderen uit je afbeeldingen. Stel eerst je Photoshop-bestand in op “Don’t Color Manage This Document” en gebruik gewoon de “Save for Web & Devices”-optie om de afbeeldingen op te slaan. Als het goed is, is je probleem dan verholpen.