Jakiś czas temu, kiedy pracowałem nad sajtem, i koniecznie (jak mi się wydawało) potrzebowałem wielostopniowej przezroczystości w obrazkach, trafiłem na dziwną przypadłość formatu PNG – a mianowicie różne wyświetlanie kolorów przez IE i Firefoxa. Jakoś jednak udało mi się obejść problem przezroczystości i załatwiłem całą sprawę na tradycyjnych JPEGach i GIFach. Ostatnio jednak, pracując na inną stroną, znowu wdepnąłem w ten sam problem – oto jak się to mniej więcej prezentowało:

Różnica w wyświetlaniu kolorów w PNG pod IE i Fx

To, co widać na screenie, to niebieskie tło w JPEG, przykryte stopniowo zanikającym obrazkiem PNG. Tym razem jednak naprawdę mnie to zdenerwowało – pogooglałem, pogooglałem – i oto co znalazłem: ‘The Sad Story of PNG Gamma “Correction”’. Nie wdając się w techniczne detale (które i tak mnie mało interesują w tym przypadku) – wygląda na to, że twórcy formatu PNG wymyślili, że potrzebny jest jakiś rodzaj korekcji gammy pomiędzy systemem, na którym zapisano PNGka, a systemem, na którym jest wyświetlany. Format PNG przewiduje nawet specjalne miejsce w pliku na przechowywanie informacji o ustawieniach gamma systemu, na którym zapisany jest plik. Problem polega jednak na tym, że w większości wypadków programy zapisujące PNG ZGADUJĄ ustawienia systemowe, bo nie są w stanie ich odczytać. Podczas wyświetlania takiego pliku następuje wówczas „korekcja” danych, które i tak wzięte były z sufitu. Pięknie :] Jaki ma to zatem wpływ na osoby zajmujące się produkcją obrazków w tym formacie? Oto cytat ze wspomnianej wcześniej strony:

Nie ma sposobu na zmuszenie obrazków PNG do zgodności z kolorami w CSS. Zmniejsza to użyteczność skądinąd świetnego formatu graficznego. Jeśli kolory obrazka i kolory zdefiniowane w CSS muszą do siebie pasować, bezpieczniej jest używać GIFów lub JPEGów. Jeśli chcesz używać PNG i nie zależy Ci na starszych przeglądarkach (szczególnie na pre-Tigerowym Safari), najlepszym wyjściem jest usunięcie wszelkich informacji o przestrzeni kolorów z plików PNG [...]

Od siebie mogę dodać tylko tyle, że oprócz niezgodności kolorów PNG-CSS, występują jeszcze niezgodności PNG-GIF i PNG-JPEG. Jeśli chodzi o zasugerowany sposób obejścia problemu (usunięcie informacji o przestrzeni kolorów z PNG) – Photoshop nie pozwala na taką operację na pliku PNG (albo ja nie umiem tego znaleźć). Jedyne, na co wpadłem, to załadowanie wyeksportowanego wcześniej w PS PNGka do… GIMP Shopa, i ponowny eksport (a ponieważ PNG 24-bit jest formatem bezstratnym – nie pogarsza się jakość takiego pliku). O ile dobrze rozumiem, wystarczy odznaczyć opcję „Save gamma”:

Opcje zapisu PNG w GIMP Shopie

Śmigając po CSS Manii wpadłem na ciekawy patent na załatwienie bloku logowania (na jakimś czeskim sajcie). Niby proste, ale sprytnie pozwala zaoszczędzić trochę miejsca. Poza tym nie odciąga wzroku tym użytkownikom, którzy nie są zainteresowani logowaniem się.