JPG, PNG, GIF – czym się różnią popularne formaty obrazów?

Przemysław Kocięcki,

Internet umożliwia nam wymianę informacji ze światem. Ta wymiana może dotyczyć zarówno zwykłego tekstu, jak i obrazków czy zdjęć. No właśnie – zdjęcia. W jaki sposób zdjęcia są przechowywane na dysku? Jak wygląda cyfrowa reprezentacja obrazu? Czym różnią się popularne formaty zdjęć? Za chwilę postaramy się odpowiedzieć na te oraz podobne pytania.

Komunikacja za pośrednictwem internetu już od czasów jego pojawienia się i rozpowszechnienia w Polsce w latach 90. nie ograniczała się jedynie do tekstu. Obrazki i animacje od zawsze stanowiły ciekawy dodatek i element wyróżniający stronę internetową na tle konkurencji, choć na początku ze względu na dużą wagę obrazków względem tekstu oraz stosunkowo wolne połączenia internetowe starano się ograniczać ich ilość do niezbędnego minimum. Współcześnie trudno już wyobrazić sobie jakikolwiek portal pozbawiony choćby najprostszej grafiki – strony oparte o sam tekst są nudne, wyglądają nieprofesjonalnie i nie przyciągają uwagi.

W jaki sposób obrazy są przechowywane w komputerze?

Wszystkie informacje przechowywane na komputerach są reprezentowane przez ciąg zer i jedynek, które nazywa się bitami. I choć na pierwszy rzut oka może się to wydawać niemożliwe, to ta zasada dotyczy również obrazów. Każdy obraz składa się z pikseli, a każdy piksel może posiadać jeden z wielu kolorów – zależnie od formatu obrazu, ilość kolorów możliwych do wykorzystania jednocześnie może się różnić. Kolor piksela jest zwykle opisany ciągiem bitów reprezentujących barwę czerwoną, zieloną i niebieską (RGB). Informacja o ilości pikseli (rozdzielczości obrazu) oraz o kolorach poszczególnych pikseli w obrazie jest przechowywana w formie ciągu znaków, który jest dekodowany przez system w celu wyświetlenia zdjęcia.

Edycja obrazów

Jako, że obrazy przechowywane są w formie ciągu znaków, każdy taki plik można otworzyć nawet w systemowym Notatniku – edycja zawartego tekstu wpłynie na wyświetlany obraz, choć w ten sposób nie uda się nam stworzyć niczego sensownego. Zamienianie bloków tekstu na inny losowy tekst sprawi jedynie, że obraz ulegnie zniekształceniu, a jeśli przesadzimy, system nie będzie w stanie go w ogóle wyświetlić. Ambitniejsi użytkownicy mogą napisać w ramach ćwiczeń własny program do edycji obrazów – korzystając z jednego z popularnych języków programowania można stworzyć aplikację do zmieniania kolorów pojedynczych pikseli obrazu lub nakładania filtrów zmieniających właściwości całego zdjęcia. Można przykładowo wyzerować wartość bajtów odpowiadających za poziom czerwieni i zieleni w każdym pikselu, co sprawi, że cały obraz stanie się niebieski, albo pomalować na czarno wszystkie piksele, których wartość barwy zielonej przekracza ustalony próg. Możliwości ograniczone są jedynie wyobraźnią.

Zdjęcie kanionu

Jeśli celem jest jednak nie nauka a właściwa edycja obrazu, znacznie prościej załadować obraz do jednego z dedykowanych programów do obróbki grafiki, np. do Photoshopa, i tam dokonać odpowiednich zmian. Sposób działania dedykowanego oprogramowania jest dokładnie taki sam, jak tego tworzonego przez uczących się programistów. Różnicą jest tylko ilość dostępnych funkcji oraz ich złożoność – wiele algorytmów stosowanych w profesjonalnych programach jest efektem ciężkiej pracy ogromnych zespołów badaczy składających się z doświadczonych matematyków i inżynierów.

Co to jest JPG (JPEG)?

JPG, znany również jako JPEG, to jeden z najczęściej spotykanych formatów obrazu. Swoją popularność zawdzięcza bardzo efektywnej kompresji pozwalającej wielokrotnie zmniejszyć rozmiar pliku bez zauważalnej straty jakości zdjęcia. Jest jednak formatem stratnym, co oznacza, że obrazy JPG po każdej sesji edycji w tym formacie stracą część informacji – jakość zdjęcia za każdym razem będzie się pogarszać. Najbardziej zauważalne straty pojawiają się w pierwszej kolejności tam, gdzie występuje duża różnica kontrastów, a więc np. w wypadku czarnego tekstu na białym tle. Wokół tekstu szybko pojawią się artefakty i rozmycia będące efektem działania algorytmu kompresującego, który interpoluje wartości kolorów wokół tekstu – łączy czarny z białym tworząc wokół liter rzucający się w oczy, charakterystyczny szum.
Mimo tej stratności, „jotpegi” wciąż są szeroko stosowane, zwłaszcza do przechowywania zdjęć, głównie ze względu na niedużą wielkość końcowego pliku. Jeśli wielkość pliku nie jest istotna, wówczas stosuje się bezstratne RAW i TIFF. Dodatkową zaletą JPG jest ich kompatybilność z przeglądarkami i aplikacjami – JPG jest formatem posiadającym najszersze wsparcie, co czyni go idealnym wyborem w przypadku np. tworzenia stron internetowych.

