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:

• formaty obrazów wykorzystywane w sieci: GIF oraz JPEG,

• systemy barwne: HSB i RGB, głębia koloru, palety barw i sposób wykorzystania kolorów w obrazie,

• wpływ kompresji na jakość obrazu i wielkość pliku,

• zapis przejrzystości oraz przeplot w plikach GIF i JPEG,

• sposoby tworzenia i wykorzystania obrazów,

• przyszłość: format PNG.

Formaty obrazów

GIF

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.

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

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

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

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

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 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 lub 16-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.

Formaty map bitowych i palety kolorów

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.

Ć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 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 w polu Resolution. W takiej sytuacji należy bezwzględnie skorzystać z tych właśnie barw. W ten sposób nie będziemy musieli usuwać żadnych kolorów i zachowamy nasz obraz niezmieniony. W przypadku naszej róży nie

Rysunek 8.7. Okno dialogowe systemu Indexed Color w Photoshopie

mamy jednak szczęścia: nic nie pojawiło się w okienku Other, a więc jednak będzie trzeba dokonać redukcji barw. Cóż, trudno.

Aby ograniczyć liczbę kolorów w obrazie, wybieramy jeden z kilku przycisków w polu Color Depth. Ustalamy w ten sposób liczbę bitów przypadającą na jeden piksel obrazu. Im mniej bitów, tym mniej kolorów w obrazie. Tabela 8.1 pokazuje tę zależność.

Tabela 8.1:

Ilość barw w obrazie

Ilość bitów na piksel obrazu	Ilość kolorów
3 bity/piksel	8 kolorów
4 bity/piksel	16 kolorów
5 bity/piksel	32 kolory
6 bity/piksel	64 kolory
7 bity/piksel	128 kolorów
8 bity/piksel	256 kolorów

Należy pamiętać, że każda z tych barw definiowana jest w systemie barwnym RGB, z zachowaniem pełnej swobody wyboru. Nie ma żadnych ograniczeń stosowania określonych kolorów, jedyne, to ich łączna ilość. Możemy więc mieć obraz złożony z 256 barw, w którym wszystkie barwy są rozmaitymi odcieniami różu, jeśli tego sobie właśnie życzymy.

Ponieważ zmniejszenie liczby kolorów jest dla nas korzystne, powinniśmy spróbować maksymalnego ograniczenia ilości barw, do ośmiu kolorów w obrazie (3 bity na piksel). Gdy dokonujemy redukcji barw w Photoshopie, program prosi o wybór palety barw i metody roztrząsania (ditheringu). Roztrząsanie polega na mieszaniu ze sobą pikseli o kilku aktualnie dostępnych barwach, tak by w danym obszarze obrazu piksele te utwo-rzyły odpowiedni „wzorek”. Oglądany z pewnej odległości, daje złudzenie występowania w tym miejscu gładkiego koloru, jednego z tych, których nam w obrazie brakuje, na przykład, ułożenie czarnych i białych pikseli w szachownicę daje wrażenie szarości. Zazwyczaj będziemy korzystać z roztrząsania typu Diffusion, gdyż pozwala ono uzyskać największą gładkość obrazu. Przy wyborze palety barw przeważnie będziemy korzystać z opcji Adaptive Palette. Po wybraniu tej opcji, program automatycznie oblicza ograniczoną paletę barw dla naszego obrazu, bazując na kolorach najczęściej w nim występujących.

Jeśli tak się szczęśliwie złożyło, że w Twoim wyjściowym obrazie było mniej niż 256 kolorów, wybierz paletę Exact, a nie Adaptive.

Po zamknięciu okna dialogowego kliknięciem na klawiszu OK, następuje konwersja pełnokolorowego obrazu do obrazu 3-bitowego o zaledwie ośmiu barwach. Na rysunku 8.8 widzimy efekt takiego przekształcenia; po prawej stronie zamieściłam dla porównania obraz oryginalny.

Rysunek 8.8. Nowy obraz (3 bity na piksel)

Przy ośmiu kolorach zatraca się wiele szczegółów obrazu oryginalnego. Nie widać już żyłek na liściach, a sama róża jest w tej chwili różowym kleksem z kilkoma czarnymi cieniami i białymi rozbłyskami.

Wszystko to można jednak jeszcze naprawić. Odwołujemy dokonaną przed chwilą konwersję, wybierając polecenie Undo i na ekranie znów pojawia się pełnokolorowa róża w systemie barwnym RGB. Nie dokonuj odwrotnej konwersji, wybierając system barwny RGB z menu Mode: utracone przy redukcji barw szczegóły obrazu nie zostałyby wtedy odtworzone. Użyj po prostu polecenia Undo.

Teraz znów próbujemy konwersji do systemu barwnego Indexed Color, lecz tym razem w polu Resolution wybieramy opcję 4 bits/pixel (cztery bity na piksel, czyli 16 kolorów). Ponawiamy próby, wybierając coraz większą ilość barw w obrazie, aż w końcu osiągniemy taką jakość obrazu, jaką już możemy zaakceptować. Naturalnie, najlepszą jakość osiągnie-my, korzystając z opcji 8 bits/pixel. Czasem jednak już przy 5 lub 6 bitach na piksel obrazu udaje się osiągnąć zupełnie zadowalający rezultat, a nasz 5-bitowy obraz nie różni bardzo od swej 8-bitowej wersji.

W przypadku naszej róży zdecydowałam się ostatecznie na 5 bitów na piksel, co daje łącznie 32 kolory w obrazie. Wpływ roztrząsania jest wprawdzie widoczny, ale obrazek jest całkiem czytelny i wygląda przyzwoicie. Rysunek 8.9 przedstawia efekt ostatecznej redukcji barw (po prawej stronie oryginalna róża dla porównania).

Rysunek 8.9. Ukończony obraz po przeprowadzeniu redukcji barw (5 bitów na piksel)

Być może zainteresuje Cię, jakie zmiany w wielkości pliku pociągnęły za sobą poczynione przez nas zmiany. Róża w wersji 8-bitowej, czyli o 256 barwach, zajmowała około 10,5 kB. W wersji 3-bitowej o ośmiu barwach tylko 3 kB. Wersja 5-bitowa, jaką ostatecznie wybraliśmy, jest udanym kompromisem pomiędzy tymi dwoma i zajmuje 6 kB pamięci dyskowej. Być może czynienie oszczędności rzędu trzech lub czterech kilobajtów wyda Ci się niewarte zachodu. Jeśli jednak wykorzystujesz wiele obrazów na Twoich sieciowych stronach, to suma tych oszczędności może mieć już znaczący wpływ na tempo ich ładowania.

Wyświetlanie kolorów

Powiedzmy, że udało się nam się zredukować liczbę barw w obrazie GIF, tak by uzyskać optymalną jakość przy dostatecznie małych rozmiarach pliku lub też użyliśmy obrazów w formacie JPEG, które pozwalają nam nie martwić się o ilość kolorów. Nie znaczy to jednak, że starannie opracowane barwy nie mogą sprawić przykrej niespodzianki przy oglądaniu ich na niektórych stronach i niektórych platformach sprzętowych. Może się zdarzyć, że wyświetlony na stronie WWW obraz będzie mieć horrendalnie zniekształcone kolory, czasem nawet zupełnie inne od oryginalnych. Dlaczego?

Pozwól, że krótko opiszę sposób działania karty graficznej. Każdy monitor komputerowy ma dwa podstawowe parametry działania: rozdzielczość oraz głębię kolorów. Rozdzielczość określa ilość pikseli, jaką można w danej chwili wyświetlić na ekranie, natomiast głębia kolorów to ilość unikalnych kolorów, jakimi można wyświetlić każdy piksel. Ilość ustawień rozdzielczości oraz głębi kolorów zależy od wielkości pamięci karty graficznej. W przypadku głębi kolorów najczęściej spotykanymi ustawieniami są: 256, 65536 oraz około 16,7 miliona kolorów. Jeśli monitor działa w trybie 256 kolorów, to każdy piksel monitora zajmuje w pamięci 1 bajt (jeden bajt może bowiem przechowywać 256 różnych wartości). W trybie High Color (65536 kolorów), każdy piksel zajmuje w pamięci 2 bajty, natomiast w trybie True Color (16,7 miliona kolorów) każdy piksel zajmuje 3 bajty pamięci.

Starsze karty graficzne wyprodukowane w czasach, gdy pamięć była droższa, nie zostały wyposażone w taką jej ilość, która umożliwiłaby użycie więcej niż 256 kolorów w wysokiej rozdzielczości. Wtedy także komputery posiadały co najwyżej 4 MB pamięci graficznej, jednak przeważnie nie mniej niż 2 MB. A zatem, w zależności od rozdzielczości wybranej przez użytkownika, mogły pracować w trybie High Color lub True Color.

