Popularne formaty grafiki

Popularne formaty grafikiCharakterystyka i możliwościzastosowania w dokumentachWWW© Adam Czarnecki 20021

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

BMP (BitMap Picture)• Maksymalna liczbakolorów: 16.777.216(24-bit = 10^24)• Paleta barw:R - RedG - GreenB - Blue3

BMP (BitMap Picture)• KOMPRESJA:• Z reguły nie stosujesię• Obrazy 4- i 8-bitowemożnakompresowaćmetodą RLE (RunLength Encoding)4

BMP (BitMap Picture)• STRUKTURAPLIKU:• Nagłówek (54 bajty)• Opcjonalnie –paleta typu RGB(768 bajtów)• Dane obrazowe (po3 bajty na piksel) –linie zapisywane oddołu do góryNagłówekPaleta (opcja)Właściwy obraz5

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

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

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

9GIF (Graphics Interchange Format)• PALETADOKŁADNA• Daje paletęskonwertowaną woparciu o barwyidentyczne zwystępującymi wobrazie i należącedo modelu RGB• Dla ilustracji

10GIF (Graphics Interchange Format)• PALETABEZPIECZNA WWW• Opiera się na 216barwachindeksowanejpalety kolorów• Zapewniajednakowewyświetlanie wdowolnym systemiei przeglądarce

11GIF (Graphics Interchange Format)• PALETASYSTEMOWA(Windows lub Mac OS)• Do jej tworzeniastosuje się 8-bitowątabelę kolorów opartąna ujednoliconychpróbkach kolorówRGBwykorzystywanąprzez każdy zsystemówoperacyjnych

GIF (Graphics Interchange Format)• PALETA ADAPTACYJNA• Tworzy paletę barw napodstawie próbkowaniakolorów najczęściejwystępujących wobrazie• Pozwala nazredukowanie liczbykolorów zzachowaniem spektrumkolorystycznegoilustracji12

13GIF (Graphics Interchange Format)• ROZTRZĄSANIE(ang. DITHERING)• Uzyskiwanie barwwystępujących wobrazie, aleniedostępnych dlaśrodowiskaoperacyjnego• Oparta nazłudzeniuoptycznym

GIF (Graphics Interchange Format)• ROZTRZĄSANIE(ang. DITHERING)• Zalecane dlaobrazów o małejliczbie kolorów izawierającychprzejścia tonalne• Niewskazane dlaobszarów ojednolitym kolorze14

15GIF (Graphics Interchange Format)• ROZTRZĄSANIEWZORKOWE (ang.PATTERNDITHERING)• Tworzenie naekranie wzorkupółtonowychkwadracikówsymulujących barwyspoza tabelikolorów

GIF (Graphics Interchange Format)• PRZEZROCZYSTOŚĆ(ang.TRANSPARENCY)• Ustawienie jednego lubkilku kolorów jakoniewidocznego tła• Brak regulacji stopniaprzezroczystości• Pozwala na efektownenakładanie na siebieobiektów graficznych16

17GIF (Graphics Interchange Format)• PRZEPLOT (ang.INTERLACE)• Wyświetlanie co n-tej linii podczasładowania obrazu• Kolejne „przejście”dokłada następnelinie• Mózg ludzkiuzupełnia brakującelinie

18GIF (Graphics Interchange Format)• ANIMACJA• GIF umożliwiawyświetlaniekolejno wieluobrazówtworzącychanimację• Regulacji podlegaczas wyświetlaniakażdego obrazkaskładowego

19GIF (Graphics Interchange Format)• KOMPRESJA• Bezstratna - patentLZW (Lempel, Ziv,Welch)• Jeżeli w wierszusąsiaduje kilkapikseli tego samegokoloru, zapisywanajest informacja okolorze i ilościpikseli

GIF (Graphics Interchange Format)• ZALETY:• Stosunkowo małaobjętość dziękibezstratnej kompresji• Przezroczystość (aletylko JEST/NIE MA)• Animacja• Przeplot• Możliwośćoptymalizacji paletykolorów• WADY:• Tylko 256 kolorów• Ryzykoniewłaściwegowyświetlania wniektórychprzeglądarkach isystemach• Licencja na format ikompresję20

PNG (Portable Network Graphics)• Odpowiedź na egzekwowanie swoichpraw związanych z GIF-em przezCompuServe INC.• Autor: zespół IETF kierowany przezThomasa Boutella (boutell@boutell.com)• Założenie – format bezpłatny iusuwający ograniczenia GIF-a• Rozszerzenie *.png21

PNG (Portable Network Graphics)• Paleta kolorów –TrueColor (48-bit)• Dla odcieni szarości– 16-bit (informacja ojasności)• Obsługa korekcjigamma22

23PNG (Portable Network Graphics)• PRZEZRO-CZYSTOŚĆ (ang.TRANSPARENCY)• Współczynnikprzezroczystości(ang. alphachannel) pozwalaokreślić stopieńprzezroczystościkażdego piksela(256 stopni)

