R 08 07, HTML
[ Pobierz całość w formacie PDF ]
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 oprogr
amowanie.
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 ziarnist
e 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 wzdolność komunikowania się z różnymi platformami
sprzętowymi. Niewykluczone, że formatem tym będzie PNG, o którym opowie
m 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 życ
ie 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 o
raz 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ę. Wyobraź 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. Łą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-
[ Pobierz całość w formacie PDF ]