Popularne formaty grafiki Charakterystyka i możliwości zastosowania w dokumentach WWW © Adam Czarnecki 2002

BMP (BitMap Picture) BITMAPA - obraz w grafice rastrowej, w którym zakodowana jest wartość (kolor) każdego piksela Format opracowany pierwotnie dla systemu OS/2 (IBM), obecnie podstawowy format systemów Windows (Microsoft) Rozszerzenie *.bmp

BMP (BitMap Picture) Maksymalna liczba kolorów: 16.777.216 (24-bit = 10^24) Paleta barw: R - Red G - Green B - Blue

BMP (BitMap Picture) KOMPRESJA: Z reguły nie stosuje się Obrazy 4- i 8-bitowe można kompresować metodą RLE (Run Length Encoding)

BMP (BitMap Picture) STRUKTURA PLIKU: Nagłówek (54 bajty) Opcjonalnie – paleta typu RGB (768 bajtów) Dane obrazowe (po 3 bajty na piksel) – linie zapisywane od dołu do góry

BMP (BitMap Picture) ZALETY: WADY: Duża paleta barw Duży rozmiar plików Długi czas ładowania Brak przezroczystości Brak animacji Wyświetlanie „od dołu”

GIF (Graphics Interchange Format) Format stworzony w 1987 roku (GIF87a) Pozwala na kompresję obrazu Licencjonowany przez firmę CompuServe INC. 1989 r. – powstaje GIF89a, który pozwala na zapis przezroczystości, przeplotu i animacji Rozszerzenie *.gif

GIF (Graphics Interchange Format) Maksymalna liczba kolorów – 256 (8-bit) Palety barw przy konwersji z RGB: Dokładna Bezpieczna WWW Systemowa Adaptacyjna Inna (użytkownika)

GIF (Graphics Interchange Format) PALETA DOKŁADNA Daje paletę skonwertowaną w oparciu o barwy identyczne z występującymi w obrazie i należące do modelu RGB Dla ilustracji <= 256 kolorów

GIF (Graphics Interchange Format) PALETA BEZPIECZNA WWW Opiera się na 216 barwach indeksowanej palety kolorów Zapewnia jednakowe wyświetlanie w dowolnym systemie i przeglądarce

GIF (Graphics Interchange Format) PALETA SYSTEMOWA (Windows lub Mac OS) Do jej tworzenia stosuje się 8-bitową tabelę kolorów opartą na ujednoliconych próbkach kolorów RGB wykorzystywaną przez każdy z systemów operacyjnych

GIF (Graphics Interchange Format) PALETA ADAPTACYJNA Tworzy paletę barw na podstawie próbkowania kolorów najczęściej występujących w obrazie Pozwala na zredukowanie liczby kolorów z zachowaniem spektrum kolorystycznego ilustracji

GIF (Graphics Interchange Format) ROZTRZĄSANIE (ang. DITHERING) Uzyskiwanie barw występujących w obrazie, ale niedostępnych dla środowiska operacyjnego Oparta na złudzeniu optycznym

GIF (Graphics Interchange Format) ROZTRZĄSANIE (ang. DITHERING) Zalecane dla obrazów o małej liczbie kolorów i zawierających przejścia tonalne Niewskazane dla obszarów o jednolitym kolorze

GIF (Graphics Interchange Format) ROZTRZĄSANIE WZORKOWE (ang. PATTERN DITHERING) Tworzenie na ekranie wzorku półtonowych kwadracików symulujących barwy spoza tabeli kolorów

GIF (Graphics Interchange Format) PRZEZROCZYSTOŚĆ (ang. TRANSPARENCY) Ustawienie jednego lub kilku kolorów jako niewidocznego tła Brak regulacji stopnia przezroczystości Pozwala na efektowne nakładanie na siebie obiektów graficznych

GIF (Graphics Interchange Format) PRZEPLOT (ang. INTERLACE) Wyświetlanie co n-tej linii podczas ładowania obrazu Kolejne „przejście” dokłada następne linie Mózg ludzki uzupełnia brakujące linie

GIF (Graphics Interchange Format) ANIMACJA GIF umożliwia wyświetlanie kolejno wielu obrazów tworzących animację Regulacji podlega czas wyświetlania każdego obrazka składowego

