Strona główna » Poradniki » Grafika SVG » Typy plików graficznych

Typy plików graficznych

Wstęp

Istnieje wiele różnych plików graficznych, które różnią się sposobem zapisu informacji. Czy istnieje najlepszy typ pliku ? Trudno odpowiedzieć na to pytanie. Każdy typ pliku korzysta z kompresji, która optymalizuje obrazek pod określonymi szczegółami. Niektóre rodzaje grafik pozwalają na zmniejszenie pliku bez wpływu na jakość, a inne wręcz przeciwnie. W niniejszym artykule przedstawię najczęściej spotykane rodzaje plików graficznych i doradzę kiedy należy je wybrać. Na stronie pod każdym rodzajem pliku wstawiłem oryginalne obrazki w omawianym zapisie.

Format BMP (Windows Bitmap)

Jest to podstawowy typ zapisu danych, który nie wykorzystuje żadnej metody kompresji. Dane są zapisywane w pliku tak jak są wyświetlane. Przykładowo piksel, który jest reprezentowany przez kod RGB to każdy kanał jest zapisywany jako oddzielny bajt. Pozwala to na bardzo łatwe określenie rozmiaru pliku, ponieważ wystarczy pomnożyć 24 bity razy ilość pikseli w obrazku lub w przypadku głębi 8 bitów zmieniamy 24 na 8.

Głębia kolorów pozwala określić na ilu bitach jest zapisywany kod koloru pojedynczego punktu obrazka. Poniżej przedstawione są dwa obrazki - pierwszy o głębi 24 bitów, a drugi o głębi 8 bitów. Choć na pierwszy rzut oka obrazki niewiele się różnią to drugi obrazek o mniejszej głębi kolorów ma mniej płynne przejście pomiędzy sąsiednimi barwami co można zauważyć po nawet niewielkim powiększeniu.

Format BMP, głębia 24 bityFormat BMP, głębia 8 bity

Przykładowo plik o rozmiarach 1920x1080 o głębi 24 bitów zajmuje blisko 5,9 MB. Jak na tego typu obrazek rozmiar jest bardzo duży i z pewnością nie nadaje się, aby przesyłać go przez Internet czy wstawiać na witrynę w Internecie.

Format JPEG (Joint Photographic Experts Group)

Powszechnie używanym dziś formatem pliku graficznego jest JPEG (wym. jot-peg). Pozwala on na zapis obrazków w formie bezstratnej jak i stratnej. W trakcie kompresji danych algorytm stara się zachować płynne przejście pomiędzy barwami. Niestety drobne szczegóły i krawędzie zanikają im większa jest kompresja danych. Po zapisie tego formatu i użyciu kompresji niektóre dane są utracone bezpowrotnie co nie występuje np. w przypadku formatu bmp.

W przypadku plików JPEG można ustalić poziom kompresji. Pozwala to na dostosowanie rozmiaru pliku do jakości jaką można uzyskać. Ustalenie jakości na 100% pozwala uzyskać skompresowane dane, ale bez żadnej utraty danych w obrazku. Przyjmuje się jednak, że jakość 95% jest najlepsza w przypadku większości zdjęć (zachowuje większość szczegółów, a rozmiar pliku jest znacznie mniejszy). Oczywiście nawet przy bardzo niskiej jakości niektóre elementy obrazka wciąż można rozpoznać. Poniżej przedstawiono kolejno obrazek o jakości 95%, 50% i 25%:

Format JPEG, jakość 95%Format JPEG, jakość 50%Format JPEG, jakość 25%

Przykładowo plik o rozmiarach 1920x1080 i jakości 95% zajmuje zaledwie 283 KB. Jakoś obrazka jest dobra, a rozmiar dość mały. Tego typu obrazek śmiało można wstawić na stronę Internetową lub przesłać pocztą email.

Format PNG (Portable Network Graphics)

Format PNG wyróżnia się faktem, że obsługuje kanał ALPHA. Dzięki temu możliwe jest zapisanie półprzeźroczystych fragmentów obrazka. Zaletą PNG jest używanie znaczącej, ale bezstratnej metody kompresji danych. Obecnie jest to preferowany format grafiki na stronach internetowych. Format PNG znajduje różnego rodzaju zastosowania ze względu na możliwość zapisu danych na podstawie różnego rodzaju palet. Można zapisać zarówno plik w skali szarości jak również milionów kolorów.

Format PNG, maksymalna paleta kolorów

Przykładowo plik o rozmiarach 1920x1080 i w najlepszej jakości zajmuje 3,3MB. Tu nasuwa się pytanie czy warto używać tego formatu pliku. Oczywiście zajmuje więcej niż format JPEG, ale nie ma utraty jakichkolwiek szczegółów. Większy sens używania tego formatu pliku jest kiedy zapisujemy obrazek z kanałem przezroczystości. Wtedy kompresja bezstratna jest najbardziej efektywna. Przykładowo obrazek z użyciem przezroczystości wygląda tak:

Format PNG, maksymalna paleta kolorów z kanałem alpha

Format SVG (Scalable Vector Graphics)

Format SVG zdobywa dzisiaj coraz większą popularność. Należy on do rodzaju grafiki wektorowej. Oznacza to, że zapisane są w nim nie informacje na temat każdego piksela obrazka, a zapisane są dane o obiektach, które na obrazku się znajdują. Co za tym idzie format ten nie nadaje się do przechowywania zdjęć (chociaż tego typu obrazki można wstawiać jako obiekt). Z reguły ten typ pliku stosuje się kiedy jest do przedstawienia schemat lub rysunek. Wszystkie obiekty są zapisane w postaci formuł matematycznych, więc obraz jest generowany na komputerze użytkownika. Tak wygląda przykładowo obraz SVG: (warto spróbować przybliżyć stronę, aby zobaczyć o co chodzi z skalowaniem):

Format SVG

Format ten zajmuje bardzo mało miejsca i można go zwiększać praktycznie bez końca, więc jeśli na stronę jest do wstawienia coś schematycznego i nie wymagającego ustalania każdego piksela oddzielnie to warto użyć tego formatu. Osobiście używam go na swojej stronie kiedy to tylko jest możliwe. Przykładowo obrazek powyżej zajmuje zaledwie 657 B i rozmiar pliku nie zmieni się nawet jeżeli zwiększymy rozmiar strony na której jest przedstawiany. Przykładowo ten sam obraz tej samej wielkości zapisany przy pomocy formatu JPG przy najgorszej jakości zajmuje 6 razy więcej !

Podsumowanie

Podsumowując cały artykuł w przypadku zapisywania zdjęcia bądź obrazka warto użyć formatu JPG i jakości 95%. W przypadku, gdy chcemy, aby obrazek był częściowo przezroczysty warto wykorzystać format PNG, a dla wszelkich rysunków i schematów SVG. Istnieje również wiele innych formatów pliku, które opisze w kolejnych artykułach.