El problema
Quan s'usa una imatge que té un color que ha de ser igual a un color definit al CSS de tal manera que es “confonguin” en alguns casos aquest resultat no es pot aconseguir en tots els navegadors.
El context
Com que és un tema molt complex ho explicaré breument. Qui vulgui aprofundir que llegeixi els recursos relacionats.
La interpretació del color està subjecte a un perfil que interpretarà el Sistema Operatiu o l'aplicació visualitzadora. En el cas d'una imatge el perfil el pot dur incrustat (embedded) o marcat (tagged).
Concretant en els navegadors i en JPG i PNG:
- Només el Safari interpreta el perfil incrustat d'una imatge. La resta ho tracten igual com si no en tingués, usant sRGB.
- Cap navegador interpreta correctament un perfil marcat.
- Si la imatge no té perfil, tots els navegadors apliquen sRGB excepte Safari.
El resultat és que ningú no ho fa bé.
Els PNG a més a més tenen una variable més: la correcció de gamma. Aquesta en teoria hauria d'ajudar a adequar-se al dispositiu de sortida però un mal ús (manca de calibració del color del dispositiu de sortida) sumat a que actualment els CSS no tenen correcció de gamma sumat a una implementació dubtosa la fan ser un problema.
Eliminant la gamma dels PNG teòricament el problema es simplificaria i milloraria la consistència entre navegadors.
La solució
La solució passa pel següent:
- Pensa-t'ho dues vegades abans de posar una imatge amb un fons que hagi de ser igual que un color de fons via CSS.
- Torna-t'ho a pensar.
- Usa un JPG amb perfil sRGB si et surt a compte l'augment de tamany que comporta tenir-lo.
- Usa un PNG de 8 bits amb color transparent. D'aquesta manera pots haver-hi problemes si la imatge té degradats (p.ex. un anti-aliasing).
- Usa un GIF.
Gràcies a l'Oscar per la col·laboració i la paciència.
Recursos relacionats
- The Sad Story of PNG Gamma “Correction”
- Digital-Image Color Spaces (test dels perfils en diferents situacions)
- This is your Mac on drugs
- ColorSync in Mozilla
- Gamma correction (CSS3 Color Module)
- Windows Vista with improved color management
- GammaSlamma (Aplicació per Mac OS X per eliminar la gamma d'un PNG)
- Pngcrush (Optimitzador de PNG, per Linux, Unix i MSDOS)
Comentaris
Comentat per Adrià García el 21/02/07
L'etern merder.
Comentat per enric el 23/02/07
home, si fas els png sense correcció de color tot anirà bé a tot arreu, ja que la opció per defecte de correcció de color ha de ser la mateixa que pels jpeg i pels gif, que coincideix amb la del html i css. Els navegadors que intenten "endevinar" una correcció de color i la caguen, en tenen tota la culpa, i segons ho veig el problema és d'ells.
Comentat per are el 24/02/07
Anirà bé a tot arreu excepte a Safari que no usa sRGB com a perfil per defecte i per tant es veurà malament en aquest.
Comentat per SigT el 07/10/07
Aproximación al problema del color: imagen vs CSS...
Traducción una entrada de a.css (originalmente en catalán) sobre los problemas relacionados al color con imágenes y CSS.
El original está en Aproximació al problema del color (imatge vs. CSS)
El problema
Cuando se usa una imagen que tie...