W przypadku kart graficznych używających palety 256 kolorów może pojawić się problem braku dostępnych kolorów. Każdy z nich, już przydzielony, powoduje bowiem pomniejszenie ilości dostępnych komórek kolorów o jeden. Po przydzieleniu wszystkich 256, jeśli aplikacja spróbuje wyświetlić nowy kolor, zamiast niego będzie musiała użyć jednego z już przydzielonych. W przypadku, gdy kolory zostały wykorzystane przez aplikację, która nie jest aktywna, system operacyjny zazwyczaj jest na tyle „inteligentny”, aby odebrać te kolory aplikacji nieaktywnej i przydzielić je tej, która w danej chwili jest aktywna. W takich systemach operacyjnych, podczas uruchamiania aplikacji wykorzystującej duże ilości kolorów, bardzo często można zauważyć zmianę kolorów pulpitu oraz wszystkich pozostałych aplikacji.

Jeśli jedna aplikacja chce użyć więcej niż 256 kolorów, to niektóre spośród kolorów, których stara się użyć są zastępowane barwami, jakie już zostały wykorzystane. Oznacza to, że jeśli użytkownik komputera działającego w trybie 256 kolorów spróbuje wyświetlić stronę WWW zawierającą dwa obrazy GIF, z których każdy wykorzystuje 256 kolorów, to niektóre barwy, użyte w obrazie wyświetlanym jako drugi, zostaną odrzucone i zastąpione kolorami, które już zostały wykorzystane. W takim przypadku, strona WWW może wyglądać wyjątkowo nieatrakcyjnie.

Powyższy problem można rozwiązać na kilka różnych sposobów. Poniżej opiszę trzy metody — dwie pierwsze nie są najlepsze, natomiast trzecia stanowi optymalny sposób rozwiązania problemu niewystarczającej ilości kolorów.

Pierwszy sposób polega na tym, by wszystkie obrazy na stronie nie wykorzystywały łącznie więcej niż 256 kolorów, na przykład, możemy mieć na stronie cztery, w przybliżeniu równej wielkości obrazy, każdy z nich wykorzystujący około 50 barw; łącznie do ich wyświetlenia potrzebne nam będzie około 200 kolorów, co nie przekracza możliwości przeglądarki. Do ograniczenia liczby barw w każdym obrazie z osobna możemy użyć procedury opisanej w poprzednim ćwiczeniu.

Drugie rozwiązanie to opracowanie wspólnej palety dla wszystkich obrazów na stronie. Możemy dokonać tego za pomocą Photoshopa w następujący sposób.

1. Tworzymy jeden duży dokument, do którego kopiujemy wszystkie obrazy, jakie zamierzamy umieścić na stronie. Rozmieszczamy poszczególne obrazy w ramach jednego pliku.

2. Konwertujemy duży obraz do systemu barwnego Indexed Color, wybierając dla niego taką liczbę barw, jaka jest niezbędna do zachowania odpowiedniej jakości (do 256 barw włącznie). Postępujemy przy tym zgodnie z procedurą opisaną w ćwiczeniu poprzednim.

3. Wybieramy polecenie Color Table z menu Mode. Wyświetlona zostanie paleta kolorów utworzonego przez nas dużego dokumentu; użyjemy jej dla każdego z obrazów na stronie z osobna.

4. Zapisujemy utworzoną paletę kolorów.

5. Otwieramy po kolei wszystkie obrazy przeznaczone do umieszczenia na stronie i konwertujemy je do systemu barwnego Indexed Color. Ilość kolorów nie ma przy tym znaczenia.

6. Dla każdego z otwartych obrazów wybieramy polecenie Color Table z menu Mode i otwieramy zapisaną wcześniej na dysku paletę kolorów.

7. Zapisujemy każdy otworzony obraz na dysku wraz z tą paletą.

Bezpieczne palety kolorów

Powyżej opisałam, w jaki sposób można stworzyć paletę kolorów, której można następnie użyć do tworzenia własnych obrazów. To doskonały wstęp do prezentacji najlepszej metody umożliwiającej rozwiązanie problemów związanych z przydzielaniem kolorów i obsługą obrazów wyświetlanych na stronach WWW. W czasie, gdy firma Netscape tworzyła swą pierwszą przeglądarkę, znacznie więcej komputerów niż dziś umożliwiało wyświetlanie jedynie 256 kolorów. Wtedy przydzielanie kolorów było bardzo poważnym problemem.

Dodatkowym zadaniem, jakie stanęło przed firmą Netscape był fakt, iż przeglądarka Netscape Navigator działała w różnych systemach operacyjnych. Każdy system udostępnia 256-kolorową paletę systemową. Jeśli wszystkie istniejące aplikacje wykorzystywałyby wyłącznie te kolory systemowe, to wszelkie problemy związane z przydzielaniem kolorów w ogóle przestałyby istnieć. Niestety, w każdym z systemów operacyj­nych palety systemowe są nieco inne.

Aby rozwiązać ten problem, Netscape zdefiniował specjalną „bezpieczną” paletę składającą się z 216 kolorów. Jeśli obrazy zawierają wyłącznie kolory zdefiniowane w tej pale­cie, to w oknie przeglądarki zawsze będą wyglądały zgodnie z zamysłem ich twórcy.

Ogólnie rzecz biorąc, konwertując obraz, używający więcej niż 256 kolorów do formatu GIF, najlepsze efekty można uzyskać przy wykorzystaniu palety adaptacyjnej. Paleta adaptacyjna wybiera najlepsze spośród 16,7 miliona potencjalnie dostępnych kolorów i wykorzystuje je do wyświetlenia obrazu. Jeśli w tworzonym obrazie chcesz zastosować 6-bitową paletę, zostaną w niej zapisane 64 najczęściej używane kolory. Jeśli w two­rzonym obrazie chcesz zastosować 2-bitową paletę, zostaną w niej zapisane 4 najczęściej używane kolory. Niestety, jeśli podczas wyświetlania takiego obrazu w przeglądarce, używane w nim kolory nie będą dostępne, to wszelkie oczekiwania co do wyglądu obrazu staną się nieaktualne. To, co miało być zielone może być fioletowe, a to, co miało być niebieskie może być żółte — po prostu nie da się tego przewidzieć.

Z drugiej jednak strony, jeśli użyjesz bezpiecznej palety, możesz mieć pewność, że podczas wyświetlania obrazu w przeglądarce zostaną wykorzystanie dokładnie te same kolory, których użyłeś do jego tworzenia. Niestety, musisz ograniczyć się do użycia 216 barw wybranych przez firmę Netscape. To może stanowić poważny problem w przypadku obrazów wykorzystujących wiele odcieni tego samego koloru lub kolory, których brakuje w palecie.

Pomimo wszystko, przeważająca większość grafików tworzących obrazy na potrzeby stron WWW, przystaje na ograniczenia narzucane przez bezpieczną paletę kolorów, aby zapewnić, że strona zawsze będzie wyglądała poprawnie.

Kompresja obrazów

Jeśli zapiszemy 24-bitowy, pełnokolorowy obraz jako listę wszystkich kolejnych pikseli, linia po linii, od górnej krawędzi obrazu aż do samego dołu, otrzymamy bardzo długi spis kolejnych liczb, po trzy dla każdego piksela. Reprezentują one wartości składowych koloru w systemie RGB. W rzeczywistości, jeśli w programie graficznym zapiszesz plik w formacie mapy bitowej (BMP), to będziesz mógł przekonać się, jak duże są pliki tego typu. A im większy rozmiar pliku, tym dłuższy czas konieczny do jego pobrania.

Aby ograniczyć ilość zasobów koniecznych do przechowania oraz przesłania obrazów, opracowane zostały algorytmy kompresji. Kompresja, jak sama nazwa wskazuje, czyni obraz mniejszym (nie w sensie jego rozmiarów wyrażonych w pikselach, lecz objętości pliku). Skompresowany obraz zajmuje mniej miejsca na dysku, łatwiej go edytować i oczywiście, znacznie łatwiej przesłać za pośrednictwem sieci. W tym rozdziale zajmiemy się metodami kompresji, stosowanymi w formatach GIF oraz JPEG. Dowiemy się też, jakiego typu obrazy powinniśmy kompresować każdą z tych metod dla uzyskania jak najlepszych rezultatów.

Podstawowe wiadomości o kompresji

Prawdopodobnie spotkałeś się już z aplikacjami używanymi do kompresji plików. Użytkownicy komputerów Macintosh używają w tym celu programu StuffIt, a użytkownicy systemu Windows, programu Zip lub innego. Większość popularnych formatów graficznych posiada jakiś rodzaj wbudowanego algorytmu kompresji, redukującego wielkość pliku podczas jego zapisywania dokładnie w taki sam sposób, w jaki programy ogólnego przeznaczenia kompresują pliki. W rzeczywistości, jeśli spróbujesz skompresować obraz, zapisany w formacie wykorzystującym jakiś algorytm kompresji (na przykład, GIF lub JPEG), przy użyciu programu archiwizującego ogólnego przeznaczenia, okaże się, że jego wielkość prawie w ogóle się nie zmniejszy.

