PNG, kolory a webdesign

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
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
Opcje zapisu PNG w GIMP Shopie

Komentarze

  1. Alan Madej

    Miałem podobny problem z szablonem WordPressa. Gdy wyedytowałem plik z logo, okazało się, że przestał pasować do tła strony. Rozwiązaniem jest usunięcie nagłówków odpowiedzialnych za korekcję gamma w pliku PNG. Dokładniej opisałem to na swoim blogu http://blog.alanmadej.pl/?p=450
    Pozdrawiam serdecznie,
    AM

Dodaj komentarz