[Grafika] W jakim formacie zapisać grafikę - JPG, GIF czy PNG?

Chcesz wybrać najlepszy format graficzny przy zapisywaniu grafiki, która zostanie umieszczona na stronie WWW.

Nie przez przypadek powstało wiele różnych formatów graficznych. Każdy z nich ma swoje wady i zalety, a więc nadaje się tylko do określonych zastosowań. Aby grafika wyglądała poprawnie, miała niewielką objętość i wiernie oddawała kolory, musisz zdecydować się na użycie jednego, odpowiedniego dla określonej grafiki formatu.

Na stronach WWW umieszcza się grafikę i zdjęcia zapisane w trzech formatach - JPG, GIF i PNG. Zanim zapiszesz grafikę na dysk w jednym z tych formatów, poznaj ich wady i zalety oraz dowiedz się dlaczego warto wybrać właśnie ten, a nie inny format.

Każdy plik graficzny powinien spełniać co najmniej trzy wymagania:
- wiernie oddawać kolory
- wiernie oddawać kształty
- zajmować jak najmniej miejsca na dysku

Najważniejszym kryterium jest objętość pliku, które wpływa na szybkość ładowania obrazków na stronie WWW i czas ich przesyłania w Sieci. Gdyby objętość nie miała znaczenia, bez problemu można uzyskać wierne kształty i kolory. Niestety, im wierniejsze kolory i kształty, tym objętość obrazka bardziej wzrasta.

Ponieważ często zmuszeni jesteśmy do zmniejszenia objętości pliku, tracimy na wiernym oddawaniu kolorów i kształtów, dlatego potrzebny jest jakiś kompromis. Stąd trzy formaty graficzne, które pozwalają zachować mała objętość pliku i wierne (ewentualnie prawie wierne) kolory lub kształty.

Przykłady grafik zapisanych w różnych formatach, które znajdują się poniżej, uzmysłowią Ci, jak zmiana poszczególnych parametrów grafiki wpływa na ich wygląd, jakość i objętość. Przeczytasz także o zasadach kompresji plików i doborze właściwego formatu w zależności od potrzeb.

GIF

Format GIF powinien być stosowany wszędzie tam, gdzie ważne jest wierne odtworzenie kształtów, a liczba kolorów w grafice ograniczona jest do kilkunastu. Pliki GIF kompresowane są metodą kompresji bezstratnej LZW i mogą zachować jedynie 256 kolorów. Gdy kolorów w grafice jest więcej ich liczba zmniejszana jest automatycznie do 256, co może czasem zniekształcić kolorystykę.

GIF pozwala również na tworzenie animacji i korzystanie z koloru "przezroczystego", co umożliwia stworzenie dowolnego kształtu grafiki, w którym pozostała część obrazka będzie w kolorze tła strony WWW. W ten sposób powstają np. strzałki, okrągłe guziki i różne inne wymyślne elementy stron.

To świetny format do zapisu grafik, w których kolory można odróżnić na oko. Gdy grafika nie zawiera przejść tonalnych, fragmentów zdjęć, dużej ilości kolorów, a także zbyt wielu szczegółów - bez wahania wybierze ten format.

Gdy tworzysz animowany banner, nie masz wyjścia - pozostaje Ci tylko GIF. Ponieważ można regulować w tym formacie ilość kolorów, aby uzyskać mniejszy plik możesz zmniejszać ich ilość. Takie obcinanie kolorów może jednak prowadzić do zniekształceń barwnych, więc tutaj musisz iść na kompromis i wybrać czy ważniejsze jest wierne zachowanie kolorów czy mniejsza objętość pliku.

GIF, 1059 bajtów 5 kolorów	GIF, 695 bajtów 2 kolory	PNG, 1357 bajtów
JPG, 2671 bajtów kompresja 10%	JPG, 3837 bajtów kompresja 40%	JPG, 5356 bajtów kompresja 70%

Przykłady pokazują idealnie, w jakim formacie powinien być zapisany fragment ekranu. GIF jest najmniejszy i w 100 proc. wierny w stosunku do oryginału. Nie traci na kolorystyce, kształtach i objętość ma najmniejszą.

Każdy inny format ma jakieś straty. PNG jest również niezły, bo jedyną jego wadą jest ciut większa objętość. Najgorszy do prostych grafik jest JPG - w zależności od stopnia kompresji jest albo duży i w miarę wierny lub mały i oszpecony.

Ponieważ GIF korzysta z opatentowanej metody kompresji, jego zastosowanie w niektórych programach jest ograniczone. Producenci programów graficznych muszą kupić licencję na używanie tego formatu. Problem ten nie występuje w formacie PNG, stąd wiele organizacji mocno promuje zastępowanie GIFów formatem PNG.

JPG

JPG stosowany jest wyłącznie do zdjęć i grafik zawierających ponad 256 kolorów, gdzie nie jest konieczne zachowanie wiernych kolorów i kształtów. W formacie tym kluczową rolę spełnia stopień kompresji, od którego zależy objętość pliku. Kompresja powoduje, że plik jest zawsze gorszej jakości niż oryginał (chociaż oko może tego w niektórych wypadkach nie dostrzec).

Kompresja pozwala na znaczne zmniejszenie objętości pliku przy względnie niewielkich zmianach w jakości zdjęcia. Im mniejszy stopień kompresji tym jakość zdjęcia staje się lepsza, ale objętość pliku również szybko wzrasta.