Jeśli korzystasz z formatów zapisu obrazów wykorzystujących kompresję, to jest ona obsługiwana przez program graficzny, który „wie”, w jaki sposób należy zapisać i wyświetlić obraz zapisany w konkretnym formacie. Różne formaty graficzne wykorzystują różne algorytmy, zapewniające odmienne stopnie kompresji i posiadające różne zalety i wady. Kluczowym zagadnieniem przy projektowaniu obrazów przeznaczonych na potrzeby stron WWW jest umiejętność określenia formatu odpowiedniego dla projektowanego obrazu. Nawet najpiękniejszy obraz może wyglądać koszmarnie, jeśli zostanie zapisany w nieodpowiednim formacie.

Niektóre rodzaje kompresji potrafią zmniejszyć objętość pliku bardzo znacznie dzięki pominięciu pewnych informacji zawartych w obrazie oryginalnym. Nie znaczy to, że w mechaniczny sposób wyrzucają niektóre piksele z obrazu. (Wyobraź sobie, że ktoś wyrzuciłby z tej książki co drugie albo co trzecie słowo w celu jej pomniejszenia, nietrudno przewidzieć, jaki miałoby to na nią wpływ. W przypadku obrazów jest podobnie.)

Kompresja stratna opiera się na teorii, mówiącej o tym, że niektóre szczegóły i zmiany w kolorze są niezauważalne dla ludzkiego oka. Teoria ta zakłada także możliwość usunięcia wybranych szczegółów obrazu bez znaczącego obniżenia jego jakości. Zaletą metody kompresji stratnej jest fakt, iż twórca obrazu może dokładnie określić punkt równowagi pomiędzy jego jakością a wielkością. Może użyć kompresji dużego stopnia, usuwając z obrazu wiele danych i w znacznym stopniu redukując jego wielkość lub zachować jego wysoką jakość, narażając się na wzrost wielkości plików. Przeciwieństwem kompresji stratnej jest tzw. kompresja bezstratna (lossless compression). Zachowuje ona zawsze całą informację zawartą w obrazie oryginalnym. Jeśli zapiszemy jakiś obraz do pliku, używając kompresji stratnej, a potem go otworzymy, to będzie różnił się nieco od oryginału. Jeśli przeprowadzimy ten sam eksperyment z kompresją bezstratną, uzyskamy obraz identyczny z oryginalnym.

Algorytmy kompresji formatu GIF i JPEG

Wszystko to było ogromnie interesujące, powiedzą nasi Czytelnicy. Od tej pory, gdy ktoś nas spyta o kompresję stratną albo bezstratną, będziemy mogli zaimponować mu naszą rozległą wiedzą. Ale co to ma wspólnego z naszymi obrazami i siecią?

Popularne sieciowe formaty, GIF i JPEG, wykorzystują rodzaje kompresji, które na-dają się dla różnych rodzajów obrazów. Zależnie od charakteru wyjściowego obrazu oraz naszych wymagań co do jakości, powinniśmy wybrać jeden lub drugi format, właśnie ze względu na stosowaną przez niego kompresję.

Format GIF stosuje bezstratną kompresję (lossless compression) zwaną LZW. Nazwa algorytmu utworzona została z inicjałów jego autorów: Lempel, Ziv i Welch. Algorytm LZW opiera swe działanie na wyszukiwaniu w obrazie sąsiadujących ze sobą pikseli tego samego koloru. Im więcej takich powtórzeń, tym lepszy efekt kompresji. Obrazy o dużych jednobarwnych obszarach, jak choćby ikony albo różnego typu kolorowe grafiki, doskonale nadają się do zapisywania w formacie GIF, gdyż stopień kompresji jest dla nich naprawdę duży. Natomiast obrazy, takie jak zeskanowane fotografie zawierają bardzo niewiele naprawdę jednobarwnych obszarów, a więc tylko w małym stopniu podlegają działaniu kompresji LZW.

Format JPEG korzysta z algorytmu kompresji JPEG, który bada grupy pikseli i zapisuje raczej różnice pomiędzy nimi niż same piksele. System ten sprawdza się szczególnie dobrze dla obrazów bogatych w drobne szczegóły, gdzie występują liczne zróżnicowania barw pomiędzy pikselami, jak to się dzieje w przypadku fotografii. W rzeczywistości algorytm kompresji obrazów JPEG został opracowany specjalnie do efektywnego kompresowania fotografii bez utraty jakości, natomiast raczej nie nadaje się do zapisywania obrazów o dużych obszarach tego samego lub podobnych kolorów, w szczególności obrazów o ostrych krawędziach. (Format ten może wprowadzić zróżnicowania w dużych obszarach o jednolitym kolorze.)

Należy też pamiętać, że kompresja formatu JPEG jest stratna, co znaczy, że pomijana jest pewna część informacji o kolorach oryginalnego obrazu. Niektóre programy posiadające możliwość zapisu obrazów w formacie JPEG pozwalają na określenie poziomu jakości zapisywanego obrazu. Im niższa jakość zostanie wybrana, tym więcej danych odrzuci, co spowoduje zmniejszenie wielkości pliku lecz jednocześnie pozbawi obraz jakości. Ekstremalnie skompresowany obraz w formacie JPEG może okazać się poplamiony i ziarnisty w takim stopniu, że oszczędność poczyniona na objętości pliku nie wynagrodzi nam tych strat.

Jeżeli zdecydujesz się na użycie formatu JPEG dla Twojego obrazu, wypróbuj kilka różnych stopni kompresji, aby znaleźć kompromis pomiędzy jakością obrazu a wielkością pliku.

Wyświetlanie skompresowanych plików

Skompresowane pliki nie mogą zostać wyświetlone bez uprzedniej dekompresji. Programy, które odczytują i wyświetlają obrazy zapisane w takich plikach, jak choćby programy malarskie albo przeglądarki sieciowe, dekompresują obraz w chwili otwarcia albo w momencie, gdy go otrzymują z sieci. Czas, jaki to zajmuje, zależy od rodzaju użytej kompresji i szybkości Twojego komputera.

Ćwiczenie 8.2: Korzystanie z różnych formatów
i rodzajów kompresji

Wszystko to, co do tej pory mówiliśmy o kompresji było teorią i najwyższy czas już spróbować zastosowania w praktyce. Użyjmy różnych rodzajów kompresji na kilku konkretnych obrazach, co pozwoli uwidocznić różnice pomiędzy nimi. W tym przykładzie wykorzystam dwa obrazy: jeden z nich to prosty graficzny znak, logo narysowane w kilku zaledwie kolorach, drugi, to fotografia z tysiącami odcieni. Oba mają jednakowe rozmiary i rozdzielczość (100×100 pikseli przy rozdzielczości 72 dpi). Każdy z tych obrazów, zapisany bez kompresji (jako zwykła lista kolejnych pikseli) w systemie barwnym RGB ma rozmiar 109 443 bajtów, w przybliżeniu 110 kB.

Zacznijmy od logo. Jako programu do edycji będę używać Photoshopa; Twój program malarski może działać nieco inaczej. Rysunek 8.10 pokazuje oryginalne logo, nasz wyjściowy materiał. Jest to coś na kształt kwiatka w kilku odcieniach niebieskiego.

Rysunek 8.10. Oryginalne logo

Przede wszystkim, konwertujemy obraz do systemu barwnego Indexed Color. Nie jest to skomplikowane, gdyż obraz ma zaledwie siedem różnych kolorów. Po zapisaniu w formacie GIF, obraz ma tylko 2 944 bajtów (3 kB, w porównaniu z początkową wielkością 110 kB!). Przy użyciu tej procedury kompresji udało nam się zmniejszyć plik aż o 97% pierwotnej wielkości.

Jak by powiedział specjalista z tej branży, współczynnik kompresji wynosi 30:1, znaczy to, że skompresowany plik jest 30 razy mniejszy od oryginalnego. Jako że algorytm kompresji LZW opiera swe działanie na wyszukiwaniu powtarzających się wzorów pikseli, powinniśmy, w gruncie rzeczy, spodziewać się dobrego wyniku, bo nasze logo ma mnóstwo takich powtórzeń, z racji występowania dużych powierzchni gładkiego koloru. Ponieważ kompresja LZW jest bezstratna, skompresowane logo jest identyczne z oryginalnym.

Teraz wypróbujmy kompresję JPEG. Gdy zapisujemy logo w formacie JPEG, Photoshop wyświetla okno dialogowe, w którym możemy ustalić stopień kompresji (patrz rysunek 8.11).

Rysunek 8.11. Algorytm kompresji JPEG w Photoshopie

W ramach eksperymentu, zapisałam logo w formacie JPEG trzykrotnie, stosując trzy różne stopnie kompresji: minimalny, pośredni i maksymalny.