GIF (Graphics Interchange Format) KOMPRESJA Bezstratna - patent LZW (Lempel, Ziv, Welch) Jeżeli w wierszu sąsiaduje kilka pikseli tego samego koloru, zapisywana jest informacja o kolorze i ilości pikseli Linie poziome – 33 KB (PNG – 25 KB) Linie pionowe – 45 KB

GIF (Graphics Interchange Format) ZALETY: Stosunkowo mała objętość dzięki bezstratnej kompresji Przezroczystość (ale tylko JEST/NIE MA) Animacja Przeplot Możliwość optymalizacji palety kolorów WADY: Tylko 256 kolorów Ryzyko niewłaściwego wyświetlania w niektórych przeglądarkach i systemach Licencja na format i kompresję

PNG (Portable Network Graphics) Odpowiedź na egzekwowanie swoich praw związanych z GIF-em przez CompuServe INC. Autor: zespół IETF kierowany przez Thomasa Boutella (boutell@boutell.com) Założenie – format bezpłatny i usuwający ograniczenia GIF-a Rozszerzenie *.png

PNG (Portable Network Graphics) Paleta kolorów – TrueColor (48-bit) Dla odcieni szarości – 16-bit (informacja o jasności) Obsługa korekcji gamma

PNG (Portable Network Graphics) PRZEZRO-CZYSTOŚĆ (ang. TRANSPARENCY) Współczynnik przezroczystości (ang. alpha channel) pozwala określić stopień przezroczystości każdego piksela (256 stopni)

PNG (Portable Network Graphics) PRZEPLOT (ang. INTERLACE) Plik z przeplotem jest nieco większy Pierwszy obraz pojawia się 8x szybciej niż przy GIF-ie (kosztem jego jakości) Tekst zapisany w PNG staje się czytelny ok. 2x szybciej niż w GIF-ie

PNG (Portable Network Graphics) WYŚWIETLANIE SEKWENCYJNE (PROGRESYWNE) Wpierw wyświetlane są kontury, a potem dochodzą kolejne szczegóły Obraz zapisany progresywnie jest nieco większy

PNG (Portable Network Graphics) ANIMACJA Format PNG nie obsługuje animacji

PNG (Portable Network Graphics) KOMPRESJA Jedyny popularny format obsługujący bezstratną 24-bitową kompresję Algorytm słownikowy LZ77 oraz statystyczne lub adaptacyjne kodowanie Huffmana Linie poziome – 33 KB (PNG – 25 KB) Linie pionowe – 45 KB

PNG (Portable Network Graphics) ZALETY: Paleta TrueColor Bezstratna kompresja o lepszym algorytmie niż GIF Przezroczystość o regulowanym stopniu Przeplot i ładowanie sekwencyjne Brak opłat licencyjnych WADY: Brak animacji Nie obsługiwany przez starsze przeglądarki

JPEG (Joint Photographic Experts Group) Zbiór standardów opracowany przez ISO/IEC JTC1 SC29 Working Group 1 Najbardziej rozpowszechniony: IS 10918-1 (ITU-T T.81) Znany przede wszystkim z powodu bardzo dobrej kompresji Rozszerzenie *.jpg

JPEG (Joint Photographic Experts Group) Paleta barw – TrueColor (24-bit) Rodzaje palet RGB CMYK (Cyan Magenta Yellow blacK) Nie obsługuje przezroczystości (brak kanału alfa) Linie poziome – 33 KB (PNG – 25 KB) Linie pionowe – 45 KB

JPEG (Joint Photographic Experts Group) WYŚWIETLANIE SEKWENCYJNE (PROGRESYWNE) Wpierw wyświetlane są kontury, a potem dochodzą kolejne szczegóły Obraz zapisany progresywnie jest nieco większy

JPEG (Joint Photographic Experts Group) ANIMACJA Format JPEG nie obsługuje animacji Linie poziome – 33 KB (PNG – 25 KB) Linie pionowe – 45 KB

JPEG (Joint Photographic Experts Group) KOMPRESJA Stratna – przy zapisie tracona jest część informacji Przy małym współczynniku kompresji (do 20) strata jakości niezauważalna Przy większym – widoczne kwadratowe pola i zaburzenia wokół konturów Linie poziome – 33 KB (PNG – 25 KB) Linie pionowe – 45 KB