PNG (Portable Network Graphics)• PRZEPLOT (ang.INTERLACE)• Plik z przeplotem jestnieco większy• Pierwszy obraz pojawiasię 8x szybciej niż przyGIF-ie (kosztem jegojakości)• Tekst zapisany w PNGstaje się czytelny ok. 2xszybciej niż w GIF-ie24

25PNG (Portable Network Graphics)• WYŚWIETLANIESEKWENCYJNE(PROGRESYWNE)• Wpierwwyświetlane sąkontury, a potemdochodzą kolejneszczegóły• Obraz zapisanyprogresywnie jestnieco większy

PNG (Portable Network Graphics)• ANIMACJA• Format PNG nieobsługuje animacji26

27PNG (Portable Network Graphics)• KOMPRESJA• Jedyny popularnyformat obsługującybezstratną 24-bitową kompresję• Algorytmsłownikowy LZ77oraz statystycznelub adaptacyjnekodowanieHuffmana

PNG (Portable Network Graphics)• ZALETY:• Paleta TrueColor• Bezstratna kompresja olepszym algorytmie niżGIF• Przezroczystość oregulowanym stopniu• Przeplot i ładowaniesekwencyjne• Brak opłat licencyjnych• WADY:• Brak animacji• Nie obsługiwanyprzez starszeprzeglądarki28

JPEG (Joint Photographic Experts Group)• Zbiór standardów opracowany przezISO/IEC JTC1 SC29 Working Group 1• Najbardziej rozpowszechniony: IS10918-1 (ITU-T T.81)• Znany przede wszystkim z powodubardzo dobrej kompresji• Rozszerzenie *.jpg29

30JPEG (Joint Photographic Experts Group)• Paleta barw –TrueColor (24-bit)• Rodzaje palet• RGB• CMYK(Cyan MagentaYellow blacK)• Nie obsługujeprzezroczystości(brak kanału alfa)

31JPEG (Joint Photographic Experts Group)• WYŚWIETLANIESEKWENCYJNE(PROGRESYWNE)• Wpierwwyświetlane sąkontury, a potemdochodzą kolejneszczegóły• Obraz zapisanyprogresywnie jestnieco większy

JPEG (Joint Photographic Experts Group)• ANIMACJA• Format JPEG nieobsługuje animacji32

JPEG (Joint Photographic Experts Group)• KOMPRESJA• Stratna – przy zapisietracona jest częśćinformacji• Przy małymwspółczynnikukompresji (do 20) stratajakości niezauważalna• Przy większym –widoczne kwadratowepola i zaburzenia wokółkonturów33

34JPEG (Joint Photographic Experts Group)• KOMPRESJA• Standard JPEGpozwala nastosowanie różnychalgorytmówkompresji• System bazowywykorzystujedyskretnątransformacjękosinusową

35JPEG (Joint Photographic Experts Group)• ZALETY:• Paleta TrueColor• Kompresjaznaczniezmniejszającarozmiar pliku• Progresja –wczytywanieszczegółów wkolejnychprzejściach• WADY:• Strata jakościpodczas kompresji• Brak animacji• Brakprzezroczystości

ZESTAWIENIEOpcjeBMPGIFPNGJPEGLiczba kolorów(bity)2484824PrzezroczystośćNIETAK(jest-nie ma dla kolorów)TAK(256 stopni dla każdegopiksela)NIEPrzeplot/ProgresjaNIE/NIETAK/NIETAK/TAKNIE/TAKAnimacjaNIETAKNIENIEKompresjaNIE(z małym wyjątkiem)TAK(bezstratna, LZW)TAK(bezstratna, LZ77)TAK(stratna)Rozmiar plikuBARDZO DUŻYŚREDNIMAŁYBARDZO MAŁYZastosowanieZdjęcia do dalszejobróbkiOzdobniki graficzne,przyciski, banneryOzdobniki graficzne,przyciskiZdjęcia do prezentacji wInternecie36

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

LWF• Daje lepsze efekty od JPEG, jednakwymaga ściągnięcia odpowiedniegopluginu.• Jest bardziej popularny od wcześniejwspomnianego DjVu, stąd ma większeszansę podbić sieć.38

SVG• Nie posiada on algorytmów kompresujących• Jest formatem wektorowym• Oparty jest na języku XML, stąd jego treść stanowią linijki kodupodobnie jak w HTML-u• Stanowi konkurencję przede wszystkim dla formatu GIF.• Do przeglądania plików *.svg potrzebny jest plugin (np. AdobeSVG Viewer)• Tekst zagnieżdżony w pliku *.svg daje się kopiować tak jakzwykł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 tekstubądź przy pomocy najnowszych wersji pakietów Corel Draw iAdobe Ilustrator z odpowiednimi pluginami39

40FLASH• 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 kilkasetkilobajtów• Duża popularność tego formatu w Sieci

41LITERATURA• Adi, Formaty plików graficznych,http://www.admi.cad.pl/formaty.htm• Gawenda M. (oprac.), Formaty graficzne a fotografie na stronachwww, 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