Rozdział 8. u Tworzenie obrazów na potrzeby sieci 221
Mogłoby się zdawać, że w poprzednim rozdziale opowiedzieliśmy już wszystko o obrazach wykorzystywanych w sieci. Cóż, rzeczywiście na temat użycia obrazów w HTML była już mowa, ale o samych obrazach powiedzieliśmy dotąd bardzo niewiele. Jest kilka rzeczy, które warto wiedzieć o ich przygotowaniu, choć z językiem HTML te wstępne zabiegi nie mają nic wspólnego. W tym rozdziale wyjaśnimy sobie kilka podstawowych pojęć dotyczących obrazów umieszczanych w sieci i obrazów w ogóle, między innymi, omówione zostaną następujące tematy:
n formaty obrazów wykorzystywane w sieci: GIF oraz JPEG,
n systemy barwne: HSB i RGB, głębia koloru, palety barw i sposób wykorzystania kolorów w obrazie,
n wpływ kompresji na jakość obrazu i wielkość pliku,
n zapis przejrzystości oraz przeplot w plikach GIF i JPEG,
n sposoby tworzenia i wykorzystania obrazów,
n przyszłość: format PNG.
GIF, a dokładniej — CompuServeGIF, to obecnie najpopularniejszy format graficzny używany w sieci. Format GIF (skrót od: Graphic Interchange Format) został opracowany przez CompuServe jako środek komunikacji między różnymi systemami komputerowymi. Powinieneś umieć odczytać obraz w formacie GIF na każdym komputerze, byle tylko po-siadał on nadające się do tego oprogramowanie.
Słowo „GIF” należy wymawiać miękko — „dżiiif”, a nie z twardym „g” na początku („gyf”). To szczera prawda. Informacja ta pochodzi z wczesnej dokumentacji tego formatu.
Istnieją dwie, bardzo podobne do siebie odmiany formatu GIF: oryginalny format GIF87 oraz jego ulepszona, nowocześniejsza wersja, GIF89a. Format GIF89a został wyposażony w zapis przezroczystości oraz przeplot, może też przechowywać kolejne ujęcia. Nadaje się więc do zapisywania prostych animacji. O zapisie przejrzystości i przeplocie będzie jeszcze mowa w dalszej części tego rozdziału. Natomiast więcej informacji na temat zapisywania ciągu obrazów w pliku GIF znajdziesz w rozdziale 9. — „Tworzenie animowanych obrazów”.
GIF-y doskonale nadają się do przechowywania znaków firmowych, ikon i prostych grafik. Gorzej radzą sobie z bardziej skomplikowanymi, bogatszymi w szczegóły obrazami, gdyż format GIF pozwala zapisać jedynie 256 barw. Fotografie wyeksportowane w formacie GIF wydają się zwykle ziarniste i poplamione.
Największy problem, jaki wiąże się obecnie z wykorzystaniem formatu GIF, nie ma nic wspólnego z technicznymi aspektami tej sprawy. Otóż zabudowany w nim system kompresji LZW, jest chroniony prawem patentowym. Właściciel patentu, UniSys zażądał opłaty od każdej kopii LZW. Opłatę tę obowiązani są uiszczać wszyscy użytkownicy formatu GIF, korzystający z niego po roku 1994, chyba że chodzi o niekomercyjne zastosowania tego oprogramowania. Opłata obowiązuje twórców oprogramowania sieciowego oraz graficznego. Z tego właśnie powodu format GIF może wkrótce stracić popularność na rzecz jakiegoś bardziej dostępnego formatu, również wyposażonego w zdolność komunikowania się z różnymi platformami sprzętowymi. Niewykluczone, że formatem tym będzie PNG, o którym opowiem w dalszej części tego rozdziału.
Ten format wydaje się najbardziej prawdopodobną kandydaturą do zastąpienia formatu GIF. Skrót JPEG oznacza Joint Photographic Expert Group — jest to firma, która ten format stworzyła. Właściwie JPEG jest raczej pewnym systemem kompresji obrazu, który może być wykorzystywany przez rozmaite formaty plików. Jednak również ten format, dla którego omawiany system opracowano i wprowadzono w życie po raz pier-wszy, znany jest powszechnie jako JPEG (wymawiany jak „dżaj-peg”).
JPEG został zaprojektowany dla potrzeb przechowywania obrazów fotograficznych. Inaczej niż w przypadku obrazu w formacie GIF, obraz JPEG może mieć dowolną liczbę kolorów. Kompresja wykorzystywana przez format JPEG sprawdza się szczególnie dobrze dla cyfrowych fotografii, pozwalając uzyskać pliki o rozmiarach znacznie mniejszych, niż gdybyśmy zapisali ten sam obraz w formacie GIF. Format ten wykorzystuje algorytm kompresji stratnej, co oznacza, że część danych obrazu zostanie odrzucona w celu zmniejszenia jego wielkości. Kompresja tego typu doskonale nadaje się do zapisu obrazów fotograficznych, lecz jednocześnie sprawia, że format JPEG nie jest odpowiedni do zapisu obrazów zawierających elementy o ostrych krawędziach, takich jak logo firm, grafika liniowa oraz tekst. Wszystkie popularne przeglądarki WWW obsługują obrazy zapisane w formacie JPEG.
Gdybyśmy mogli poświęcić całą książkę na omówienie teorii kolorów, to opisalibyśmy co najmniej pół tuzina różnych systemów barwnych. Ta książka ma jednak traktować o sieciach, a rozdział ma dotyczyć obrazów przesyłanych i wyświetlanych za pośrednictwem sieci. Nie ma więc potrzeby aż tak się rozwodzić nad systemami barwnymi (i przy okazji zanudzić naszych Czytelników). Omówimy więc tylko dwa główne systemy barwne: model HSB (Hue, Saturation, Brightness) oparty na sposobie postrzegania kolorów przez ludzkie oko oraz komputerowy model RGB (Red, Green, Blue). Mając podstawowe wiadomości na temat tych dwóch modeli barwnych, powinniśmy bez trudu zapanować nad barwami obrazów przeznaczonych do wykorzystania w sieci.
Model HSB (Hue, Saturation, Brightness) zwany jest czasem modelem subiektywnym lub percepcyjnym, gdyż opisuje on kolory w sposób zgodny z naszym intuicyjnym rozumieniem barw. W systemie barwnym HSB kolor opisywany jest przez trzy czynniki: odcień (Hue), nasycenie (Saturation) i jasność (Brightness).
HSB (skrót od: Hue, Saturation, Brightness) to system opisywania kolorów w sposób zgodny z subiektywnym postrzeganiem ich przez ludzkie oko.
Przez odcień (Hue) rozumiemy zasadniczą barwę. Wyobraź sobie, że jesteś malarzem i nakładasz na paletę farbę z tubki: czerwoną, niebieską, żółtą, pomarańczową, fioletową... i tak dalej, przez wszystkie kolory tęczy. Ten „kolor z tubki”, to właśnie nasz odcień. Nie musi to być koniecznie albo zielony, albo niebieski — są też odcienie pośrednie, np. zielononiebieski albo żółtopomarańczowy. Jako odcień może posłużyć nam każda z barw słonecznego spektrum, rozłożonego na tzw. kole barw. Wybrany odcień z koła barw określamy za pomocą miary kątowej, od 0 do 360°. Odcień żółty znajdziemy na 120°, niebieski na 240°, a wszystkie odcienie pośrednie — pomiędzy nimi (patrz rysunek 8.1).
Rysunek 8.1.
Odcienie
Odcień to zasadnicza barwa, na bazie której budujemy kolor, przykładowo może to być barwa czerwona, niebieska, albo żółto-zielona. Wartość odcienia może zmieniać się od 1 do 360.
Jasność określa jak ciemny lub jak jasny jest dany kolor. Zmieniamy ją, dodając do wyjściowego odcienia czerni lub bieli. Jasność jest wartością procentową, przy czym 0 oznacza biel a 100 — czerń (patrz rysunek 8.2).
Rysunek 8.2.
Jasność
Nasycenie to intensywność używanego koloru — czyli ile danego koloru istnieje w uzyskiwanej barwie. Używając błękitu, stanowiącego połączenie farby niebieskiej i odrobiny białej, możesz dodać nieco niebieskiej farby, aby zwiększyć nasycenie koloru i sprawić, by był on bardziej niebieski. Także nasycenie określane jest procentowo; 0 oznacza, że danego koloru nie ma, a 100, że dany kolor jest czysty (patrz rysunek 8.3).
Rysunek 8.3.
Nasycenie
Korzystając z modelu HSB, możemy odwzorować dowolną barwę, a co najważniejsze, możemy ją precyzyjnie określić za pomocą trzech liczb, odpowiadających wartościom parametrów H, S i B. Także sam proces dobierania barw jest prosty, gdy korzystamy z systemu barwnego HSB. Gdy chcemy daną barwę trochę rozjaśnić, wystarczy zmniejszyć parametr Brightness. Gdy zaś chcemy, na przykład, uczynić tę barwę odrobinę bardziej niebieskawą, zmienimy nieco wartość parametru Hue, wybierając sąsiedni odcień z koła barw. W wielu programach malarskich (takich jak, na przykład, Photoshop) przy wybieraniu koloru korzysta się domyślnie właśnie z modelu HSB, jako najwygodniejszego (patrz rysunek 8.4). Jeśli korzystałeś kiedyś z okna wyboru koloru (Color Picker) na Twoim komputerze, to prawdopodobnie miałeś do czynienia z modelem HSB, choć, być może, nazywał się on nieco inaczej (na przykład, HSL — Hue, Saturation, Lightness).
Rysunek 8.4.
Okno wyboru koloru (Color Picker) programu Photoshop z aktywnym modelem barw HSB
Gdy już tak ładnie uporządkowaliśmy sobie wiadomości o barwach, posługując się przy tym terminami wziętymi z systemu barwnego HSB, pora to wszystko wywrócić do góry nogami. Edytując obrazy i przesyłając je w sieci, przeważnie mamy do czynienia z zupełnie innym sposobem zapisu barw. Większość programów graficznych opisuje kolory w systemie barwnym RGB (Red, Green, Blue).
System barwny RGB to właśnie ten, którym posługują się monitory komputerowe, by wyświetlić określony kolor. Gdybyś popatrzył na monitor naprawdę z bliska, rozróżniłbyś maleńkie rozbłyski barwy czerwonej, zielonej i niebieskiej, wytwarzane przez działa elektronowe Twojego kineskopu. Kombinacje kropek w tych trzech kolorach pozwalają uzyskać złudzenie występowania różnych barw na ekranie. Jak już mówiliśmy w rozdziale poprzednim, kolory w systemie RGB określamy za pomocą trzech wartości, po jednej dla każdej ze składowych barwnych — czerwonej (Red), zielonej (Green) i niebieskiej (Blue). Każda z tych wartości może zmieniać się w zakresie od 0 do 255. Przykładowo, kolor czarny w systemie RGB zapisujemy jako 0, 0, 0, a kolor biały jako 255, 255, 255. Pomiędzy tymi krańcowymi przypadkami mieści się cała gama kolorów, zapisywanych przy użyciu wartości pośrednich. Łącznie możemy zdefiniować więcej niż 16,7 miliona różnych barw, czyli więcej, niż potrafi rozróżnić ludzkie oko.
Jakkolwiek w systemie barwnym RGB możesz zdefiniować dowolny kolor spośród 16,7 miliona dostępnych barw, Twój monitor lub też karta graficzna mogą nie być w stanie go wyświetlić. Te 16,7 miliona barw to tzw. kolor 24-bitowy. (Wartość każdej z trzech składowych barwnych systemu RGB zapisuje się przy użyciu 8 bitów, razem więc mamy 3 * 8 = 24 bity.) Jeśli Twój wyświetlacz pracuje w kolorze 8-bitowym lub16-bitowym, potrafi wyświetlić odpowiednio: 256 lub 65 536 barw. Gdy zażądamy wyświetlenia takiego koloru z 24-bitowej gamy barw, jakiego mu brak, spróbuje zastąpić brakujący najbardziej zbliżonym lub, w drugim przypadku, wyświetli wzorek z różnokolorowych pikseli, które łącznie mają stworzyć wrażenie potrzebnej barwy. Tworząc obrazy na monitorze o ograniczonych możliwościach, nie musisz jednak martwić się zbytnio o ewentualne przekłamania barw. Po wyświetleniu obrazu na monitorze, który potrafi odtworzyć większą ilość barw, obrazy nie zmieniają się zwykle zasadniczo. Jedynie przejścia pomiędzy poszczególnymi barwami stają się bardziej płynne.
Zwróć uwagę, że możesz zdefiniować dowolny kolor zarówno w systemie RGB, jak i HSB. To nie są dwa odrębne zestawy kolorów, to po prostu dwa różne matematyczne systemy opisywania koloru. Temu samemu kolorowi możemy przypisać określone wartości w systemie RGB albo w systemie HSB, możemy też przekonwertować kolor z jednego systemu do drugiego, nie zmieni się on przy tym ani na jotę. Wybrać system barwny dla określenia koloru, to jakby wybrać jednostkę miary dla pomiaru swojego wzrostu. Możemy zmierzyć swoją wysokość w calach, centymetrach albo odmierzyć ją puszkami po coca-coli. Uzyskamy najzupełniej różne wartości liczbowe, ale przecież nasz wzrost pozostanie ten sam.
Dlaczego więc tak się rozwodzimy nad systemem HSB, skoro RGB jest o wiele popularniejszy? Ponieważ zmienić kolor w systemie HSB jest o wiele łatwiej, niż dokonać takiej samej operacji w systemie RGB. Zwykle nie myślimy o kolorach w taki sposób: „powinienem podnieść poziom zieleni na tym obszarze obrazu”. Nawiasem mówiąc, przy pracy w systemie RGB taka operacja spowodowałaby nadanie obrazowi bardziej pomarańczowo-czerwonego odcienia — wierzcie lub nie. Dlatego też, pracując nad obrazem, powinniśmy myśleć o jego barwach w kategoriach systemu HSB. Pamiętajmy jednak, że gdy program pyta nas o kolor, chce otrzymać odpowiedź wyrażoną w wartościach systemu RGB. Na szczęście, okna dialogowe wyboru koloru oraz narzędzia do edycji większości programów graficznych potrafią się posługiwać wymiennie obu systemami barwnymi — RGB oraz HSB.
Oba formaty plików, używane do zapisu obrazów — JPEG i GIF — wyrażają kolory w systemie RGB, za pomocą zestawu trzech wartości, zmieniających się od 0 do 255. Zasadnicza różnica między tymi formatami polega na tym, że w formacie GIF ogólna liczba użytych w obrazie kolorów nie może przekroczyć 256, zaś w formacie JPEG możemy przechować dowolną liczbę barw.
Format GIF wykorzystuje tzw. kolor indeksowany lub, jak kto woli, ograniczoną paletę barw. Paleta barw to zestaw maleńkich próbek różnych kolorów, przy czym każdy piksel w obrazie musi przyjąć swą barwę od jednej z tych próbek. Jeśli poddamy edycji kolor próbki wziętej z palety, to wszystkie związane z tą próbką piksele także zmienią swój kolor (patrz rysunek 8.5).
Rysunek 8.5.
Paleta kolorów obrazu w formacie GIF
Obraz w formacie GIF posiada paletę złożoną z 256 próbek, a więc taka jest maksymalna liczba różnych barw, jakie mogą w nim wystąpić. Gdy konwertujemy obraz do formatu GIF, zazwyczaj musimy zredukować liczbę jego barw do 256. Gdy użyjemy do tej konwersji jakiegoś dobrego programu malarskiego, możemy zwykle w jakiś sposób wpływać na to, które z barw obrazu zostaną pominięte, a które nie.
Oczywiście, możemy też zapisać obraz w formacie GIF przy użyciu mniejszej liczby barw. Nie jest to wcale zły pomysł: im mniej kolorów, tym mniejszy będzie rozmiar pliku.
Palety kolorów określane są na wiele różnych sposobów, na przykład, color table, indexed color, palette, color index lub też Color LookUp Table — w skrócie CLUT bądź LUT. Zawsze jednak chodzi o to samo: jest to zestaw barw występujących w obrazie. Twój program malarski powinien umożliwić Ci wgląd w paletę kolorów obrazu. Poszukaj w menu jednej z wyżej wymienionych nazw.
Obraz w formacie JPEG może zawierać dowolną liczbę różnych barw, co daje możliwość przebierania wśród milionów kolorów. Dobrowolne ograniczenie liczby barw nie wpłynie decydująco na wielkość pliku, gdyż w przypadku formatu JPEG ostateczna wielkość pliku zależy przede wszystkim od wybranego przez nas stopnia kompresji, a nie od liczby kolorów.
Gdy zaczynałam eksperymentować z obrazami w sieci, ktoś dał mi dobrą radę: ogranicz liczbę barw w obrazie, a plik stanie się mniejszy. Dobrze, pomyślałam, to wygląda sensownie. Ale jak właściwie mam zredukować liczbę barw? W przypadku prostych ikonek i znaczków mogę ograniczyć się przy ich malowaniu do kilku barw. Ale co z bardziej skomplikowanymi obrazami, jak zeskanowane fotografie albo kolorowe grafiki? Ręczna redukcja ilości występujących w nich barw wygląda na niewiarygodnie żmudne zajęcie.
Przy pomocy kilku moich przyjaciół, zajmujących się na co dzień grafiką komputerową i edycją obrazów, opracowałam pewne rozwiązanie tego problemu. Przedstawię je w tym ćwiczeniu. Prześledzimy tu cały proces, przez jaki zwykle przechodzę, gdy chcę ograniczyć liczbę barw dla określonego obrazu.
Do redukcji barw zamierzam użyć Adobe Photoshopa. Gdy dużo pracuje się z obrazami rastrowymi, Photoshop jest chyba najlepszym narzędziem, jakie można sobie wymarzyć. Można go uruchomić w systemie Macintosh, Windows, Sun oraz SGI. Jeśli jednak używasz do edycji obrazów innego programu malarskiego, sprawdź w jego dokumentacji, czy zawiera narzędzia potrzebne do wykonania opisanych niżej operacji.
Obraz, od którego zaczniemy, będzie zapisanym w systemie barwnym RGB rysunkiem róży, w którym użyto wielu odcieni barwy różowej i zielonej (patrz rysunek 8.6). Na zamieszczonym tu obrazku nie możesz oczywiście zobaczyć ani różu, ani zieleni, ale chyba bez trudu wyobrazisz sobie ten kwiatek w kolorach.
Rysunek 8.6.
Różowy róża
Na początek spróbujemy przekonwertować ten obraz do systemu barwnego Indexed Color, co pozwoli nam przygotować go do zapisania w formacie GIF. Przy odrobinie szczęścia może się okazać, że nasz wyjściowy rysunek wcale nie zawiera więcej niż 256 barw, a to by bardzo uprościło nasze zadanie.
W programie Adobe Photoshop, wybranie z górnego menu Mode polecenia Indexed Color powoduje wyświetlenie okna dialogowego, takiego jak na rysunku 8.7 (w Photoshopie 3.0; w Photoshopie 4.0 wybieramy z górnego menu: Obrazek/Tryb/Kolor indeksowany (Image/ Mode/Indexed Color).
Jeżeli obraz rzeczywiście zawiera mniej niż 256 kolorów, ich rzeczywista ilość zostaje wyświetlona w okienku opcji Other...
lukaszwalda