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.
192 Część 3. Grafika na WWW
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.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 193
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średnic-
twem 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 ko-
loró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 ro-
zumieniem 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ę. Wyobraz
sobie, że jesteś malarzem
i nakładasz na paletę farbę z tubki: czerwoną, niebieską, żółtą, pomarańczową, fioleto-
wą... i tak dalej, przez wszystkie kolory tęczy. Ten  kolor z tubki , to właśnie nasz od-
cień. Nie musi to być koniecznie albo zielony, albo niebieski  są też odcienie pośred-
nie, 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 znajdzie-
my na 120°, niebieski na 240°, a wszystkie odcienie poÅ›rednie  pomiÄ™dzy nimi (patrz
rysunek 8.1).
Rysunek 8.1.
Odcienie
194 Część 3. Grafika na WWW
Odcień to zasadnicza barwa, na bazie której budujemy kolor, przykładowo może to być bar-
wa 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 zmniej-
szyć parametr Brightness. Gdy zaś chcemy, na przykład, uczynić tę barwę odrobinę bar-
dziej 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 najwygodniejsze-
go (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
Rozdział 8. Tworzenie obrazów na potrzeby sieci 195
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 zu-
peł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. A
ą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 war-
toś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 popu-
larniejszy? 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 ob-
196 Część 3. Grafika na WWW
razem, powinniśmy myśleć o jego barwach w kategoriach systemu HSB. Pamiętajmy
jednak, że gdy program pyta nas o kolor, chce otrzymać odpowiedz
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 sys-
temami 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 maksymal-
na liczba różnych barw, jakie mogą w nim wystąpić. Gdy konwertujemy obraz do for-
matu 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ądz
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żli-
wość 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.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 197
Ć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 sen-
sownie. Ale jak właściwie mam zredukować liczbę barw? W przypadku prostych iko-
nek i znaczków mogę ograniczyć się przy ich malowaniu do kilku barw. Ale co z bar-
dziej 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ę ograni-
czyć 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, sprawdz
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 Co-
lor, 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 Co-
lor powoduje wyświetlenie okna dialogowego, takiego jak na rysunku 8.7 (w Photosho-
pie 3.0; w Photoshopie 4.0 wybieramy z górnego menu: Obrazek/Tryb/Kolor indekso-
wany (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 bez-
wzglę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
198 Część 3. Grafika na WWW
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ępowa-
nia 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 uzy-
skać największą gładkość obrazu. Przy wyborze palety barw przeważnie będziemy ko-
rzystać 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.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 199
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ły-
by 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 kolo-
ró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 bi-
tach 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)
200 Część 3. Grafika na WWW
Być może zainteresuje Cię, jakie zmiany w wielkości pliku pociągnęły za sobą poczy-
nione 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 ki-
lobajtó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 uzy-
skać optymalną jakość przy dostatecznie małych rozmiarach pliku lub też użyliśmy ob-
razó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 niespo-
dzianki przy oglądaniu ich na niektórych stronach i niektórych platformach sprzęto-
wych. Może się zdarzyć, że wyświetlony na stronie WWW obraz będzie mieć horren-
dalnie 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 komputero-
wy ma dwa podstawowe parametry działania: rozdzielczość oraz głębię kolorów. Roz-
dzielczość określa ilość pikseli, jaką można w danej chwili wyświetlić na ekranie, na-
tomiast 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 przecho-
wywać 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 wyso-
kiej rozdzielczości. Wtedy także komputery posiadały co najwyżej 4 MB pamięci graficz-
nej, jednak przeważnie nie mniej niż 2 MB. A zatem, w zależności od rozdzielczości wy-
branej 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ę pro-
blem 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 wszyst-
kich 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  inte-
ligentny , 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.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 201
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. Ozna-
cza 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ą od-
rzucone 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 przy-
bliż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ęp-
nie 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
202 Część 3. Grafika na WWW
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 udo-
stępnia 256-kolorową paletę systemową. Jeśli wszystkie istniejące aplikacje wykorzy-
stywałyby wyłącznie te kolory systemowe, to wszelkie problemy związane z przydzie-
laniem 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łada-
ją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 zastoso-
wać 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 pod-
czas wyświetlania obrazu w przeglądarce zostaną wykorzystanie dokładnie te same kolo-
ry, 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 bra-
kuje 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 pikse-
li, 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łado-
wych 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.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 203
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 zaj-
miemy siÄ™ metodami kompresji, stosowanymi w formatach GIF oraz JPEG. Dowiemy
się też, jakiego typu obrazy powinniśmy kompresować każdą z tych metod dla uzyska-
nia 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żyt-
kownicy systemu Windows, programu Zip lub innego. Większość popularnych forma-
tó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 skompre-
sować obraz, zapisany w formacie wykorzystującym jakiś algorytm kompresji (na przy-
kł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 po-
trzeby stron WWW jest umiejętność określenia formatu odpowiedniego dla projekto-
wanego 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. (Wyobraz
sobie, że ktoś
wyrzuciłby z tej książki co drugie albo co trzecie słowo w celu jej pomniejszenia, nie-
trudno 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.
204 Część 3. Grafika na WWW
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 te-
go 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 gra-
fiki, 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óżnicowa-
nia 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 zapisy-
wania obrazów o dużych obszarach tego samego lub podobnych kolorów, w szczegól-
noś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 posia-
dają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ę popla-
miony 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 znalez
ć kompromis pomiędzy jakością obrazu a wielko-
ścią pliku.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 205
Wyświetlanie skompresowanych plików
Skompresowane pliki nie mogą zostać wyświetlone bez uprzedniej dekompresji. Pro-
gramy, które odczytują i wyświetlają obrazy zapisane w takich plikach, jak choćby pro-
gramy malarskie albo przeglÄ…darki sieciowe, dekompresujÄ… obraz w chwili otwarcia al-
bo 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ła-
dzie 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Ä… jednako-
we 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ą wiel-
koś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 kom-
presji 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. Po-
nieważ kompresja LZW jest bezstratna, skompresowane logo jest identyczne z oryginalnym.
206 Część 3. Grafika na WWW
Teraz wypróbujmy kompresję JPEG. Gdy zapisujemy logo w formacie JPEG, Pho-
toshop 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 ozna-
cza 95% wielkości początkowego pliku (współczynnik kompresji 20:1). Niez
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 (Excel-
lent). 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 wy-
niki, 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ównywal-
ny 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ów-
nież 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 do-
Rozdział 8. Tworzenie obrazów na potrzeby sieci 207
równują, pod względem jakości, obrazowi zapisanemu w pliku GIF, który z tej konfron-
tacji 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 pli-
ku 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 ob-
ję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 wyni-
kó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ę bar-
dzo niewiele informacji, jest mniejszy od analogicznego pliku GIF z tym samym obra-
zem. Użycie formatu JPEG pozwala poczynić naprawdę wielkie oszczędności w roz-
miarach plików przy zapisywaniu fotografii i innych obrazów bogatych w szczegóły.
Sprawdz
my jeszcze jakość obrazów, zapisanych w formacie JPEG. Rysunek 8.14 poka-
zuje je w kolejności tworzenia.
208 Część 3. Grafika na WWW
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 sto-
sunkowo najniższej jakości (Fair) wygląda całkiem przyzwoicie i nadaje się do prak-
tycznego 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 wyko-
rzystać w celu uatrakcyjnienia tworzonych stron WWW. Można do nich zaliczyć: prze-
zroczystość  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 alterna-
tywna 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 ob-
razek 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 ta-
kiej 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żliwia-
ją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 odnalez
ć obraz o odpowiednim
tle. Do wprowadzenia przezroczystości najlepiej nadają się obrazy o gładkim tle jedne-
go koloru (patrz rysunek 8.16a), na przykład, ikony mają zazwyczaj przez
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ę wyraz
nie odróżniał do jego tła (patrz rysunek 8.16b).
Rozdział 8. Tworzenie obrazów na potrzeby sieci 209
Rysunek 8.15.
Obraz z nieprzejrzystym
i przejrzystym tłem
Obraz z przejrzystym tłem
Obraz z nieprzejrzystym
(pod rysunkiem widoczne tło strony)
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 odcie-
ni (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 graficz-
nym i skopiować do obrazu o jednokolorowym tle. Można także zmodyfikować tło ob-
razu w taki sposób, aby stało się jednolite. Większość programów graficznych, pozwa-
lają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.
210 Część 3. Grafika na WWW
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 wyko-
rzystania 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 bar-
dziej szczegółowy. Ostateczny wygląd obrazu jest zawsze taki sam, jednak wykorzysta-
nie 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świe-
tlania 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 zapisy-
wać 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 li-
nii 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, Netsca-
pe), brakujące linie mogą być z początku wypełniane pikselami skopiowanymi z linii
już wprowadzonych. Widzimy wtedy najpierw obraz zamglony i niewyraz
ny albo ziar-
nisty, z widocznymi barwnymi kwadratami (patrz rysunek 8.19), stopniowo staje siÄ™ co-
raz bardziej ostry w miarę, jak wyświetlane są kolejne linie.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 211
Rysunek 8.18.
Pierwsze przejście
Plik GIF zapisany
(linie 1,9)
z przeplotem
Drugie przejście
(linie 5,13)
Trzecie przejście
(linie 3,7,11)
Czwarte
przejście
(wszystkie
pozostałe linie)
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 zainte-
resuje. W krótszym czasie może przejrzeć większą ilość materiałów. Jeżeli wyświetlany
212 Część 3. Grafika na WWW
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 firmo-
we. Obrazy te ładują się na tyle szybko, że i tak nikt nie zdąży zauważyć efektu stop-
niowego pojawiania siÄ™.
Wyświetlanie progresywne w formacie JPEG
Progresywne pliki JPEG są zapisywane w specjalny sposób, tak aby podczas wyświe-
tlania 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 po-
trzebny 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 jesz-
cze dla formatu GIF87: przeplot nie przeszkadza odczytać obrazu. Pliki JPEG z progre-
sją 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 popu-
larność 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 wy-
korzystywanych na stronach WWW i pozwala na użycie takich rozwiązań, jak przezro-
czystość bądz
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 znalez
ć 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 zapi-
sywać obrazy GIF z przejrzystym tłem i z przeplotem. Najnowsza wersja tego progra-
mu, 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:
Rozdział 8. Tworzenie obrazów na potrzeby sieci 213
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 anima-
cji. 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 na-
wet 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 przy-
padkó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 znalez
ć 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 inte-
raktywnych 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 do-
datkowo 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ęp-
nych 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ść pro-
gramó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 znalez
ć wiele użytecznych narzędzi do edycji i tworzenia obra-
214 Część 3. Grafika na WWW
zó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 ob-
razów do wykorzystania na Twoich stronach sieci. Poniżej przedstawiamy kilka sugestii.
Rozdział 8. Tworzenie obrazów na potrzeby sieci 215
WÅ‚asne projekty
Jeśli masz choćby minimalny talent plastyczny, zastanów się nad malowaniem lub ry-
sowaniem 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ć pro-
stej 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ży-
ciem skanera. Skaner jest doskonałym z
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 mate-
riałów: liści, skóry, drewna... wszystkiego, co tylko uda nam się włożyć do skanera. Po-
tem 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 poligraficz-
nej, wyposażonej w odpowiedni sprzęt. Zastanów się. Skaner może być bezcenną po-
mocą, 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 fotogra-
fia cyfrowa. Fotografie robione przy użyciu cyfrowych aparatów fotograficznych i ka-
mer są gotowe do umieszczenia na stronach WWW niemal zaraz po załadowaniu do
komputera, a fakt, iż w porównaniu ze standardowymi aparatami fotograficznymi apa-
raty 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 Inter-
necie 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 dys-
216 Część 3. Grafika na WWW
kietkach 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 ozna-
cza, że kliparty są dostępne za darmo. Jeśli natomiast znajdziesz tam coś równoznacz-
nego 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ł na-
prawdę 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 z
ródłowym strony), po czym za-
ładować je do przeglądarki i zapisać na dysk. Jednak takie postępowanie jest etycznie
Rozdział 8. Tworzenie obrazów na potrzeby sieci 217
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  za-
mieszczamy 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 przy-
wł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 in-
teresującego Cię obrazu o pozwolenie zamieszczenia go na Twojej stronie. Może oka-
zać 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 opaten-
towanym algorytmem kompresji, przeróżne firmy i organizacje działające w branży gra-
ficznej 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 algo-
rytmem 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 wszyst-
kim 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, for-
mat JPEG wciąż sprawdza się lepiej.
218 Część 3. Grafika na WWW
Format PNG (wymawiaj jak  ping ) spełnia wszystkie wymagania z wyżej zamiesz-
czonej 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 dys-
trybutoró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/.
y
ródła informacji
W rozdziale o takiej długości można zaledwie dotknąć tematów tak obszernych, jak gra-
fika 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 pli-
ków FAQ (skrót od Frequently Asked Questions, co oznacza  często zadawane pyta-
nia ) lub przeczytaj parę książek poświęconych tym zagadnieniom. Podaję tu częściową
listÄ™ z
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]).
Rozdział 8. Tworzenie obrazów na potrzeby sieci 219
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 dz
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. Te-
raz, gdy w powszechne użycie wszedł format JPEG, cała rzecz stała się bardziej skom-
plikowana. Oba formaty  GIF oraz JPEG  mają swoje zalety, każdy z nich może
okazać się optymalny dla konkretnego rodzaju obrazu i konkretnego zastosowania. Za-
leż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 roz-
dziale opowiedziałam o tym, co należy brać pod uwagę przy dokonywaniu takiego wy-
boru  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- Maksymalna Przeplot Typ Kompresja Kompresja
bilność liczba kolorów i przezro- kompresji ikon/ obrazów
z przeglą- w obrazie czystość znaków typu foto-
darkami graficznych 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 Stratna Zła Doskonała
progresywne
220 Część 3. Grafika na WWW
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 na-
bierze dla Ciebie podstawowego znaczenia. Obrazy przeznaczone do druku wyma-
gają 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, za-
chowują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ółto-
ny i korekcja gamma nie są zaś dla nich nawet w przybliżeniu tak istotne, jak zna-
jomość 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 sposo-
bem dozwolonym. Obrazy mogą być  royalty free , jeśli chodzi o ich druk, a jedno-
cześnie może obowiązywać zakaz ich publikacji w sieci. Przeczytaj dokładnie umo-
wę 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 (Cy-
an), 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 nadrukowy-
wane na papier w postaci rastra: turkusowa, karmazynowa, żółta i czarna. Właściwie
Rozdział 8. Tworzenie obrazów na potrzeby sieci 221
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) otrzy-
mać, nadrukowując na siebie kolory turkusowy, karmazynowy i żółty, z pełną inten-
sywnością. Ponieważ jednak czystość farb drukarskich z konieczności jest ograni-
czona, 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 obra-
zó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 wy-
mieniłam we wcześniejszym podrozdziale  y
ródła informacji .
Quiz
1. Jaki format graficzny jest najczęściej używany przy tworzeniu obrazów
publikowanych na stronach WWW?
2. 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?
3. Co oznacza termin kompresja stratna?
4. Czym jest przeplot w obrazach GIF? W jaki sposób obrazy GIF z przeplotem
są wyświetlane w przeglądarkach WWW?
5. 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 przez
roczystość
oraz animacje.
2. 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.
3. Kompresja stratna oznacza, że niektóre dane obrazu są pomijane przy jego zapisie,
w celu ograniczenia wielkości pliku.
4. 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.
5. Jest to format PNG (Portable Network Graphics), opracowany po pojawieniu siÄ™
wątpliwości prawnych związanych z algorytmem kompresji wykorzystywanym
w formacie GIF.
222 Część 3. Grafika na WWW
Ć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.
2. Spróbuj znalez
ć 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 sprawdz
, czy format ten daje możliwość wykorzystania przeplotu
i przezroczystości (w tym celu posłuż się programami graficznymi przedstawionymi
w tym rozdziale).