Pierwszy obraz został zapisany z najwyższą kompresją (Excellent) i umiarkowaną jakością obrazu (Fair). Przy takim ustawieniu uzyskujemy plik o wielkości 6 kB, co oznacza 95% wielkości początkowego pliku (współczynnik kompresji 20:1). Nieźle, ale nie tak dobrze, jak w przypadku formatu GIF, choć różnica pomiędzy plikiem o wielkości 3 kB a plikiem o wielkości 6 kB nie ma większego praktycznego znaczenia. Drugi z plików JPEG został zapisany ze średnią kompresją (Good) i takąż jakością obrazu (Good). Trzeci i ostatni, z małą kompresją (Fair) i bardzo dobrą jakością obrazu (Excellent). Uzyskaliśmy w ten sposób odpowiednio pliki o rozmiarach 19 kB (87%, współczynnik kompresji 7:1) oraz 60 kB (45%, współczynnik kompresji 2,5:1). Nie są to wyniki, które mogłyby konkurować z efektem osiągniętym przez format GIF.

Gdy otworzymy zapisane w plikach JPEG obrazy, by ocenić ich jakość, przewaga formatu GIF stanie się jeszcze bardziej widoczna. Wszystkie trzy pokazano na rysunku 8.12.

Rysunek 8.12. Logo zapisane w formacie JPEG z różnymi stopniami kompresji

Pierwszy zapisany obraz, po lewej stronie (to ten, którego rozmiar pliku był porównywalny z plikiem zapisanym w formacie GIF) praktycznie nie nadaje się do użytku. Kompresja typu JPEG spowodowała powstanie ziarnistości i licznych zabrudzeń, obejmujących również tło obrazka poza właściwym logo. Użycie takiego logo jest nie do pomyślenia.

Pozostałe dwa obrazy, pośrodku i po prawej — są to obrazy zapisane z jakością dobrą, Good oraz bardzo dobrą, Excellent — wyglądają o wiele lepiej. Ale nawet one nie dorównują, pod względem jakości, obrazowi zapisanemu w pliku GIF, który z tej konfrontacji wychodzi zwycięsko.

Teraz przeprowadzimy podobną próbę na fotografii. Jako materiał wyjściowy posłuży nam moje ulubione zdjęcie z pingwinami, pokazane na rysunku 8.13. Tak samo, jak w przypadku logo, rozmiary obrazu w pikselach wynoszą 100×100, a wielkość pliku przed kompresją 109 443 bajtów (110 kB).

Rysunek 8.13. Oryginalna fotografia

Aby móc zapisać ten obraz w formacie GIF, musimy przekonwertować go najpierw do systemu barwnego Indexed Color. Jako że ilość barw w wyjściowym obrazie jest duża, pozostawiłam przy tym maksymalną liczbę kolorów — 256. Dzięki temu w pliku GIF uwzględnionych zostanie 256 barw najczęściej występujących w oryginalnej fotografii, zaś pozostałe barwy zostaną zasymulowane przy użyciu metody ditheringu (roztrząsania pikseli).

Uzyskany plik GIF ma rozmiar 26 298 bajtów (26 kB). To oznacza zmniejszenie jego objętości o 76%. Uzyskujemy więc współczynnik kompresji 4:1. Nie da się tego porównać z rewelacyjną kompresją w przypadku logo, ale też nie jest to rezultat bardzo zły.

Wypróbujmy z kolei format JPEG, po którym można spodziewać się lepszych wyników. I tym razem utworzyłam trzy pliki JPEG o różnym stopniu kompresji. Oto efekty:

• maksymalna kompresja (Excellent)/umiarkowana jakość (Fair), rozmiar pliku: 4 kB (97%, współczynnik 25:1),

• średnia kompresja (Good)/średnia jakość (Good), rozmiar pliku: 12kB (89%, współczynnik 9:1),

• umiarkowana kompresja (Fair)/maksymalna jakość (Excellent), rozmiar pliku: 21 kB (97%, współczynnik 5:1).

Jak widać, nawet najmniej skompresowany z plików JPEG, który pomija naprawdę bardzo niewiele informacji, jest mniejszy od analogicznego pliku GIF z tym samym obrazem. Użycie formatu JPEG pozwala poczynić naprawdę wielkie oszczędności w rozmiarach plików przy zapisywaniu fotografii i innych obrazów bogatych w szczegóły.

Sprawdźmy jeszcze jakość obrazów, zapisanych w formacie JPEG. Rysunek 8.14 pokazuje je w kolejności tworzenia.

Rysunek 8.14. Fotografie zapisane w formacie JPEG z różnymi stopniami kompresji

Choć między tymi trzema obrazami daje się zauważyć różnice, to nawet obraz o stosunkowo najniższej jakości (Fair) wygląda całkiem przyzwoicie i nadaje się do praktycznego wykorzystania. Ponieważ jednak uzyskujemy całkiem przyzwoity stopień kompresji także przy wyższej jakości obrazu, możemy śmiało zdecydować się na obraz pośrodku lub po prawej stronie (jakość Good i Excellent). W każdym przypadku oszczę-dzamy więcej miejsca na dysku, niż gdybyśmy użyli formatu GIF.

Spróbuj przeprowadzić podobną próbę z własnymi obrazami, aby zorientować się, co możesz zyskać na wyborze takiego lub innego formatu.

Przeplot obrazu i przezroczystość tła

Obrazy zapisywane w formacie GIF mają jeszcze kilka innych cech, które można wykorzystać w celu uatrakcyjnienia tworzonych stron WWW. Można do nich zaliczyć: przezroczystość — cechę umożliwiającą wskazanie koloru, który będzie niewidoczny, oraz przeplot — umożliwiający stopniowe wyświetlanie obrazu. Dostępna jest także alternatywna wersja formatu JPEG, umożliwiająca stopniowe wyświetlanie obrazów.

Przezroczystość

„Przejrzyste” GIF-y mają niewidzialne tło, tak by zawarty w nich obraz nakładany był bezpośrednio na tło strony, jednobarwne lub wzorzyste. Dzięki temu wydaje się, że obrazek unosi się nad stroną. Rysunek 8.15 ilustruje różnicę pomiędzy obrazem GIF o nieprzejrzystym i przejrzystym tle.

Przejrzystość jest dostępna w nowszej wersji formatu GIF (zwanej GIF89a). Nie ma takiej opcji w plikach JPEG ani też w starszych obrazach GIF — GIF87. Aby utworzyć obraz GIF z przejrzystym tłem, potrzebujemy programu do edycji obrazów, umożliwiającego wprowadzenie takiego tła. O programach tego typu będzie mowa w dalszej części tego rozdziału.

Zanim jednak zabierzemy się do konwersji, powinniśmy odnaleźć obraz o odpowiednim tle. Do wprowadzenia przezroczystości najlepiej nadają się obrazy o gładkim tle jednego koloru (patrz rysunek 8.16a), na przykład, ikony mają zazwyczaj przeźroczyste tło, natomiast zdjęcia dzieci stojących na łące pod zachmurzonym niebem — raczej nie. Choć istnieje możliwość stworzenia zdjęcia o przezroczystym tle, to jednak może ono nie być przekonujące, jeśli temat nie będzie się wyraźnie odróżniał do jego tła (patrz rysunek 8.16b).

Rysunek 8.15. Obraz z nieprzejrzystym i przejrzystym tłem
Rysunek 8.16. Dobry i zły materiał na obraz z przejrzystym tłem	a) b)

Aby utworzyć obraz z przejrzystym tłem, przede wszystkim musimy wyodrębnić całe tło, nadając mu jednolitą barwę. Jeśli składa się ono z kilku podobnych do siebie odcieni (jak często bywa w przypadku fotografii), to tylko jeden z nich stanie się przejrzysty.

Jeśli obraz nie ma jednolitego tła, to można wyróżnić jego temat w programie graficznym i skopiować do obrazu o jednokolorowym tle. Można także zmodyfikować tło obrazu w taki sposób, aby stało się jednolite. Większość programów graficznych, pozwalających na tworzenie przezroczystych obrazów GIF, dysponuje także narzędziami umożliwiającymi określenie, jaki kolor lub kolory staną się przezroczyste po zapisaniu obrazu. Koniecznie należy się jednak upewnić, że kolory, wybrane jako przezroczyste, nie są używane w żadnym innym miejscu obrazu poza jego tłem. Jest to niezwykle istotne, gdyż każdy punkt obrazu, w którym one występują, po jego zapisaniu stanie się przezroczysty.

Przeplot w formacie GIF

Przeplot formatu GIF to taki sposób zapisywania pliku, by obrazy pojawiały się inaczej niż w normalnych plikach GIF. Pliki GIF zapisane w ten sposób są wyświetlane stopniowo, a nie standardowo — od góry do dołu. Inaczej, niż w przypadku przejrzystości, zastosowanie przeplotu dla obrazu w formacie GIF nie zmienia wyglądu obrazu na stronie sieciowej. Przeplot ma jedynie wpływ na sposób zapisu obrazu oraz jego wygląd w momencie pobierania i wyświetlania.

