Czy PNG działa wszędzie?

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

IE6	IE7+	Twoja przeglądarka

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

IE6	IE7+	Twoja przeglądarka

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

IE6	IE7+	Twoja przeglądarka

Ł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

Photoshop	IE6	IE7+	Twoja przeglądarka

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:

IE6	Twoja przeglądarka

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:alpha w IE)

IE6	IE7-8	Twoja przeglądarka

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 Safari	Firefox, desktopowe Safari	Twoja przeglądarka

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ąca	Niepasująca

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

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)^1⁄_gamma × 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, JPEG i CSS 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

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

Problemy

pngcrush -rem alla input.png output.png

pngout -s1 -c6 -force file.png