Zwykle nie stosuje się plików JPG bez kompresji (byłyby bardzo duże). Często korzysta się z kompresji na poziomie 70-80 proc. oryginału. Te 20-30 proc. strat w jakości obrazu nie wpływa znacząco na wygląd zdjęcia, natomiast dosyć znacznie obniża wielkość pliku.

Najlepiej kompresuje się zdjęcia bardzo kolorowe, pełne detali, które nie zawierają dużych powierzchni w jednym kolorze lub elementów różniących się bardzo kolorem. Trzeba uważać aby nie skompresować zdjęcia za bardzo, bo wtedy wygląda mało ciekawie.

JPG, 48310 bajtów kompresja 100% (oryginał)	JPG, 23992 bajtów kompresja 80%
JPG, 10787 bajtów kompresja 50%	JPG, 7152 bajtów kompresja 30%
JPG, 4482 bajtów kompresja 15%	GIF, 26505 bajtów 256 kolorów

Przykład bardzo dobrze oddaje sens stosowania formatu JPG. Zdjęcie, które zajmuje w oryginale 50 kb można z powodzeniem skompresować nawet o 50 proc. i wtedy ma objętość tylko 10 kb. Połowa kompresji dała nam 5-krotnie mniejszą grafikę, a więc oszczędność jest wielka. A co ważne, na oko nie widać różnic między tymi zdjęciami.

Dalsza kompresja powoduje, że obraz staje się mocno zniekształcony, nie mniej jednak wciąż widać, co na zdjęciu się znajduje. To samo zdjęcie zapisane jako GIF zajmuje 26 kb i w dodatku wystąpiły problemy z kolorami (liczba kolorów została zmniejszona do 256), widać to szczególnie na niebie.

Gdy w serwisie zdjęć jest wiele, kompresja JPG nie tylko pozwoli zaoszczędzić sporo miejsce na dysku, ale również przyśpieszy ściąganie grafiki.

PNG

To najnowszy z trójki formatów. Łączy cechy formatu GIF i JPG, a więc pozwala zachować szczegóły korzystając z wydajniejszych metod kompresji bezstratnej. Nie można go jednak stosować do animacji.

W PNG można zapisać dodatkowy kanał alfa, który pozwala na tworzenie 256 stopniowej przezroczystości. Umożliwia to "wtapianie" obrazka w tło. To bardzo przydatna opcja w tworzeniu ciekawych efektów na stronach WWW.

PNG to generalnie nieco bardziej rozbudowany format GIF. Nadaje się do zapisywania tych samych rodzajów grafik co GIF. Często jednak okazuje się, że GIFy są w wielu zastosowaniach wygodniejsze, a z pewnością więcej programów obsługuje format GIF niż PNG (stare przeglądarki obsługiwały tylko GIF i JPG).

PNG, 2563 bajtów

GIF, 2505 bajtów

JPG (70%), 6253 bajtów

Najważniejszą cechą formatu PNG jest jego licencja, która powoduje, że można go używać bezpłatnie w różnych bibliotekach i programach, przez co jest on znacznie chętniej wspierany przez darmowe oprogramowanie. Nawet język PHP wspiera PNG, rezygnując z formatu GIF, na które potrzebne są dodatkowe licencje.

Co wybrać?

Na początku możesz mieć dylemat, który format będzie lepszy. Jeżeli masz wątpliwości, zapisz grafikę w trzech formatach i wybierz ten, który najlepiej spełnia Twoje wymagania. Przy pewnej wprawie niemal od razu będziesz wiedzieć, który format wybrać.

Najważniejsza jest objętość pliku, więc tak dobieraj format i kompresję, aby pliki nie były zbyt duże, a jednocześnie oddawały w miarę wiernie kolory i kształty.

Do zdjęć jest tylko jeden dobry format - JPG, tutaj nie musisz się zastanawiać, wystarczy tylko dobrać stopień kompresji. Natomiast w wypadku innych grafik zwykle pozostaje GIF, a dla bardziej skomplikowanych grafik PNG (szczególnie gdy chcesz wykorzystać kanał alfa).

Czasem można sobie pozwolić na niewielką odchyłkę od kolorów oryginalnych, szczególnie gdy grafika nie styka się na stronie z inną grafiką w tym kolorze. Gdy obok siebie mają wystąpić dwie grafiki o tym samym kolorze, a w jednej z nich odcień zostanie zmieniony na skutek kompresji lub zmiany ilości kolorów, błąd będzie widać.

Pamiętaj też, że odbiorca, który nie widzi dwóch grafik - oryginału i wersji skompresowanej, nie odczuje różnicy. Dla niego wersja końcowa będzie dobra, ponieważ nie ma do czego jej odnieść, aby zobaczyć zmianę. Oczywiście jeżeli kompresja będzie zbyt mocna, nawet osoba niedoświadczona stwierdzi, że zniekształcenia są bardzo dobrze widoczne.

Duże znaczenie ma również cięcie obrazka - zamiast pokazywać ogromny, skompresowany obraz, można go pociąć na mniejsze fragmenty, który zostaną załadowane osobno i złożone za pomocą tabeli. Ta sama grafika używana na stronie kilka razy, pobierana jest tylko raz - a więc szybko się wczytuje.

Warto też pochodzić po stronach WWW i podpatrywać najlepszych. Wybór formatu to zwykle kompromis - od Ciebie zależy więc jak szybko będą pobierane graficzne fragmenty stron WWW i jak będą one prezentować się na witrynie.

autor porady:
Dariusz Majgier, www