Zazwyczaj obrazy są wyświetlane od góry ku dołowi. Każda pozioma linia obrazu jest wyświetlana dopiero w momencie, gdy zostanie w całości pobrana. W przypadku wykorzystania obrazów GIF z przeplotem, kolejność wyświetlania linii nie odpowiada ich położeniu w obrazie. Dzięki temu, na samym początku pojawia się częściowy zarys całego obrazu, który następnie, wraz z pobieraniem kolejnych danych, staje się coraz bardziej szczegółowy. Ostateczny wygląd obrazu jest zawsze taki sam, jednak wykorzystanie przeplotu daje możliwość wyświetlenia ogólnego zarysu, na który użytkownik mógłby patrzeć podczas pobierania całości danych obrazu. Wymaga to zapisania obrazu GIF z przeplotem oraz użycia przeglądarki sieciowej, wyposażonej w zdolność wyświetlania plików już w trakcie ich ładowania.

Zazwyczaj pliki GIF zapisywane są linia po linii, od górnej krawędzi obrazu aż do dolnej, tak jak pokazuje rysunek 8.17 (Te linie określane są jako linie skanowania, scan lines). Jeśli Twoja przeglądarka sieciowa wyświetla obrazy GIF w trakcie ich ładowania, tak jak to czyni np. Netscape, zobaczysz najpierw górę obrazu, a potem jego dół, w miarę jego ładowania.

Rysunek 8.17. Plik GIF zapisany w zwykły sposób, bez przeplotu

Przy stosowaniu przeplotu obraz GIF zapisywany jest w inny sposób. Zamiast zapisywać linie po kolei, obraz z przeplotem zapisuje linie etapami, w kilku kolejnych przejściach. W pierwszym przejściu zapisywana jest co ósma linia obrazu, poczynając od linii pierwszej. W drugim — co ósma linia, poczynając od czwartej. W trzecim przejściu zapisywana jest co czwarta linia, od linii trzeciej włącznie, a na koniec zapisywane są po kolei opuszczone wcześniej linie (patrz rysunek 8.18).

Przy wyświetlaniu obrazu GIF zapisanego z przeplotem, zachowywana jest taka sama kolejność, jak przy ich zapisywaniu. Daje to efekt rolety w niektórych przeglądarkach; obraz pojawia się najpierw w postaci wąskich pasków, w innych (na przykład, Netscape), brakujące linie mogą być z początku wypełniane pikselami skopiowanymi z linii już wprowadzonych. Widzimy wtedy najpierw obraz zamglony i niewyraźny albo ziarnisty, z widocznymi barwnymi kwadratami (patrz rysunek 8.19), stopniowo staje się coraz bardziej ostry w miarę, jak wyświetlane są kolejne linie.

Rysunek 8.18. Plik GIF zapisany z przeplotem
Rysunek 8.19. Plik GIF z przeplotem podczas wyświetlania

Jeśli Twoja przeglądarka nie potrafi uwzględniać przeplotu w formacie GIF lub, jeśli z zasady wyświetla cały obraz już po jego całkowitym załadowaniu, nie zaobserwujemy opisanego wyżej efektu, tym niemniej, załaduje się on bez kłopotów i po chwili będziesz mógł go zobaczyć. Zastosowanie przeplotu nie utrudnia odtworzenia obrazu przez te przeglądarki, które nie umieją z niego korzystać. Przeplot zmienia sposób wyświetlania ładowanego obrazu tylko w tych przeglądarkach, które mogą go uwzględnić.

Przeplot jest bardzo korzystny przy przesyłaniu dużych obrazów, które dość długo się ładują. Dzięki niemu widz może nabrać pojęcia o zawartości obrazu jeszcze przed ukończeniem przesyłania i ewentualnie przerwać cały proces, jeśli obraz go nie zainteresuje. W krótszym czasie może przejrzeć większą ilość materiałów. Jeżeli wyświetlany wizerunek jest mapą innych obrazów — czymś w rodzaju ilustrowanego spisu treści — widz może prędzej wskazać kliknięciem kolejne zdjęcie do wyświetlenia.

Przeplot nie jest potrzebny przy zapisywaniu małych obrazów, jak ikony i znaki firmowe. Obrazy te ładują się na tyle szybko, że i tak nikt nie zdąży zauważyć efektu stopniowego pojawiania się.

Wyświetlanie progresywne w formacie JPEG

Progresywne pliki JPEG są zapisywane w specjalny sposób, tak aby podczas wyświetlania stopniowo pojawiała się na nich coraz większa liczba szczegółów, podobnie jak w przypadku plików GIF z przeplotem. Do progresywnego zapisania pliku JPEG potrzebny jest odpowiedni program.

Najważniejsza różnica pomiędzy przeplotem w plikach GIF a progresją w plikach JPEG uwidocznia się wtedy, gdy stosowane są starszego typu przeglądarki i aplikacje. Pliki GIF z przeplotem są kompatybilne ze starszymi wersjami programów, napisanymi jeszcze dla formatu GIF87: przeplot nie przeszkadza odczytać obrazu. Pliki JPEG z progresją nie są kompatybilne wstecz. Choć wśród rozpowszechnionych obecnie przeglądarek niewiele jest takich, które w ogóle nie potrafią wyświetlić pliku JPEG zapisanego z progresją, to jednak trzeba wziąć pod uwagę, że takie się zdarzają.

Tworzenie obrazów o przejrzystym tle oraz obrazów z przeplotem

Wiele różnych programów do edycji obrazów potrafi zapisać plik GIF z przezroczystym tłem lub z przeplotem, a plik JPEG z opcją progresywnego wyświetlania. Jako że popularność WWW znacznie wzrosła, możliwości wielu programów graficznych zaczęły się koncentrować na tworzeniu obrazów na potrzeby Sieci. Znaczna większość narzędzi dysponuje dzisiaj możliwościami zapisywania obrazów w popularnych formatach wykorzystywanych na stronach WWW i pozwala na użycie takich rozwiązań, jak przezroczystość bądź przeplot.

Wiele programów umożliwiających zapisywanie plików z przeplotem i przezroczystym tłem znajdziesz na CD-ROM-ie dołączonym do tej książki.

