Grafika: Formaty obrazów

We wpisie o rozdzielczości obrazów wspominałem o rozmiarze, czyli o tym ile miejsca w pamięci komputera (lub ile transferu w internecie) zabiera grafika. Myśl była taka, że im większy rozmiar obrazków na stronie, tym więcej czasu potrzebuje ona na wyświetlenie się. Długi czas pobierania zniechęca gości do dalszego przeglądania i jednocześnie pogarsza pozycję strony w Google.

Żeby zmniejszyć rozmiar obrazka można zrobić dwie rzeczy. Po pierwsze zmniejszyć rozdzielczość, a po drugie wybrać odpowiedni format i skompresować.

Czym jest kompresja

Nieskompresowany obraz jest zapisany w komputerze jako tablica z kolorowymi kropkami, czyli pikselami. Kolor każdego piksela jest zapisany oddzielnie. Jeżeli mamy szachownicę o wymiarach 100x100px, wtedy plik zawiera opis 10.000 pikseli.

Zamiast zapisywać kolor każdego piksela po kolei (np. pierwsza linia: 1-szary, 2-szary, 3-szary… 98-biały, 99-biały, 100-biały, nowa linia, szary, szary…), komputer może odszukać sposób na krótsze opisanie zawartości obrazka. W tym przykładzie może napisać, aby na białym tle narysować dwa szare kwadraty: jeden od lewego górnego rogu do środka, a drugi od środka do prawego dolnego rogu.

Kompresja to zapisanie nie tyle samego obrazka, co sposobu w jaki go uzyskać. Pozwala przy tym zaoszczędzić miejsce w pamięci komputera i transfer w internecie.

Kompresja stratna i bezstratna

Przykład z szachownicą był bardzo prosty i przedstawiał kompresję bezstratną. Czyli obrazek po tym zabiegu nic nie stracił na swojej jakości.

Opisanie zdjęć wymaga już zaawansowanej matematyki i programowania. Czasem też wymaga pewnych uproszczeń, które skracają cały opis, ale trochę zniekształcając rysunek. To jest właśnie kompresja stratna.

Programy graficzne pozwalają balansować pomiędzy zaoszczędzonym miejscem, a jakością obrazu. Poniżej suwak, który pojawia się przy zapisywaniu grafiki jako JPG oraz efekty.

Format JPG pozwala balansować między rozmiarem a jakością. Wyższy numer oznacza lepszą jakość, ale i większą objętość pliku.
Oryginalne zdjęcie, 79KB, pobrane z pixabay.com. Jest zapisane w formacie JPG i lekko skompresowane. Poniżej będzie ten sam obraz, ale poddany silniejszej kompresji. Zdjęcia można powiększyć.
Jakość 85%, 175KB. Trudno odróżnić od “oryginału”. Pojawiają się niewyraźne artefakty na krawędzi dachu i nieba. Pojawia się też lekka ziarnistość. Mała różnica w rozmiarze między tym, a pierwotnym zdjęciem wynika z tego, że pierwotne już było skompresowane.
Jakość 50%, 79KB. Niebo wyraźnie straciło na jakości – nie ma już płynnego przejścia pomiędzy odcieniami niebieskiego. Artefakty na styku dachu i nieba są już wyraźnie widoczne. Chropowatości na ścianach zostały rozmazane.
Jakość 25%, 53KB. Wyraźnie widać małe prostokątne wzorki, zwłaszcza na niebie i ścianach.
Jakość 0%, 22KB. Gorzej już być nie może.

Lekko skompresowany obraz może być bardzo trudny do odróżnienia od oryginału, a przy tym zajmować kilka razy mniej miejsca.

Formaty obrazów bitmapowych

BMP

Nieskompresowana bitmapa, która zajmuje dużą ilość miejsca w pamięci komputera. Jakość obrazu jest idealna przez co ten format plików graficznych może być używany do przechowywania amatorskich zdjęć i innych obrazów. Brak kompresji sprawia, że ich rozmiar jest gigantyczny, przez co nie nadają się do używania w internecie czy wewnątrz dokumentów.

Kompresja

Pliki w formacie BMP zazwyczaj są nieskompresowane, choć ten format obsługuje bezstratną kompresję (ale niezbyt wydajną).

Rozmiar poprzednio użytego zdjęcia rośnie dziesięciokrotnie po zmianie formatu na BMP. Ze 179KB do ponad 1700KB.

Kolory i przeźroczystość

Pliki BMP obsługują płynną przeźroczystość oraz wszystkie kolory, jakie mogą wyświetlić standardowe monitory (ponad 16 milionów).
RGB 24 oraz RGBA 32, 8 bitów na kanał, możliwa przeźroczystość

Zalety

  • idealna jakość obrazu
  • możliwość użycia bezstratnej kompresji

Wady

  • ogromny rozmiar
  • tylko 8 bitów na kanał, czyli nie jest dla grafiki profesjonalnej

Zastosowania

  • archiwizacja plików bez straty jakości
  • grafika komputerowa

JPG

Najpopularniejszy format plików graficznych. Wykorzystywany niemal wszędzie: na stronach internetowych, w dokumentach, do przechowywania domowych fotografii. Chociaż JPG ma już prawie 30 lat (premiera w 1991), po mimo wielu prób wciąż nie pojawił się format, któremu udałoby się go zastąpić.

