English version

PNG działa zawsze i wszędzie, z wyjątkiem, kiedy działa nie zawsze i nie wszędzie.

PhotoshopIE6 IE7-8 Safari Mobile Safari Firefox Opera
Paleta z 1-bitowym kanałem alfa
(jak GIF)
Tak Tak Tak Tak Tak Tak Tak
24 bity bez kanału alfa Tak Tak Tak Tak Tak Tak Tak
Paleta z 8-bitowym kanałem alfa Nie Ciut Tak Tak Tak Tak Tak
24 bity z 8-bitowym kanałem alfa Tak Nie Tak Tak Tak Tak Tak
8-bitowy kanał alfa z przezro­czystością CSS
(filter:alphaIE)
Nie Nie Tak Tak Tak Tak
Korekcja gamma Tak trochę nie bardzo, a jak działa, to pogarsza sprawę…
Profile kolorów ICC Tak Nie Nie Tak Nie Tak Nie

PNG pozwala na użycie wielu różnych kombinacji głębi kolorów, stopni przezro­czys­tości i korekcji kolorów. Niektóre kombi­nacje działają idealnie w każdym pro­gramie napisanym w tym stuleciu, a niektóre bardziej egzotyczne opcje są wciąż bezużyteczne.

Paleta z 1-bitowym kanałem alfa
(jak GIF)

IE6IE7+Twoja przeglądarka
ok ok ok

Grafiki PNG z taką samą ilością kolorów i prostą przezro­czys­tością jak w GIF działają we wszys­tkich przeg­lądar­kach (nawet tak starych, jak IE4) bez żadnych hacków. W przypadkach, kiedy możesz użyć GIF, zamiast niego użyj PNG — w rezultacie otrzy­masz taką samą jakość i kompatybilność jak GIF, ale plik będzie mniejszy.

24 bity bez kanału alfa

IE6IE7+Twoja przeglądarka
ok ok ok

24-bitowe grafiki PNG zachowują kolory i krawędzie bez najmniejszej straty jakości, ale odbija się to bardzo nega­tywnie na wiel­kości pliku. Mimo tego, że ten typ działa bezbłędnie we wszystkich przeglądarkach, lepiej go unikać.

Jeżeli potrzebujesz zapisać grafiki z dużą ilością kolorów (i bez ostrych linii/krawędzi), rozważ użycie formatu JPEG.

24 bity z 8-bitowym kanałem alfa

IE6IE7+Twoja przeglądarka
jednolite tło ok ok

Łatwo się spotkać z opinią, że 24-bitowy kolor z przezroczystością to jedyna rzecz, którą potrafi PNG. Niestety, ten typ jest też sławny z tego, że nie do końca działa w IE6. Są na to różne obejścia, ale zazwyczaj słabo współpracujące z CSS i/lub spowalniające IE.

Nawet nie licząc problemów z IE6, ten typ tworzy dość duże pliki, więc lepiej go unikać. Idealnym rozwiązaniem jest typ opisany poniżej:

Paleta z 8-bitowym kanałem alfa

PhotoshopIE6IE7+Twoja przeglądarka
stopnie przezroczystości zaokrąglone do nieprzezroczystych stopnie przezroczystości zaokrąglone do przezroczystych ok ok

Jeżeli do PNG używasz tylko Photoshopa, to możesz błędnie zakładać, że taka kombinacja kolorów i przezro­czystości nie istnieje! Tak naprawdę Photoshop ma mizerne wsparcie dla PNG i nie obsługuje naj­lepszej z możliwych kombinacji.

Ten typ PNG pozwala zachować wielostopniową przezroczystość, a mimo tego nie tworzy plików większych niż GIF!

W paletowym PNG kanał alfa nie jest tak naprawdę osobnym kanałem (maską), a tylko dodatko­wym kom­po­nentem kolorów w palecie. Dzięki temu działa całkiem znośnie w IE6 — nieprzezro­czyste piksele są wyświet­lane normalnie, a wszystkie (pół)przez­ro­czyste stają się całkiem przezro­czyste. W praktyce oznacza to, że w IE6 nie będzie gładkich krawędzi i cieni, ale poza tym grafiki wyświetlą się wystarczająco dobrze:

IE6Twoja przeglądarka
płaski troll alfatroll

Używaj tego typu PNG zawsze, kiedy potrzebujesz półprzezroczystości. Takie pliki można stworzyć za pomocą Macromedia Fireworks. Jeżeli nie masz nic lepszego od Photoshopa, możesz skonwertować 24-bitowe PNG do ośmiu bitów.

24-bity z 8-bitowym kanałem alfa oraz przezro­czystością CSS (filter:alphaIE)

IE6IE7-8Twoja przeglądarka
nieprzezroczyste tło stopnie przezroczystości zaokrąglone do przezroczystych ok

Przezroczystości PNG w połączeniu z filter:alpha(opacity=α) powodują problemy IE7-8: kanał alfa wygląda jak przy­ciem­niający filtr.

Jeżeli możesz, nie mieszaj microsoftowych filtrów z PNG, tylko zrób odpowiednio bardziej przezro­czystą wersję obrazka. Półprzezro­czystości CSS użyte tylko do animacji przejść (fade-in/fade-out) nie będą bardzo rzucały się w oczy, ale jeśli mimo tego chcesz obejść ten błąd, to roz­wiąza­nie jest identyczne jak dla IE6.

PNG z profilami kolorów ICC

IE8, Chrome, Opera, Mobile SafariFirefox, desktopowe SafariTwoja przeglądarka
zakłada sRGB ok ok

Jak bardzo czerwony jest kolor #FF0000? Odpowiedź na to prawie filozo­ficzne pytanie zależy od modelu monitora, jego ustawień, a nawet oświetlenia otoczenia.

Ale co zrobić, gdy chcesz kolor w PNG, który idealnie pasuje do koloru twoich butów? Profile kolorów mają być odpo­wiedzią na to — jakże ważne — pytanie.

W praktyce profile kolorów nie są zbyt użyteczne w Sieci (nawet w tych rzadkich przypadkach, kiedy w ogóle działają).

Gdyby ktoś się pytał, to grafiki w Sieci mają być w przestrzeni kolorów sRGB i mieć gammę 2.2.

Nie włączaj zaawansowanego zarządzania kolorami w programach, nie zapisuj grafik ze specjalnymi profilami kolorów ICC i używaj optyma­li­za­torów PNG, żeby pozbyć się wszelkich osadzonych profili.

PNG z korekcją gamma

PasującaNiepasująca
ok ok

Jeżeli jasność kolorów jest w skali od 0 do 255, to jaką wartość ma kolor, który jest połową jasności 255? Za czasów, gdy PNG był młody, różne systemy opera­cyjne były zgodne tylko co do jednego: to nie było nic w okolicach 127.

Serio. Dla monitorów połowa 255 to nie 127.5, tylko 186! (albo 173, jeżeli masz starą wersję Mac OS X).

jednolite 186 wygląda podobnie, jak kratka z pikseli 0 i 255 Jeżeli kolor 186 nie wygląda mniej więcej jak siatka 0/255, to masz źle skali­bro­wany monitor albo zbugo­wane skalo­wanie w przeg­lądarce.

Ta głupota nazywa się korekcja gamma i wzór na nią jest następujący:

(kolor_zdrowego_rozsądku ÷ 255)1gamma × 255 = kolor_użyty_w_praktyce

To nie jest dziwactwo PNG. Problem wziął się z monitorów CRT, które nie były w stanie równo wyświetlać jasności — sygnał mający ¾ maksy­malnego napięcia dawał tylko ½ jasności. Niektóry systemy opera­cyjne próbowały ten problem zamaskować, a inne nie — stąd rozbieżności.