Jeśli pracujesz w Windows, bardzo przydatnym narzędziem do edycji obrazów może się okazać doskonały typu shareware program LView Pro. Możesz go znaleźć dosłownie pod każdym adresem w sieci, gdzie rozprowadzane są programy typu shareware (osobiście korzystam zwykle z adresu http://www.shareware.com). LView Pro potrafi zapisywać obrazy GIF z przejrzystym tłem i z przeplotem. Najnowsza wersja tego programu, 1.C, pozwala też zapisywać progresywnie wyświetlane pliki JPEG.

Jeśli pracujesz w systemie Mac, do tworzenia plików GIF z przejrzystością i przeplotem oraz plików JPEG z progresją, możesz użyć programu Graphic Converter (odczytuje pliki Photoshopa). Program Grapic Converter możesz pobrać z serwera Sumex-AIM lub jego serwera lustrzanego. Ja zwykle korzystam z adresu:

http://hyperarchive.lcs.mit.edu/HyperArchive.html.

Animowane pliki GIF

Format GIF98a zawierał pewną mało znaną możliwość. Pozwalała ona osobom tworzącym obrazy na zapisywanie w jednym pliku GIF wielu ramek i tworzenie prostych animacji. Możliwość ta nie była dobrze znana, aż do momentu, gdy firma Netscape wyposażyła przeglądarkę Netscape Navigator 3.0 w mechanizmy pozwalające na jej wykorzystanie.

Twórcy stron WWW bardzo często wykorzystywali animowane GIF-y — czasami nawet do przesady. Po udostępnieniu tego formatu niejednokrotnie można było napotkać strony wypełnione migającymi i poruszającymi się obrazami, które w większości przypadków jedynie rozpraszały uwagę użytkownika. Jednak animowane GIF-y, użyte w odpowiedni sposób, mogą znacznie poprawić atrakcyjność strony i dać projektantowi szerszy zakres możliwości, na przykład, Bill Mitchell, karykaturzysta, którego prace można znaleźć na witrynie http://www.cnn.com/ALLPOLITICS, porzucił rysowanie na papierze i w całości poświęcił się tworzeniu obrazów publikowanych na WWW.

Użycie animowanych GIF-ów oraz kolorów pozwoliło mu na tworzenie bardziej interaktywnych karykatur niż te, które mógł publikować w standardowych, drukowanych gazetach.

Animowany GIF jest w rzeczywistości jedynie grupą obrazów GIF zawierających dodatkowo możliwość określania odstępu czasu, w jakim będą wyświetlane kolejne ramki. W momencie wyświetlania takiego obrazu na stronie, jego poszczególne ramki są wyświetlane cyklicznie, tworząc efekt animacji.

Wadą stosowania animowanych GIF-ów jest ich większy rozmiar, w porównaniu ze zwyczajnymi obrazami GIF o tych samych wymiarach. Im więcej ramek zostanie umieszczonych w animowanym GIF-ie, tym jego rozmiar będzie większy. A zatem, tworząc animowane GIF-y, powinieneś zwracać baczną uwagę na wielkość pliku, aby uniknąć wykreowania takiego, którego pobranie będzie trwało zbyt długo.

W czasie, gdy wprowadzono możliwość wyświetlania animowanych GIF-ów, dostępnych było niewiele narzędzi służących do ich tworzenia. Teraz, gdy grafika opracowana na potrzeby WWW stanowi znaczący element grafiki komputerowej, większość programów graficznych udostępnia narzędzia służące do tworzenia i edycji obrazów tego typu. W podrozdziale dotyczącym tego zagadnienia, podam kilka najpopularniejszych programów służących do kreowania i wyświetlania obrazów. Wszystkie wymienione programy dysponują narzędziami do tworzenia animowanych GIF-ów.

Tworzenie i wykorzystanie obrazów

Oprócz programów służących do tworzenia obrazów z przeplotem i przejrzystym tłem, w Internecie możemy znaleźć wiele użytecznych narzędzi do edycji i tworzenia obrazów. Niektóre z nich zostały zaprojektowane właśnie pod kątem tworzenia obrazów na potrzeby WWW.

• Adobe ImageStyler (Adobe, http://www.adobe.com/). W kręgach projektantów grafiki komputerowej firma Adobe jest najlepiej znana z programu Photoshop, doskonałego programu o ogromnych możliwościach, przeznaczonego do edycji grafiki komputerowej i wykorzystywanego przez znaczną większość projektantów. ImageStyler jest natomiast produktem zaprojektowanym do tworzenia obrazów publikowanych na stronach WWW. Program ten nie tylko daje możliwości obsługi i manipulowania obrazami, lecz także pozwala na generowanie kodu HTML oraz JavaScript, służącego do umieszczania tych obrazów na stronach WWW. Program ImageStyler kosztuje 124 dolary;

• Macromedia Fireworks (Macromedia, http://www.macromedia.com/). Program Fireworks został zaprojektowany do tworzenia i edycji obrazów przeznaczonych do publikacji na stronach WWW i pod tym względem przypomina program Adobe ImageStyler. Także program Fireworks zawiera narzędzia ułatwiające umieszczenie obrazu na stronie WWW po jego wykreowaniu. Program ten kosztuje 199 dolarów;

• Ignite (Fluffy Clouds, http://www.ignite-it.co.uk/). Ignite to aplikacja zaprojektowana do optymalizacji i przygotowania obrazów, które mają być publikowane na stronach WWW. W odróżnieniu od pozostałych programów przedstawionych w tej części rozdziału, Ignite nie służy do tworzenia obrazów, lecz raczej do manipulowania paletami kolorów oraz innymi właściwościami w celu zapewnienia jak najlepszej jakości przy maksymalnej redukcji ich wielkości. Program kosztuje około 80 dolarów (w zależności od kursu dolara amerykańskiego do funta szterlinga);

• Paint Shop Pro (JASC, Inc., http://www.jasc.com/). Paint Shop Pro to program do edycji i konwersji obrazów o szerokich możliwościach, dostępny jako shareware dla systemu Windows i Windows 95. Aktualnie dostępna wersja programu o numerze 6 kosztuje 99 dolarów;

• Graphics Workshop (Alchemy Mindworks, http://www.mindworkshop.com/). Program przeznaczony dla Windows 3.1 i Windows 95, oferuje bogaty zestaw narzędzi do konwersji i przekształcania obrazów. Graphic Workshop jest typu programem shareware, opłata rejestracyjna wynosi 40 dolarów;

• The Gimp (http://www.gimp.org/). The Gimp jest bezpłatnym programem do edycji i przekształcania obrazów, napisanym przez studentów uniwersytetu w Berkeley (University of California). The Gimp jest rozbudowanym programem z wieloma opcjami typowymi dla programów klasy Photoshopa. Działa tylko w systemie UNIX z X Window, choć trwają prace nad stworzeniem wersji działających w systemach OS/2 oraz 32-bitowych systemach Windows.

Mając pod ręką odpowiednie narzędzie i pełny zestaw wiadomości na temat formatów, kompresji, palet kolorów i innych ważnych cech obrazu, możesz przygotować mnóstwo obrazów do wykorzystania na Twoich stronach sieci. Poniżej przedstawiamy kilka sugestii.

Własne projekty

Jeśli masz choćby minimalny talent plastyczny, zastanów się nad malowaniem lub rysowaniem własnych obrazów do wykorzystania w sieci. Dzięki dostępnym obecnie programom graficznym możesz wiele zdziałać, nawet jeśli nie umiesz narysować prostej kreski, komputer może Cię w tym wyręczyć.

Jeśli rysowanie wprost na ekranie nie jest Twoją specjalnością, zastanów się nad użyciem skanera. Skaner jest doskonałym źródłem różnych obrazów. Poza oczywistą możliwością skanowania całych fotografii, możemy też eksperymentować ze skanowaniem odręcznych szkiców, wzorów nadrukowanych na papierze albo zupełnie innych materiałów: liści, skóry, drewna... wszystkiego, co tylko uda nam się włożyć do skanera. Potem możemy to połączyć ze sobą w interesujący wzór lub obraz.

Płaskie skanery stały się dostępniejsze cenowo w ciągu ostatnich kilku lat. Pamiętajmy też, że naprawdę nie potrzebujemy skanera najwyższej jakości, jeśli chcemy za jego pomocą uzyskiwać obrazy do wykorzystania w sieci. Ostatecznie, większość monitorów ma rozdzielczość zaledwie 72 dpi. Nie musimy więc kupować skanera o rozdzielczości 1200 dpi, 2400 dpi lub jeszcze większej. Zwykły skaner o rozdzielczości 300 dpi będzie całkiem odpowiedni.

Inne rozwiązanie to oddanie materiał do skanowania w ręce jakiejś agencji poligraficznej, wyposażonej w odpowiedni sprzęt. Zastanów się. Skaner może być bezcenną pomocą, gdy zamierzasz serio zająć się tworzeniem grafik dla sieci.

Skanowanie jest bardzo interesujące, ale nie rozpędzaj się. Obrazy, jakie znajdujemy w książkach i kolorowych pismach są zwykle chronione prawem autorskim; kopiowanie ich jest uważane za rodzaj kradzieży. Jeśli nieuprawnione użycie takiego obrazu w sieci zostanie zauważone, możesz spodziewać się mnóstwa kłopotów. Dlatego przy skanowaniu zwracaj zawsze baczną uwagę, by nie skopiować cudzej pracy.

Innym sposobem pozyskiwania grafik na potrzeby tworzenia stron WWW jest fotografia cyfrowa. Fotografie robione przy użyciu cyfrowych aparatów fotograficznych i kamer są gotowe do umieszczenia na stronach WWW niemal zaraz po załadowaniu do komputera, a fakt, iż w porównaniu ze standardowymi aparatami fotograficznymi aparaty cyfrowe robią zdjęcia o mniejszej rozdzielczości, nie ma większego znaczenia w przypadku publikowania prac na stronach WWW. W rzeczywistości ciągły wzrost popularności fotografii cyfrowej oraz WWW jest ze sobą ściśle związany. Jeśli chcesz wysłać rodzinie zdjęcia pierwszych kroków swojego dziecka lub opublikować w Internecie zdjęcia z firmowej imprezy, to użycie cyfrowego aparatu fotograficznego pozwoli Ci uniknąć wielu czynności, które musiałbyś wykonać, gdyby zdjęcia były robione zwyczajnym aparatem fotograficznym.

Gotowe zestawy obrazów

Żadnych artystycznych ambicji? Nie czujesz się na siłach rysować i nie masz dobrych materiałów do skanowania? W takiej sytuacji powinieneś rozejrzeć się za odpowiednim klipartem. Na rynku dostępnych jest kilka tysięcy gotowych zestawów obrazów na dyskietkach i CD-ROM-ach. Możesz je dostać dosłownie wszędzie, zamówić w sieci lub za pośrednictwem poczty. Zajrzyj na tylną stronę okładki Twego ulubionego pisma poświęconego grafice komputerowej: prawdopodobnie znajdziesz tam adresy dystrybutorów.

Korzystając z klipartów, powinieneś jednak pamiętać o sprawdzeniu, czy masz prawo umieścić obraz w sieci. Przeczytaj uważnie umowę licencyjną dołączoną do zestawu. Szukaj sformułowań w rodzaju „public domain” lub „unlimited distribution”, co oznacza, że kliparty są dostępne za darmo. Jeśli natomiast znajdziesz tam coś równoznacznego ze zdaniem „you may not publish the images as computer images”, obrazy z tego zestawu nie mogą być umieszczone w sieci.

Prawie każdy zestaw gotowych obrazów zaopatrzony jest w jakiś serwis techniczny lub linię obsługi klientów. Zadzwoń do nich i spytaj.

Kliparty otrzymywane za pośrednictwem sieci

W związku z rosnącym zapotrzebowaniem na obrazy, znaki graficzne i ikony dla stron sieciowych, pojawiło się w sieci kilka takich miejsc, skąd można otrzymać darmowe pliki GIF z takimi właśnie materiałami. Oto kilka, które ja osobiście najbardziej lubię odwiedzać.

Barry's Clipart Server ma setki obrazów. Użycie niektórych z nich pociąga za sobą obowiązek uiszczenia opłaty na rzecz autora, lecz większość jest własnością publiczną. Przeglądanie zawartości tej strony może trwać godzinami. Połącz się z

http://www.barysclipart.com.

Jeśli interesują Cię ikony, spróbuj połączyć się z Anthony's Icon Library, korzystając z adresu http://www.cit.gu.edu.au/~anthony/icons/index.html.

Także w niektórych wyszukiwarkach sieciowych znajdziesz hasła związane z klipartami i ikonami. Moim ulubionym jest Yahoo!, który posiada całą odrębną sekcję poświęconą ikonom:

http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Graphics/Icons/, a także sekcję poświęconą klipartom i obrazom: http://dir.yahoo.com/ Computers_and_Internet/Graphics/Clip_Art/.

Obrazy z innych stron sieci

Powiedzmy, że wędrowałeś sobie po sieci i nagle znalazłeś stronę, której autor użył naprawdę fantastycznych przestrzennych strzałek jako ikonek nawigacji. Te ikony tak Ci się spodobały, że chciałbyś wykorzystać je na swojej stronie.

Co mógłbyś zrobić w takiej sytuacji? Możesz naturalnie skopiować te strzałki na Twój własny serwer. Jako że zostały one opublikowane w sieci, wystarczy tylko wyszukać nazwy odpowiednich plików (znajdziesz je w tekście źródłowym strony), po czym załadować je do przeglądarki i zapisać na dysk. Jednak takie postępowanie jest etycznie naganne, jeśli nawet nie karalne. Ktoś prawdopodobnie ciężko się napracował nad tymi strzałkami. I choć nie opracowano dotąd konsekwentnej metody egzekwowania praw autorskich w sieci, to kradnąc komuś jego obraz w taki sposób, przekraczamy granice legalności i uczciwości.

Drugi pomysł, na jaki moglibyśmy wpaść, to umieszczenie odnośnika do tego obrazu na naszej stronie. W ten sposób, w sensie technicznym, niczego nie kopiujemy — zamieszczamy tylko na naszej stronie odnośnik do danego obrazu. Jego twórcy mogą być tym jednak bardziej zirytowani, niż gdybyśmy obraz zwyczajnie skopiowali. Problem polega na tym, że za każdym razem, gdy ktoś ładuje naszą stronę, ładuje zarazem przywłaszczony obraz z serwera, z którego go wzięliśmy. Tworzy to zbędny i zwykle niepożądany tłok wokół cudzego serwera. Dlatego też, z punktu widzenia autorów obrazu, rzecz cała może wydawać się jeszcze gorsza niż zwykłe, nieuprawnione kopiowanie.

Zdecydowanie najlepszym rozwiązaniem w takiej sytuacji jest poproszenie autorów interesującego Cię obrazu o pozwolenie zamieszczenia go na Twojej stronie. Może okazać się, że obrazy zostały przeznaczone do rozpowszechniania jako własność publiczna, w związku z czym problem w ogóle nie istnieje. Możesz też zostać poinformowany o konieczności umieszczenia nazwiska prawdziwego autora obrazu na Twojej stronie. W każdym przypadku, szybki e-mail do właściciela praw autorskich nie zaszkodzi, a może zmniejszyć ryzyko popadnięcia w kłopoty.

Format przyszłości: PNG

Po roku 1994, gdy pojawiły się kontrowersje związane z formatem GIF i jego opatentowanym algorytmem kompresji, przeróżne firmy i organizacje działające w branży graficznej zaczęły intensywnie poszukiwać formatu, który mógłby zastąpić format GIF. Proponowano różne formaty, jak choćby TIFF lub zmodyfikowany GIF z innym algorytmem kompresji. Wszystkie miały jednak wady, które czyniły je nieprzydatnymi dla wymagającego środowiska sieciowego. Najważniejsze wymagania, jakie musiał spełniać kandydat na zastępcę, były następujące:

• nieopatentowany algorytm kompresji; po kłopotach z GIF-ami, wszyscy postawili ten warunek na czele swych list postulatów, ponadto kompresja powinna być bezstratna,

• możliwość zapisywania milionów kolorów,

• niezależność sprzętowa i platformowa, jaką posiadają pliki GIF oraz JPEG,

• zdolność wyświetlania z przeplotem i zapisywania przejrzystych miejsc w obrazie, jaką posiada format GIF.

Nowy proponowany format spełniał wszystkie te warunki. Format Portable Network Graphics, w skrócie PNG, został zaprojektowany specjalnie pod kątem obrazów przesyłanych w sieci, przez profesjonalistów w tej dziedzinie. PNG pomyślano przede wszystkim jako zastępcę formatu GIF, a nie jako uniwersalny format graficzny. Dla fotografii i innych tego typu obrazów, dla których akceptowalna jest niewielka utrata jakości, format JPEG wciąż sprawdza się lepiej.

Format PNG (wymawiaj jak „ping”) spełnia wszystkie wymagania z wyżej zamieszczonej listy i jeszcze kilka dodatkowych:

• potrafi zapisywać obrazy z ograniczoną paletą barw, tak samo jak format GIF,

• stosuje algorytm kompresji, który radzi sobie równie dobrze z fotografiami, jak i z prostymi grafikami w rodzaju znaków firmowych,

• potrafi zapisywać wraz z plikiem komentarze i dodatkowe informacje
  (GIF89 także ma taką możliwość),

• wyposażony jest w kanał Alpha, który umożliwia wprowadzanie efektów specjalnych w rodzaju maskowania i przejrzystości,

• pozwala na przeprowadzenie korekcji gamma, co pomaga skompensować różnice w jasności i nasyceniu barw pomiędzy różnymi monitorami.

Nowy format cieszy się zdecydowanym poparciem CompuServe, która opublikowała oryginalną specyfikację formatu GIF i teraz znalazła się między młotem a kowadłem: z jednej strony UniSys i jego prawa patentowe, z drugiej, gniewny tłum grafików i dystrybutorów sieciowych. CompuServe początkowo zamierzała wyjść z własną propozycją, formatem zastępczym o nazwie GIF24, lecz zamiast tego zdecydowała się promować PNG.

Pojawia się coraz więcej programów potrafiących zapisywać i odczytywać format PNG, choć z pewnością nie ma ich jeszcze tak wiele, jak potrafiących odczytywać format GIF. Jednak nowe wersje wielu ważnych programów uwzględniają format PNG, by wymienić tylko Netscape Navigator 4.x, Internet Explorer 4 firmy Microsoft, NCSA Mosaic, CorelDRAW 7, Macromedia's FreeHand Graphics Studio, Paint Shop Pro i Adobe Photoshop.

Jeżeli interesują Cię techniczne szczegóły, to więcej informacji na temat formatu PNG możesz otrzymać pod adresem http://www.libpng.org/pub/png/ lub na stronie W3C http://www.w3.org/Graphics/PNG/.

Źródła informacji

W rozdziale o takiej długości można zaledwie dotknąć tematów tak obszernych, jak grafika komputerowa i teoria obrazów. Moim zamiarem było tylko opisanie podstawowych cech formatów JPEG oraz GIF oraz najlepsze sposoby ich wykorzystania w sieci. Jeżeli interesują Cię tematy tu poruszone, zapoznaj się z zawartością dostępnych w sieci plików FAQ (skrót od Frequently Asked Questions, co oznacza „często zadawane pytania”) lub przeczytaj parę książek poświęconych tym zagadnieniom. Podaję tu częściową listę źródeł, które przydały mi się przy opracowywaniu tego rozdziału.

• Plik Comp.graphics FAQ, dostępny pod adresem http://www.primenet.com/~grieggs/cg_faq.html. Od niego warto zacząć, choć pomyślany jest raczej dla profesjonalnych grafików komputerowych. Autorem tego pliku jest John Grieggs ([e-mail]).

• Plik Colorspace FAQ, okresowo umieszczany na grupie dyskusyjnej comp.graphic, dostępny pod adresem: ftp://rtfm.mit.edu/pub/usenet/news.answers/graphics /colorspace-faq. Opisuje różne modele barw i związki pomiędzy nimi. Znajdziesz tam też wiele informacji z dziedziny matematyki i fizyki, wiążących się z teorią barw.

• „Computer Graphics: Secrets and Solutions” Johna Corrigana, opublikowane przez Sybex Publishing. Książkę tę łatwo się czyta, stanowi ona świetne wprowadzenie w zagadnienia formatów graficznych, kolorów, kompresji i innych pojęć związanych z cyfrowymi obrazami.

• „The Desktop Multimedia Bible” Jeffa Burgera, opublikowana przez Addison Wesley. Książka ta zawiera obszerną część, poświęconą grafice, teorii kolorów, formatom plików i obróbce obrazów. Ta obszerna i wnikliwa pozycja będzie też świetną literaturą uzupełniającą przy lekturze rozdziałów poświęconych dźwiękom i obrazom wideo.

• „Encyclopedia of Graphics File Formats” Jamesa D. Murray-a i Williama Van Rypera, wydana przez O'Reilly and Associates. Ta książka zawiera komplet niezbędnych informacji, a na dodatek towarzyszy jej CD-ROM z oprogramowaniem graficznym.

Podsumowanie

Do niedawna nie mieliśmy żadnych problemów z wyborem formatu, gdy planowaliśmy umieścić obraz w sieci. Mogliśmy wybrać dowolny, pod warunkiem, że to był GIF. Teraz, gdy w powszechne użycie wszedł format JPEG, cała rzecz stała się bardziej skomplikowana. Oba formaty — GIF oraz JPEG — mają swoje zalety, każdy z nich może okazać się optymalny dla konkretnego rodzaju obrazu i konkretnego zastosowania. Zależnie od charakteru wizerunków, które chcesz umieścić na stronie sieciowej, możesz wybrać format GIF lub JPEG, ewentualnie korzystać z nich obu zmianę. W tym rozdziale opowiedziałam o tym, co należy brać pod uwagę przy dokonywaniu takiego wyboru — mam nadzieję, że pomoże to moim Czytelnikom powziąć właściwą decyzję.

Tabela 8.2 przedstawia najważniejsze z tych czynników, zebrane razem dla wygody.

Tabela 8.2:

Cechy formatów graficznych

Format	Kompaty­bilność z przeglą­darkami	Maksymalna liczba kolorów w obrazie	Przeplot i przezro­czystość	Typ kompresji	Kompresja ikon/ znaków graficznych	Kompresja obrazów typu foto­graficznego
GIF	Doskonała	256	Oba	Bezstratna	Doskonała	Niezbyt dobra
PNG	Ograniczona	Miliony barw	Oba	Bezstratna	Doskonała	Dobra
JPEG	Dobra	Miliony barw	Wyświetlanie progresywne	Stratna	Zła	Doskonała

Warsztat

W tej części rozdziału znajdziesz pytania i odpowiedzi, quiz oraz ćwiczenia związane z wykorzystaniem obrazów na stronach WWW.

Pytania i odpowiedzi

P. Co z rozdzielczością obrazów?

O. Gdybyś chciał kiedyś zająć się tworzeniem grafik i obrazów przeznaczonych do umieszczania w książkach lub kolorowych magazynach, kwestia rozdzielczości nabierze dla Ciebie podstawowego znaczenia. Obrazy przeznaczone do druku wymagają bardzo wysokiej rozdzielczości, jeśli chcemy dokładnie odwzorować wszystkie szczegóły. Zwykle są to rozdzielczości 600 - 1200 dpi a nawet wyższe. Jeśli jednak chodzi o sieć, przygotowane przez Ciebie obrazy będą w zasadzie zawsze oglądane na typowym monitorze, o rozdzielczości 72 dpi. Skanuj i edytuj Twoje obrazy, zachowując przy tym stałą rozdzielczość 72 dpi, a wszystko będzie w porządku.

P. Nie mówiłaś zbyt wiele o głębi koloru. Nie wspomniałaś ani słowa o półtonach, skalowaniu obrazów, o systemie barwnym LAB, o kanałach Alpha i korekcji gamma.

O. Mając do dyspozycji jeden rozdział o ograniczonej długości, skoncentrowałam się na tym, co najważniejsze dla ludzi projektujących obrazy na strony sieciowe. Półtony i korekcja gamma nie są zaś dla nich nawet w przybliżeniu tak istotne, jak znajomość zasad tworzenia palet kolorów i różnych typów kompresji. Wybacz, jeśli po-minęłam temat, o którym miałeś ochotę coś poczytać.

P. Na moim zestawie klipartów znalazłem napis royalty free. Czy to oznacza to samo co public domain? Czy mogę je dowolnie wykorzystywać?

O. Napis royalty free oznacza, że nie musimy uiszczać żadnej opłaty na rzecz autorów, wykorzystując dany obraz w sposób dozwolony. Nie określa jednak, co jest sposobem dozwolonym. Obrazy mogą być „royalty free”, jeśli chodzi o ich druk, a jednocześnie może obowiązywać zakaz ich publikacji w sieci. Przeczytaj dokładnie umowę licencyjną, a w razie wątpliwości skontaktuj się z firmą, która te kliparty rozprowadza.

P. Mówiłaś o systemie barwnym HSB i RGB, ale nie o systemie CMYK, na który ciągle się natykam. Co to takiego?

O. CMYK oznacza cztery barwy podstawowe tego modelu barw. C to turkusowy (Cyan), M — karmazynowy (Magenta), Y — żółty (Yellow), K oznacza czarny (Black), gdyż B zostało już wcześniej zarezerwowane dla niebieskiego — Blue. System barwny CMYK używany jest powszechnie w branży drukarskiej. Słyszałeś kiedyś o druku czterokolorowym? To są właśnie te cztery kolory, cztery farby nadrukowywane na papier w postaci rastra: turkusowa, karmazynowa, żółta i czarna. Właściwie ten model barw powinien nazywać się CMY, gdyż trzy pierwsze barwy teoretycznie wystarczają. Mieszając je ze sobą w postaci rastrów o zróżnicowanej intensywności, możemy uzyskać wrażenie dowolnego koloru. Czerń można (teoretycznie) otrzymać, nadrukowując na siebie kolory turkusowy, karmazynowy i żółty, z pełną intensywnością. Ponieważ jednak czystość farb drukarskich z konieczności jest ograniczona, zwykle uzyskuje się z takiej mieszanki bardzo ciemny brąz lub bardzo ciemną zieleń. Dlatego wprowadzono czerń jako czwarty kolor podstawowy. Dzięki niemu czarne obszary obrazu mogą być naprawdę czarne, a nie błotniste.

Ponieważ system barwny CMYK wykorzystywany jest przy druku, a nie dla obrazów wyświetlanych bezpośrednio na monitorze, zignorowałam go całkowicie w tym rozdziale. Jeśli interesuje Cię ten temat, zajrzyj do książek i plików FAQ, które wymieniłam we wcześniejszym podrozdziale „Źródła informacji”.

Quiz

1. Jaki format graficzny jest najczęściej używany przy tworzeniu obrazów publikowanych na stronach WWW?

8. Jaki format graficzny najlepiej nadaje się do tworzenia ikon, grafiki liniowej, logo oraz prostych obrazów? Jaki format lepiej nadaje się do zapisu obrazów o większej ilości szczegółów?

9. Co oznacza termin kompresja stratna?

10. Czym jest przeplot w obrazach GIF? W jaki sposób obrazy GIF z przeplotem są wyświetlane w przeglądarkach WWW?

11. Podaj nazwę nowego formatu graficznego, który ma zastąpić format GIF?

Odpowiedzi

1. Przy tworzeniu stron WWW najczęściej jest wykorzystywany format GIF. Wynika to z faktu, iż format ten jest obsługiwany przez przeważającą większość przeglądarek i udostępnia specjalne możliwości, takie jak przeźroczystość oraz animacje.

12. Do zapisu prostych obrazów najlepiej nadaje się format GIF, natomiast format JPEG lepiej nadaje się do zapisu obrazów o dużej ilości szczegółów i kolorów, takich jak fotografie.

13. Kompresja stratna oznacza, że niektóre dane obrazu są pomijane przy jego zapisie, w celu ograniczenia wielkości pliku.

14. Przeplot to sposób zapisu obrazów GIF, który pozwala wyświetlać je stopniowo, a nie, jak to jest w przypadku standardowych obrazów GIF, od góry do dołu.

15. Jest to format PNG (Portable Network Graphics), opracowany po pojawieniu się wątpliwości prawnych związanych z algorytmem kompresji wykorzystywanym w formacie GIF.

Ćwiczenia

1. Korzystając z galerii przedstawionych w tym rozdziale odszukaj w Internecie i pobierz dowolne zdjęcie, a następnie zapisz je w różnych formatach i spróbuj w jak największym stopniu zredukować jego wielkość bez zauważalnego pogorszenia jego jakości.

16. Spróbuj znaleźć na WWW jakiekolwiek obrazy zapisane w formacie PNG. Nie ważne, czy będą one używane na jakiejś witrynie, czy też odnajdziesz je w jednej z internetowych galerii. Zapisz kilka takich obrazów na swoim komputerze i sprawdź, czy format ten daje możliwość wykorzystania przeplotu i przezroczystości (w tym celu posłuż się programami graficznymi przedstawionymi w tym rozdziale).

222 Część 3. Grafika na WWW

Rozdział 8. Tworzenie obrazów na potrzeby sieci 221

Obraz z nieprzejrzystym tłem

Obraz z przejrzystym tłem
(pod rysunkiem widoczne tło strony)

Pierwsze przejście
(linie 1,9)

Drugie przejście
(linie 5,13)

Trzecie przejście
(linie 3,7,11)

Czwarte
przejście
(wszystkie
pozostałe linie)

---