Table of contents

  1. PNG – Jak i dlaczego używać
    1. Zalety PNG
    2. Photoshop nie nadaje się do zapisywania PNG!
    3. Problem gammy
    4. Czego użyć?
    5. Jak jeszcze dobić?
      1. Wybrać najlepszą wersję
      2. Posterize
    6. PNG i IE6
      1. pngbehaviour
      2. Content-Negotiation
    7. Dosofobia

Zalety PNG

Dobrze zapisane grafiki PNG są prawie zawsze mniejsze od GIF. Mają ładniejszy tryb progresywny, są otwartym standardem i mają wiele innych drobnych zalet, ale najważniejszą ze wszystkich jest możliwość użycia kanału alpha (czyli gamy efektów opierających się na połprzezroczystości — realistycznych cieni, rolloverów z jednej grafiki i gładkich krawędzi grafik wpasowujących się w tło).

Photoshop nie nadaje się do zapisywania PNG!

Photoshop (szczególnie wersje przed CS) generuje pliki PNG zawsze większe od GIF. Jakby tego było mało to Photoshop i GIMP udają, że format PNG 256—kolorowy z kanałem alpha nie istnieje. Z tego powodu wiele osób zraziło się do tego formatu i uznało, że jest w praktyce bezużyteczny.

Problem gammy

PNG ma możliwość zapisania gammy monitora. Ma to pozwolić na rzeczywiste odwzorowanie kolorów na różnych systemach i monitorach. Niestety przeglądarki poprawiają gammę PNG, ale nie poprawiają gammy kolorów na stronie (CSS/HTML). W rezultacie tło może być pare procent ciemniejsze niż grafika PNG. Trzeba unikać sytuacji gdzie kolor PNG ma być identyczny z kolorem tła albo usunąć informacje o gammie za pomocą np. PNGCrush.

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB z.png do.png

lub

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB -d folder *.png

albo automatycznie przez PNGOUT.

Czego użyć?

Grafiki można stworzyć w swoim ulubionym programie graficznym i zapisać je jako 24—bitowe pliki PNG z alpha. Następnie trzeba zrobić im „kurację”:

Powyższe to programy pod tzw. command-line. Dla osób z „dosofobią” instrukcje użycia na końcu artka.

PNGOUT przyjmuje tylko pojedynczy obrazek jako argument. Można to obejść wykonując:

for %i in (*.png) do pngout.exe %i

w DOSopodobnych systemach lub

ls -1 *.png | xargs -n1 pngout

pod UNIXowymi.

Można jeszcze użyć pluginu PNGOUT dla IrfanView, ale uwaga – IrfanView przy zapisie gubi przezroczystość grafik! :(

Jak jeszcze dobić?

Wybrać najlepszą wersję

8 bit na początku jest mniejszy, ale 24 bit lepiej się kompresuje. W niektórych przypadkach może się okazać, że PNG 24—bitowy jest mniejszy. Podobnie z opcją interlace — na ogół bez interlace pliki są mniejsze, ale istnieją wyjątki.

W PNGOUT można wypróbować różne filtry (parametry: /f0, /f5), różną wiekość bloku (próbuj /b64, /b128, /b512, /b4096), różną głębie koloru (/d4, /d8). Jak Ci się bardzo nudzi, to zawsze jeszcze pare dodatkowych bajtów tak wyciśniesz :)

Posterize

Dalsze zmniejszenie można uzyskać zmniejszając rozdzielczośc głębi kanałów, czyli zastosować posteryzację. Nie chodzi tu o zmniejszenie obrazka, a o zmniejszenie liczby/precyzji kolorów i poziomów przezrozystości w nim. W większości grafik tj. przyciski zmniejszenie ilości poziomów kanału alpha z 256 do kilkanastu nie daje zauważalnej straty jakości (posteryzacja kanału alpha w photoshop jest zagmatwaną operacją – wymaga przeniesienia przezroczystości na maskę).

PNG i IE6

Pliki PNG z 1—bitową przezroczystością (taką jak w GIF) działają bezproblemowo wszędzie, nawet w IE6.

IE6 ma problem z wyświetlaniem PNG z 8—bitowym kanałem alpha. Jeśli plik jest 24bitowy + 8bit alpha, to wyświetla szare tło. Jeśli jest 8bitowy + 8bit alpha, to degraduje kanał alpha do 1 bitu.

Poprawienie tego buga zajęło Microsoftowi 6 lat obijania się i 3 tygodnie pracy. Póki IE6 nie wymrze, trzeba będzie z nim żyć, ale na szczęście jest na to kilka sposobów (zmiana przeglądarki jest najlepszym, ale nie trzeba od razu wzniecać rewolucji).

„pngbehaviour”

Hack działający w MSIE5.5 i 6. Pozwala poprawnie wyświetlić PNG osadzone w <img>, koniecznie z podaną wysokością i szerokością. Zaaplikowany do grafik PNG w CSS może działać dziwnie.

Content-Negotiation

Jeśli się używa jakiś skryptów po stronie serwera to można zaserwować Explorerowi to, na co zasługuje, czyli posiekane ditheringiem grafiki w GIF (lub odwrotnie rozumując — lepsze grafiki lepszym przeglądarkom).
Zaserwowanie GIF-ów wyłącznie Explorerowi to sztuka trudniejsza niż się wydaje, ponieważ przeglądarki różne bzdury wysyłają w nagłówkach. W świecie idealnym to by było:

ale Explorer postanowił być złym do szpiku kości i czasem podaje nagłówek Accept jedynie o treści */*. Jakby tego było mało to makowe Safari (świetnie obsługujące PNGi) robi to samo. Zatem dodatkowo:

Może by się udało to zrobić wykorzystując Content-Negotiation albo mod_rewrite z Apache. Mi wygodniej było poprostu to naskrobać w PHP (Ważne: jeśli piszesz to w PHP, to dodaj header('Cache-Control: max-age=10000');)

Dosofobia

Polecam użycie Directory Opus lub podobnego narzędzia i podpięcie tej funkcji pod button/menu.

Można też utworzyć plik.bat o treści:

C:\ścieżka\do\programu\program.exe -para -metry %1

i przeciągać na niego ikony plików (%1 zostanie podmienione na ścieżkę do przeciągniętego pliku)

Inny sposób to utworzyć skrót do programu, wyedytować go („Właściwości”), dopisac parametry (hint: *.png) do ścieżki i wyczyścić „rozpocznij w”.

Jeśli już na prawdę nie wiesz co zrobić, to:

Pod innymi systemami operacyjnymi postępuje się analogicznie dla Terminal lub XTerm.