Najpopularniejszymi formatami graficznymi używanymi przez twórców stron WWW są od lat JPEG i GIF. Czy zawsze jednak są także najlepszym możliwym rozwiązaniem? Grafiki można zapisać do pliku, używając różnych formatów graficznych. Nie ma jednego uniwersalnego sposobu zapisu obrazów, każdy ma swoje mocne i słabe strony. Formaty plików graficznych można podzielić na formaty przechowujące grafikę rastrową oraz te przechowujące grafikę wektorową.
W grafice wektorowej zapis obrazu oparty jest na formułach matematycznych. Jest to obraz, którego poszczególne elementy to fragmenty linii prostych i łuków będących częściami figur geometrycznych oraz wszelkie złożenia tych tworów. Każdy element obrazu jest opisany za pomocą pewnej liczby cech (położenie, barwa itp.), których wartości można zmieniać podczas edycji. Mówimy, że obraz jest \”kreślony\” element po elemencie.
W grafice rastrowej obrazy tworzone są z położonych blisko siebie punktów – pikseli o różnorodnym kolorze, które w efekcie stwarzają pozorny obraz ciągły. Skalowanie i zmiana rozdzielczości grafiki rastrowej wiąże się z utratą jakości obrazka. Jednak plików zapisywanych w grafice wektorowej, mimo ich niewątpliwych zalet w przypadku rysunków (skalowalność, mniejsze rozmiary pliku), nie umieszcza się na stronach WWW ze względu na nieistnienie standardu interpretowanego przez wszystkie przeglądarki.
W dodatku format najbardziej rozpowszechniony (Encapsulated PostScript) nie jest interpretowany przez żadną z przeglądarek. Formaty przechowujące grafikę rastrową, podzielić możemy ze względu na rodzaj kompresji danych na dwie główne kategorie: stratne i bezstratne.
JPEG
Najpopularniejszym przedstawicielem pierwszej kategorii jest JPEG. Stosuje on kompresję stratną, co oznacza, że podczas jego zapisywania tracona jest bezpowrotnie część pierwotnej informacji.
Format JPEG (zwany też JPG) jest przeznaczony do obrazów, które nie mają zbyt wielu szczegółów, a więc nie najlepiej nadaje się do szczegółowych, ale niewielkich ilustracji, które mają ostre krawędzie lub małe detale.
Format ten obsługuje 24-bitową głębię koloru, co daje w przybliżeniu 17 milionów kolorów. Dzięki takiej liczbie obsługiwanych barw, JPG znakomicie nadaje się do zapisywania dużych obrazów, takich jak na przykład zdjęcia.
GIF
Do drugiej kategorii rastrowych plików graficznych (używających kompresji bezstratnej) należą GIF i PNG, które po dekompresji pozostają identyczne z oryginalną wersją (nie tracą na jakości). Format GIF, ze względu na zastosowany sposób kompresji, najlepiej nadaje się do publikacji w internecie obrazków o małej liczbie kolorów i takich, gdzie można spotkać sąsiadujące ze sobą punkty o identycznej barwie, np. rysunków lub małych zdjęć. Jego używanie jest również wskazane w przypadku tworzenia napisów, a to ze względu na możliwość stosowania przezroczystości.
Napisy w grafikach GIF podlegają także wydajnej kompresji, głównie dlatego, że są one jednokolorowe (nie licząc oczywiście kolorów odpowiedzialnych za antyaliasing, czyli wygładzanie za pomocą kolorów przejściowych w stosunku do koloru tła). Format GIF jest dość szeroko stosowany nie tylko w internecie.
Został stworzony w 1987 roku na zamówienie firmy CompuServe, a następnie udoskonalony (do formatu GIF89a, obsługującego przezroczystość) w 1989 roku. Liczy więc sobie prawie 20 lat, towarzysząc komputerom osobistym praktycznie od zawsze.
PNG
Z historią Graphics Interchange Format, czyli popularnego GIF-a, łączy się powstanie formatu Portable Network Graphics, w skrócie PNG. Format ten stworzony został w roku 1995, wskutek ogłoszenia przez firmy Unisys oraz CompuServe roszczeń patentowych dotyczących kompresji LZW stosowanej w formacie GIF.
W przeciwieństwie do formatu GIF, PNG nie używa zastrzeżonych algorytmów, dzięki czemu można go wykorzystywać bezpłatnie, a co ważniejsze, wszyscy mają jednakowy dostęp do jego pełnej specyfikacji.
PNG uznawany jest powszechnie za następcę GIF-a. Oferuje bowiem znacznie większe możliwości niż jego poprzednik (patrz ramka). Dlaczego więc PNG nadal jest formatem tak mało popularnym? Wynika to głównie z niewiedzy webmasterów. Poniżej prezentujemy zbiór najczęściej popełnianych błędów i problemów, jakie mogą napotykać webmasterzy eksperymentujący z PNG.
Problem z generowaniem plików PNG
Już po pierwszym spotkaniu z formatem PNG można zauważyć, że najpopularniejsze programy do edycji grafiki, czyli Adobe Photoshop oraz GIMP, generują pliki PNG większe od plików GIF. Co więcej, nie pozwalają także na zapis pliku PNG w trybie 256-kolorowym z kanałem alpha (odpowiadającym za obsługę przezroczystości). Z tego powodu wiele osób zraziło się do PNG i uznało, że w praktyce format ten jest bezużyteczny. Czy jest tak w rzeczywistości?
Oczywiście że nie. Wystarczy tylko skorzystać z odpowiednich narzędzi. W sieci dostępne są programy, takie jak np. PNGOUT i optipng, które potrafią optymalizować pliki PNG. Sprawdzają one ogromną ilość kombinacji filtrów PNG i parametrów kompresora gzip, generując w rezultacie pliki o dużo mniejszej objętości niż zapisywane popularnymi programami graficznymi. Dzięki temu zabiegowi wygenerowane w dowolnym programie graficznym 24-bitowe pliki PNG z kanałem alpha można później poddać sprawnej obróbce.
Błędna korekcja gamma
PNG ma możliwość zapisania korekcji gamma monitora, która reguluje kontrast obrazu. Ma to pozwolić na rzeczywiste odwzorowanie kolorów na różnych systemach i monitorach. Niestety, przeglądarki poprawnie odczytują korekcję gamma plików PNG, ale już nie kolorów zapisanych w kodzie strony (CSS/HTML). W rezultacie tło może być o kilka procent ciemniejsze niż grafika PNG. Aby uniknąć takiej sytuacji, należy usunąć informacje o gammie za pomocą programu PNGCrush.
Wszystko o PNG
http://pornel.net/pnghowto Strona domowa porneLa, a konkretniej dział dotyczący formatu PNG, to wspaniała skarbnica wiedzy na temat tego systemu kompresji grafiki.
Wersję instalacyjną aplikacji wraz z dokładnym opisem przeprowadzenia tej operacji znajdziesz na stronie: http://pmt.sourceforge.net/pngcrush.
Konflikt przezroczystości
Skoro uporaliśmy się już ze zbyt dużymi plikami PNG i odczytywaniem przez przeglądarki wartości gamma, możemy przejść do poważniejszych zagadnień. Tym razem problem dotyczy przeglądarki Internet Explorer.
Niejeden webmaster przeklinał już Microsoft za nieprawidłowe wyświetlanie przezroczystości plików PNG w przeglądarce Internet Explorer 6.0. Zamiast przezroczystości wyświetla ona szare tło (co ciekawe, we wszystkich innych popularnych przeglądarkach nie ma takiego problemu).
Większość osób dochodziła do wniosku, że jedyne, co pozostaje, to użycie formatu GIF, który jest raczej kompromisem, niż spełnieniem oczekiwań webdesignerów (przezroczyste pliki GIF są bowiem często poszarpane, a ich jakość za sprawą 8-bitowej głębi kolorów jest znacznie niższa). Na szczęście i na IE 6.0 wynaleziono sposób. Działa on dla 32-bitowych plików PNG.
Aby użyć tego hacka, musisz pobrać ze strony http://mongus.net/pngInfo plik pngHack.zip, a następnie (po rozpakowaniu) skopiować cały folder pngHack na swój serwer. Autor skryptu zaleca dodanie do kodu strony, która obsługiwać ma przezroczyste grafiki PNG następującego odnośnika do arkusza nowego stylów:
To właśnie m.in. ten plik znajduje się w katalogu, który wgrałeś na serwer. My jednak zalecamy skopiowanie fragmentu kodu z nowego arkusza do dotychczasowego pliku CSS. Pamiętaj tylko, aby zachować strukturę katalogów, do których odnoszą się zawarte w kodzie odnośniki.
Upewnij się także, że ustaliłeś wysokość i szerokość użytych obrazków PNG. W przeciwnym wypadku wielkość każdego z nich zostanie automatycznie ustalona jako 1×1. Nowy kod będzie oddziaływać wyłącznie na starsze wersje przeglądarki Internet Explorer. Na pozostałe przeglądarki, włącznie z IE 7, które radzą sobie z plikami PNG, nie będzie miał żadnego wpływu.
Nie taki PNG straszny
Jak się okazuje, PNG to format graficzny, który ma wiele zalet i przewag nad plikami GIF. Niestety problemy związane z obsługą tego formatu w starszych wersjach przeglądarki Internet Explorer spowodowały, że wokół plików PNG narosło wiele mitów. Faktycznie, aby móc wykorzystać cały potencjał formatu PNG, trzeba czasem sięgnąć po pewne sztuczki. Także samo generowanie plików PNG może przysporzyć początkującym webdesignerom trochę problemów.
Niekiedy jednak zdarzają się projekty stron, na których zastosowanie elementów grafiki zapisanych w postaci plików PNG znacznie poprawiłoby ich wygląd i ułatwiłoby życie webmasterowi. Dlatego dobrze wiedzieć, że przy obecnym wsparciu dla tego formatu, jakie oferują nowoczesne przeglądarki, można bez obaw sięgnąć po format PNG, jeżeli tylko jest taka potrzeba.
Plusy i minusy różnych formatów graficznych
JPEG:
- JPEG jest formatem graficznym przeznaczonym
do zdjęć. Dobrze radzi sobie z obrazami, które
mają dużo kolorów w różnych odcieniach i gładkie
przejścia tonalne. - Słabym punktem JPEG są ostre linie i jaskrawe
kolory. Po zapisaniu w tym formacie zostaną one
zniekształcone i rozmazane. - JPEG nie obsługuje przezroczystości. Grafiki
w tym formacie mają zawsze prostokątny obrys
i jednolite (np. białe) tło.
GIF:
- Poprzednik formatu PNG. Ma podobne
zastosowanie: proste rysunki i małe ozdobniki.
Wygenerowane w taki sposób pliki graficzne
mają niewielkie rozmiary. - Format GIF wyróżnia możliwość zapisania krótkich
animacji. Odpowiednie programy są w stanie
zapisać serię obrazków jako jeden plik GIF. - Oferuje słabe wsparcie dla przezroczystości – nie
można w tym formacie zapisać półprzezroczystości,
przez co krawędzie GIF-ów są zawsze ostre.
PNG:
- Dobrze zapisane grafiki PNG są prawie zawsze
mniejsze od GIF-a, a to oznacza mniej danych do
pobrania z serwera. - Obsługuje zapis koloru w dowolnej palecie kolorów:
od 1- do 8-bitowego zapisu, tak jak ma
to miejsce w formacie GIF, poprzez 16-bitową
skalę szarości, aż do 8- i 16-bitowego zapisu
na każdy kanał, czyli do 24- i 48-bitowej palety
true color. - Oferuje możliwość użycia kanału alpha (czyli
gamy efektów opierających się na półprzezroczystości,
np. realistycznych cieni). - Format PNG wyróżnia wbudowana korekcja
gammy i kontrola jasności ponad platformami
sprzętowymi. - Pełna dostępność kodu źródłowego i brak ograniczeń związanych z patentami oraz licencjami.
- Do niedawna format PNG nie był obsługiwany przez przeglądarkę Internet Explorer 6. Zostało to poprawione dopiero wraz z premierą Internet Explorera 7.
Programy do zapisywania plików PNG
1. PNGQuant
Open source\’owy konwerter PNG 24-bitowych na 8-bitowe z zachowaniem kanału alpha. Działa szybko i sprawnie, uwzględniając kanał alpha w dobieraniu kolorów.
Można to również zrobić samemu, remapując grafikę w programie graficznym do 8 bitów, a następnie z powrotem skonwertować ją do 24 bitów i nałożyć oryginalny kanał alpha. Program można obsługiwać z poziomu linii komend lub poprzez interfejs graficzny (dostępny w postaci nakładki). http://libpng.org/pub/png/apps/pngquant.html
2. PNGOUT
Dzięki własnej implementacji algorytmu Deflate zapewnia doskonałą kompresję danych. PNGOUT potrafi konwertować także pliki GIF i JPEG.
Płatną wersję kompatybilną z systemem Windows udostępniono pod adresem http://ardfry.com/pngoutwin, zaś pierwotna wersja PNGOUT i poradnik do programu znajduje się na stronie http://advsys.net/ken/util/pngout.htm.
3. OptiPNG
Bezstratny kompresor PNG. Nie generuje tak małych plików jak PNGOUT, ale jest za to dużo szybszy i oferuje kilka dodatkowych opcji. Jest także nieco łatwiejszy w użyciu. OptiPNG udostępniany jest na licencji open source. http://optipng.sourceforge.net.Powyższe konwertery to w większości programy obsługiwane z linii komend. W systemie Windows dostęp do nich jest nieco utrudniony, jednak istnieje wiele sposobów na łatwe zarządzanie tymi aplikacjami.
Najprostszy z nich to wybranie z menu START opcji \”Uruchom…\” (można to zrobić także skrótem klawiszowym Winkey+R). W nowym oknie należy wpisać polecenie \”cmd\”. Uruchomiliśmy w ten sposób linię komend. Następnie należy przeciągnąć plik .exe danego konwertera do okienka linii komend. Wciśnij teraz spację i w podobny sposób wklej do linii komend ścieżkę wybranego pliku PNG. Po zatwierdzeniu operacji enterem, obrazek zostanie automatycznie skonwertowany.
