273

8

              Tworzenie obrazów na potrzeby sieci

Rozdział 8.

Tworzenie obrazów na potrzeby sieci

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.

Formaty obrazów

GIF

GIF, a dokładniej — CompuServeGIF, to obecnie najpopularniejszy format graficzny używa­ny w sieci. Format GIF (skrót od: Graphic Interchange Format) został opracowany przez CompuServe jako środek komunikacji między różnymi systemami komputerowymi. Powi­nieneś umieć odczytać obraz w formacie GIF na każdym komputerze, byle tylko po­siadał on nadające się do tego oprogramowanie.

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 za­pisywania prostych animacji. O zapisie przejrzystości i przeplocie będzie jeszcze mowa w dal­szej 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 kompres­ji 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 siecio­wego oraz graficzne­go. Z tego właśnie powodu format GIF może wkrótce stracić popular­ność 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.

JPEG

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 pierwszy, 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.

Kolor

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 sie­ciach, a rozdział ma dotyczyć obrazów przesyłanych i wyświetlanych za pośred­nictwem 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 wiado­mości na temat tych dwóch modeli barwnych, powinniśmy bez trudu zapanować nad barwa­mi obrazów przeznaczonych do wykorzystania w sieci.

System barwny HSB (Hue, Saturation, Brightness)

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).

Przez odcień (Hue) rozumiemy zasadniczą barwę. Wyobraź sobie, że jesteś malarzem i na­kł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 rys. 8.1).

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 para­metró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 rys. 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).

System barwny RGB (Red, Green, Blue)

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 barw­nym RGB (Red, Green, Blue).

Nowe pojęcie              System barwny RGB to właśnie ten, którym posługują się monitory komputero­we, 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 elek­tronowe 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 poprzed­nim, 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 war­toś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.

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 sys­temie 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. Uzyska­my 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 popularniej­szy? 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 syste­mie RGB taka operacja spowodowałaby nadanie obrazowi bardziej pomarańczowo-czerwo­nego 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.

Formaty map bitowych i palety kolorów

Oba formaty plików, używane do zapisu obrazów — JPEG i GIF — wyrażają kolory w sys­temie 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.

Nowe pojęcie              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 rys. 8.5).

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 ja­kiegoś 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.

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 de­cydują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.

Ćwiczenie 8.1: Redukcja kolorów w obrazie GIF

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 skomplikowany­mi 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.