JPG przed i po kompresji

Co to jest GIF?

Pierwsze co przychodzi na myśl słysząc „GIF” to prawdopodobnie proste, krótkie animacje o ubogiej palecie barw. I takie skojarzenie nie będzie za bardzo odbiegać od prawdy, bo GIFy faktycznie mogą służyć do tworzenia animacji, a ilość kolorów jakie mogą wyświetlać jednocześnie ogranicza się do zaledwie 256. Warto jednak pamiętać, że limit 256 kolorów nie oznacza, że w każdym istniejącym GIFie mówimy o tych samych kolorach – paleta barw konkretnego GIFa jest wybierana spośród dowolnych 16 milionów kolorów. Co więcej, limit odnosi się do pojedynczego bloku GIFa, a bloków w GIFie może być więcej niż jeden. Jeśli obraz podzielimy na 9 bloków, wówczas każdy blok będzie mógł korzystać z odrębnej palety barw. W efekcie na jednym GIFie będziemy mieć nie 256, a 2304 kolory (256x9, zakładając, że każdy piksel będzie miał inny kolor).

Teoretycznie więc możliwe jest tworzenie GIFów z zachowaną kompletną, 24-bitową paletą barw, ale w praktyce się tego unika. Jeśli chcielibyśmy wiernie odwzorować zdjęcie w GIFie, konieczne byłoby podzielenie zdjęcia na bloki o rozmiarze 16x16 pikseli – w ten sposób gwarantujemy, że w żadnym bloku nie da się użyć więcej kolorów niż wynosi paleta barw (256), dzięki czemu nie dojdzie do utraty informacji o kolorze. Dla zdjęcia o rozdzielczości 1024x768 konieczne byłoby więc stworzenie ponad 3 tysięcy oddzielnych bloków, a dla każdego z nich konieczne byłoby przechowywanie oddzielnej informacji o wykorzystywanej palecie barw, co znacznie zwiększałoby rozmiar pliku.

Animowany GIF z serialu Przyjaciele

GIF jest formatem bezstratnym, co oznacza, że wielokrotne zapisywanie tego samego GIFa nie spowoduje pogorszenia jakości obrazu – GIF za każdym razem będzie wyglądał tak samo jak na początku.

Współcześnie GIFy najczęściej wykorzystuje się do tworzenia memów lub przedstawiania reakcji, które ciężko byłoby przekazać w formie zwykłego zdjęcia. GIFy doczekały się nawet oficjalnego wsparcia na Facebooku, na którym można je dodawać w konwersacjach za pomocą wbudowanej wyszukiwarki GIFów. Wystarczy wpisać dowolną frazę by znaleźć GIFa na dowolną okazję – jedna animacja jest często w stanie wyrazić więcej niż tysiąc słów.

Co to jest PNG?

PNG powstał w wyniku wojny patentowej z twórcami algorytmów wykorzystywanych w GIFach. Główną cechą wyróżniającą go na tle GIF jest możliwość jednoczesnego użycia pełnej, 24-bitowej palety barw, co daje nam w sumie do dyspozycji ponad 16 milionów kolorów, podobnie jak w wypadku JPGów. PNG, tak jak GIF, jest formatem bezstratnym, co pozwala na wielokrotną edycję pliku bez utraty jakości obrazu.

Ceną za bezstratność, wierne odwzorowanie kolorów oraz wsparcie przezroczystej warstwy jest znacznie większa niż w pozostałych formatach końcowa wielkość pliku. Z tego powodu użycie plików PNG ogranicza się zwykle do sytuacji, w których niezbędne jest zachowanie przezroczystości lub możliwości wielokrotnej edycji pliku – a więc np. w wypadku tworzenia firmowego logo na stronę internetową.

Podsumowanie najważniejszych cech popularnych formatów obrazu

Poniżej przedstawiamy proste zestawienie pozwalające szybko porównać różnice poszczególnych formatów zapisu obrazu:
GIF – wspiera animacje, wspiera przezroczystość, kompresja bezstratna, 256 kolorów
JPG – brak animacji, brak przezroczystości, kompresja stratna, 16 milionów kolorów
PNG – brak animacji, wspiera przezroczystość, kompresja bezstratna, 16 milionów kolorów