Twórcy PNG mieli dobre intencje: chcieli ten problem naprawić zapisując w plikach współ­czynnik gamma sys­temu/monitora, na którym stworzono grafikę, co pozwala wiernie odtworzyć jasność na pozostałych systemach.

I to spowodowało głupi problem: przeglądarki poprawiają kolory w PNG, ale nigdzie poza tym. Wszys­tkie kolory w GIF, JPEGCSS pozostają zależne od sys­temu/monitora i mogą być „nie­poprawne”.

Aby uzyskać kolory w PNG, które są jednakowo „niepoprawne” jak wszystkie inne na ekranie, musisz usunąć z plików infor­macje o gammie, co uniemożliwi PNG bycie świętszym od papieża.

Narzędzia PNG

Optymalizacja

Zwyczajne programy zapisujące PNG preferują szybszy zapis kosztem słabszej kom­presji. Ponadto dorzucają bez­użyteczne albo nawet kłopot­liwe metadane, które dodatkowo powiększają pliki.

Optymalizatory PNG to odkręcają. PNGOUT usuwa z plików cały balast i bardzo mocno je kom­presuje. Możesz również użyć pary OptiPNG + Pngcrush. Wszystkie trzy działają z linii poleceń, więc jeśli używasz linuksowa­tych serwerów, to takie coś może się przydać:

find . -name '*.png' -print0 | xargs -P4 -0 -n1 pngout
                                       ↑ liczba procesorów/rdzeni

Dla myszolubów napisałem ImageOptim, który łączy wszys­tkie naj­lepsze narzędzia do optyma­lizacji w jedno GUI dla Mac OS X. Dla Linuksa jest Trimage, a na Windows PNGOUTWinPNGGauntlet.

Niezależnie od tego, które z narzędzi preferujesz, pamiętaj, aby zawsze optymalizować PNG.

Konwersja do ośmiu bitów

Ponieważ Photoshop nie ma jeszcze pełnego wsparcia dla PNG z kanałem alfa, aby otrzymać małe pliki i ładne przezro­czystości, niezbędny jest pngnq lub pngquant. Napisałem proste makowe GUI do tych narzędzi: ImageAlpha.

pngnq używa bardzo fajnego algorytmu opartego o sieci neuronowe, przez co czasem daje nie­prze­widy­walne efekty, np. zmniej­szenie liczby kolorów może poprawić wygląd obrazka (zamiast zawsze używać 256, wypróbuj 255, 254, 253, itd.)

Problemy

ProblemRozwiązanie
Gigantyczne plikiUżyj 256-kolorowych PNG zamiast 24-bitowych (nie zapominaj, że 256-kolorowe również obsługują kanał alfa)
Pliki są nadal większe niż GIFUżyj optymalizatora PNG
Kolory w PNG różnią się jasnością od kolorów w CSSHTMLUsuń informacje o gammie. Optyma­lizatory PNG potrafią to zrobić, np.
pngcrush -rem alla input.png output.png
I tak kolory w PNG są dziwneUpewnij się, że twój program graficzny używa przestrzeni kolorów sRGB (np. włącz opcję Convert to sRGB w Photoshopie przy zapisywaniu dla Sieci)
Obrazek ma szare tło w IE6Użyj PNG8+alpha zamiast 24-bitowych
Obrazek jest niewidoczny IE6Upewnij się, że obrazek ma choć trochę zupełnie nieprzezro­czys­tych pikseli. Możesz użyć mojej wersji pngquant z opcją -iebug.
Photoshop ładuje PNG ze śmieciami w tleMasz do czynienia z PNG8 z kanałem alfa, którego Photoshop nie obsługuje. Do edycji trzymaj PNG w formacie 24-bitowym i konwertuj na PNG8+alpha tylko przy eksporto­waniu na stronę. Możesz wrócić do 24-bitowego formatu ładując i zapisując grafikę w makowym Preview.app, Fireworks albo przez:
pngout -s1 -c6 -force file.png

W skrócie

Prawidłowe użycie PNG nie wymaga wkuwania całego długiego artykułu. Zapamiętaj: