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
    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

Opisany dokładniej w nowszym artykule.

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ą” poleacm instrukcje użycia na końcu artka albo mój programik dodający GUI.

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.

W PNGOUT można wypróbować różne filtry (parametry: /f0, /f5), różną wiekość bloku (próbuj /b64, /b128, /b512), 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ę, więc napisałem do tego program).

PNG i IE6

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

Więcej o kompatybilności PNG.

“pngbehaviour”

Hack działający w IE6. 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.

Dosofobia

Dla OptiPNG jest plugin integrujący z Paint.Net.

Do PNGOUT GUI dodaje oficjalny PNGOUTWin oraz nieoficjalny i prawdopodobnie nielegalny PNGGauntlet. Można jeszcze użyć pluginu PNGOUT dla IrfanView, ale uwaga — IrfanView przy zapisie gubi przezroczystość grafik!

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.

Dla wszystkich tego typu programów 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.