JPEG (Joint Photographic Experts Group) KOMPRESJA Standard JPEG pozwala na stosowanie różnych algorytmów kompresji System bazowy wykorzystuje dyskretną transformację kosinusową Linie poziome – 33 KB (PNG – 25 KB) Linie pionowe – 45 KB

JPEG (Joint Photographic Experts Group) ZALETY: Paleta TrueColor Kompresja znacznie zmniejszająca rozmiar pliku Progresja – wczytywanie szczegółów w kolejnych przejściach WADY: Strata jakości podczas kompresji Brak animacji Brak przezroczystości

ZESTAWIENIE BMP GIF PNG JPEG Opcje Liczba kolorów (bity) 24 8 48 Przezroczystość NIE TAK (jest-nie ma dla kolorów) (256 stopni dla każdego piksela) Przeplot/ Progresja NIE/NIE TAK/NIE TAK/TAK NIE/TAK Animacja Kompresja (z małym wyjątkiem) (bezstratna, LZW) (bezstratna, LZ77) (stratna) Rozmiar pliku BARDZO DUŻY ŚREDNI MAŁY BARDZO MAŁY Zastosowanie Zdjęcia do dalszej obróbki Ozdobniki graficzne, przyciski, bannery Ozdobniki graficzne, przyciski Zdjęcia do prezentacji w Internecie

DjVu Format powstały w 1999 Stanowi ogromną konkurencję dla GIF-a i JPEG-a, gdyż jego kompresja nierzadko przewyższa wspomniane formaty a przy tym umożliwia zapis obrazu bez utraty jakości. Wykorzystuje kompresję wavelet - jedną z najbardziej zaawansowanych na świecie. Niestety jak to zwykle bywa, "jeśli coś jest dobre to wymaga pluginu", którego wielkość przekracza 2 MB.

LWF Daje lepsze efekty od JPEG, jednak wymaga ściągnięcia odpowiedniego pluginu. Jest bardziej popularny od wcześniej wspomnianego DjVu, stąd ma większe szansę podbić sieć.

SVG Nie posiada on algorytmów kompresujących Jest formatem wektorowym Oparty jest na języku XML, stąd jego treść stanowią linijki kodu podobnie jak w HTML-u Stanowi konkurencję przede wszystkim dla formatu GIF. Do przeglądania plików *.svg potrzebny jest plugin (np. Adobe SVG Viewer) Tekst zagnieżdżony w pliku *.svg daje się kopiować tak jak zwykły tekst w dokumencie HTML, może on też być katalogowany i wyszukiwany przez wyszukiwarki Pliki *.svg można tworzyć za pomocą zwykłego edytora tekstu bądź przy pomocy najnowszych wersji pakietów Corel Draw i Adobe Ilustrator z odpowiednimi pluginami

FLASH Format firmy Macromedia Wektorowe pliki graficzne *.swf zapewniają wysoką jakość obrazów, możliwość wprowadzenia interaktywności Kilkuminutowy, interaktywny, udźwiękowiony, film *.swf zajmuje zaledwie kilkaset kilobajtów Duża popularność tego formatu w Sieci

LITERATURA Adi, Formaty plików graficznych, http://www.admi.cad.pl/formaty.htm Gawenda M. (oprac.), Formaty graficzne a fotografie na stronach www, http://www.photoweb.pl/articles/files1.htm Imieliński P., W warsztacie dekoracyjnym witryn w: Chip 11/2000, s. 226-230 Imieliński P., Magiczny format GIF w: Chip 12/2000, s. 246-250 Michalczyk J. (oprac.), GIF od środka w: Chip 7/1997, s. 94-96 Reda T., Formaty graficzne a optymalizacja grafiki dla WWW, http://nethut.pl/artykul.php/t/94 Tomza R., Formaty zapisu grafiki, http://nethut.pl/artykul.php/t/64 Winkler B., Multimedialna dieta w: Enter 2/2001, s. 120-122 Witczak Ł., Grafika dla Internetu, http://nethut.pl/artykul.php/t/56