Kompresja

Pliki JPG zazwyczaj używają stratnej kompresji, czyli zdjęcia zostają uszkodzone. Podczas zapisu obrazu do formatu JPG, można ustawić siłę kompresji. Mała już w znaczący sposób zmniejsza rozmiar grafiki nie niszcząc jej w zauważalny sposób. Im silniejsza kompresja, tym mniejszy rozmiar obrazu, ale gorsza jakość.

Kolory i przeźroczystość

Pliki JPG przechowują wszystkie kolory, jakie mogą wyświetlić standardowe monitory. Nie przechowuje jednak przeźroczystości. Nie nadają się więc przez to do zapisywania np. ikon, logotypów i symboli graficznych.

RGB 24, 8bitów na kanał, brak przeźroczystości

Zalety

  • każdy program i urządzenie go otworzy
  • małe rozmiary plików
  • możliwość balansowania między jakością a rozmiarem

Wady

  • kompresja stratna
  • format ma już prawie 30 lat i są już wydajniejsze metody kompresji
  • brak przeźroczystości

Zastosowania

  • przechowywanie domowych zdjęć
  • grafika do internetu

PNG

PNG to format używający bezstratnej kompresji. To znaczy, że obrazek będzie wyglądał tak samo jak oryginał, ale zajmował mniej miejsca. Obsługuje przeźroczystość, dzięki czemu jest użyteczny na stronach internetowych np. do logotypów czy ikonek. Chociaż zdjęcia zapisane w PNG zajmują więcej miejsca niż JPG, to pewne rodzaje grafiki jak np. ikony, wykresy, przyciski, loga, schematy zajmują zdecydowanie mniej miejsca niż JPG, zachowując przy tym oryginalną jakość.

PNG (po lewej) zapisuje grafikę w oryginalnej jakości. JPG (po prawej) może uszkodzić obraz. Np. tutaj widać artefakty przy znaku zapytania i zielonej obwódce. Dlatego do prostych grafik lepiej używać formatu PNG.

Kolory i przeźroczystość

Pliki PNG obsługują przeźroczystość, dzięki czemu są używane na stronach internetowych do grafik takich jak loga, ikony czy przyciski. Do tego obsługują różne tryby przechowywania kolorów:

  • indeksowany (od 2 do 255)
  • skala szarości (8 lub 16 bitów)
  • RGBA (8 lub 16 bitów na kanał)

Zalety

  • przeźroczystość
  • różne tryby kolorów
  • do 16 bitów na kanał
  • bezstratna kompresja
  • lepsza kompresja prostych rysunków niż JPG

Wady

  • brak obsługi przestrzeni CMYK
  • zdjęcia zajmują więcej miejsca niż JPG

Zastosowania

  • ikony, przyciski i logo na stronach internetowych
  • schematy i wykresy

GIF

Z plikami GIF dziś spotykamy się głównie w postaci krótkich zapętlonych animacji. Kiedyś format ten był bardziej wszechstronny i był używany jako ikony przycisków, wykresy, schematy, obrazy tła. W tych zastosowaniach wyparł go PNG.

Kompresja

Chociaż sama kompresja jest niby bezstratna, to format ten obsługuje maksymalnie 256 kolorów, przez co zdjęcia, czy animowane filmiki wyglądają źle.

Kolory i przeźroczystość

GIF obsługuje maksymalnie 256 kolorów (minimalnie 2 np. czerń i biel). Obsługuje też przeźroczystość, ale w odróżnieniu do PNG, jest ona zero-jedynkowa. Czyli coś jest albo w pełni przeźroczyste, albo w ogóle. Nie można zrobić półprzeźroczystego tła, a krawędzie wyciętych obiektów są poszarpane.

GIF ma prymitywną przeźroczystość: albo coś jest w pełni widoczne, albo w ogóle niewidoczne. Dlatego krawędzie obiektów, leżących na przeźroczystym tle są poszarpane.
Pliki GIF nie nadają się do zdjęć ze względu na ograniczoną liczbę kolorów (max 256) oraz słabą kompresję. Pomimo ograniczenia liczby kolorów do 128 i ogólnej brzydoty, to zdjęcie zajmuje tyle samo miejsca co oryginalne.
Zastosowanie ditheringu, czyli mieszania kolorowych kropek pozwala stworzyć wrażenie, że jest więcej kolorów. Zwiększa to jednak rozmiar zdjęcia, a i tak wygląda okropnie.

Zalety

  • mały rozmiar
  • animacja
  • przeźroczyste tło…

Wady

  • … ale ta przeźroczystość jest zero-jedynkowa
  • poszarpane krawędzie obiektów na przeźroczystym tle
  • max 256 kolorów

Zastosowanie

  • animowane obrazki w internecie

Jak widzisz, zamieszczanie obrazków w Internecie wiąże się z pewnymi problemami jak utrata jakości czy duży rozmiar grafiki i powolne wczytywanie strony. Jednak pewien rodzaj obrazów, jak wykresy, schematy, loga, znaki czy proste ilustracje, które można zapisać w postaci grafiki wektorowej. Zajmuje mniej miejsca (zwłaszcza dla dużych rozdzielczości) i jest pozbawiona artefaktów powstających przy silnej kompresji.

Piotr Załóg

Napisz komentarz