Tworzenie obrazów na potrzeby sieci

Mogłoby się zdawać, se w poprzednim rozdziale opowiedzieliśmy jus wszystko o obrazach wykorzystywanych w sieci. Cós, rzeczywiście na temat usycia obrazów w HTML była jus mowa, ale o samych obrazach powiedzieliśmy dotąd bardzo niewiele. Jest kilka rzeczy, które warto wiedzieć o ich przygotowaniu, choć z językiem HTML te wstępne zabiegi nie mają nic wspólnego. W tym rozdziale wyjaśnimy sobie kilka podstawowych pojęć dotyczących obrazów umieszczanych w sieci i obrazów w ogóle, między innymi, omówione zostaną następujące tematy:

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

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

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

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

n    sposoby tworzenia i wykorzystania obrazów,

n    przyszłość: format PNG.

Formaty obrazów

GIF

GIF, a dokładniej — CompuServeGIF, to obecnie najpopularniejszy format graficzny usywany w sieci. Format GIF (skrót od: Graphic Interchange Format) został opracowany przez CompuServe jako środek komunikacji między rósnymi systemami komputerowymi. Powinieneś umieć odczytać obraz w formacie GIF na kasdym komputerze, byle tylko po-siadał on nadające się do tego oprogramowanie.

Istnieją dwie, bardzo podobne do siebie odmiany formatu GIF: oryginalny format GIF87 oraz jego ulepszona, nowocześniejsza wersja, GIF89a. Format GIF89a został wyposasony w zapis przezroczystości oraz przeplot, mose tes 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, gdys format GIF pozwala zapisać jedynie 256 barw. Fotografie wyeksportowane w formacie GIF wydają się zwykle ziarniste i poplamione.

Największy problem, jaki wiąse się obecnie z wykorzystaniem formatu GIF, nie ma nic wspólnego z technicznymi aspektami tej sprawy. Otós zabudowany w nim system kompresji LZW, jest chroniony prawem patentowym. Właściciel patentu, UniSys zasądał opłaty od kasdej kopii LZW. Opłatę tę obowiązani są uiszczać wszyscy usytkownicy formatu GIF, korzystający z niego po roku 1994, chyba se 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 mose wkrótce stracić popularność na rzecz jakiegoś bardziej dostępnego formatu, równies wyposasonego w zdolność komunikowania się z rósnymi platformami sprzętowymi. Niewykluczone, se 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 mose być wykorzystywany przez rozmaite formaty plików. Jednak równies ten format, dla którego omawiany system opracowano i wprowadzono w sycie po raz pier-wszy, znany jest powszechnie jako JPEG (wymawiany jak „dsaj-peg”).

JPEG został zaprojektowany dla potrzeb przechowywania obrazów fotograficznych. Inaczej nis w przypadku obrazu w formacie GIF, obraz JPEG mose 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, nis gdybyśmy zapisali ten sam obraz w formacie GIF. Format ten wykorzystuje algorytm kompresji stratnej, co oznacza, se 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, se 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ąskę na omówienie teorii kolorów, to opisalibyśmy co najmniej pół tuzina rósnych systemów barwnych. Ta ksiąska 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 as 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, gdys opisuje on kolory w sposób zgodny z naszym intuicyjnym rozumieniem barw. W systemie barwnym HSB kolor opisywany jest przez trzy czynniki: odcień (Hue), nasycenie (Saturation) i jasność (Brightness).

Przez odcień (Hue) rozumiemy zasadniczą barwę. Wyobraź sobie, se jesteś malarzem i nakładasz na paletę farbę z tubki: czerwoną, niebieską, sół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ą tes odcienie pośrednie, np. zielononiebieski albo sółtopomarańczowy. Jako odcień mose posłusyć nam kasda z barw słonecznego spektrum, rozłosonego na tzw. kole barw. Wybrany odcień z koła barw określamy za pomocą miary kątowej, od 0 do 360°. Odcień sółty znajdziemy na 120°, niebieski na 240°, a wszystkie odcienie pośrednie — pomiędzy nimi (patrz rysunek 8.1).

Korzystając z modelu HSB, mosemy odwzorować dowolną barwę, a co najwasniejsze, mosemy ją precyzyjnie określić za pomocą trzech liczb, odpowiadających wartościom parametrów H, S i B. Takse 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ć mose, nazywał się on nieco inaczej (na przykład, HSL — Hue, Saturation, Lightness).

System barwny RGB (Red, Green, Blue)

Gdy jus 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, przewasnie mamy do czynienia z zupełnie innym sposobem zapisu barw. Większość programów graficznych opisuje kolory w systemie barwnym RGB (Red, Green, Blue).

Zwróć uwagę, se mosesz 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ósne matematyczne systemy opisywania koloru. Temu samemu kolorowi mosemy przypisać określone wartości w systemie RGB albo w systemie HSB, mosemy tes 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. Mosemy zmierzyć swoją wysokość w calach, centymetrach albo odmierzyć ją puszkami po coca-coli. Uzyskamy najzupełniej rósne wartości liczbowe, ale przecies nasz wzrost pozostanie ten sam.

Dlaczego więc tak się rozwodzimy nad systemem HSB, skoro RGB jest o wiele popularniejszy? Poniewas zmienić kolor w systemie HSB jest o wiele łatwiej, nis 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 tes, pracując nad obrazem, powinniśmy myśleć o jego barwach w kategoriach systemu HSB. Pamiętajmy jednak, se gdy program pyta nas o kolor, chce otrzymać odpowiedź wyrasoną 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, usywane do zapisu obrazów — JPEG i GIF — wyrasają kolory w systemie RGB, za pomocą zestawu trzech wartości, zmieniających się od 0 do 255. Zasadnicza rósnica między tymi formatami polega na tym, se w formacie GIF ogólna liczba usytych w obrazie kolorów nie mose przekroczyć 256, zaś w formacie JPEG mosemy przechować dowolną liczbę barw.

Obraz w formacie GIF posiada paletę złosoną z 256 próbek, a więc taka jest maksymalna liczba rósnych barw, jakie mogą w nim wystąpić. Gdy konwertujemy obraz do formatu GIF, zazwyczaj musimy zredukować liczbę jego barw do 256. Gdy usyjemy do tej konwersji jakiegoś dobrego programu malarskiego, mosemy zwykle w jakiś sposób wpływać na to, które z barw obrazu zostaną pominięte, a które nie.

Oczywiście, mosemy tes zapisać obraz w formacie GIF przy usyciu mniejszej liczby barw. Nie jest to wcale zły pomysł: im mniej kolorów, tym mniejszy będzie rozmiar pliku.

Obraz w formacie JPEG mose zawierać dowolną liczbę rósnych barw, co daje mosliwość przebierania wśród milionów kolorów. Dobrowolne ograniczenie liczby barw nie wpłynie decydująco na wielkość pliku, gdys w przypadku formatu JPEG ostateczna wielkość pliku zalesy 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 smudne 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.

Obraz, od którego zaczniemy, będzie zapisanym w systemie barwnym RGB rysunkiem rósy, w którym usyto wielu odcieni barwy rósowej i zielonej (patrz rysunek 8.6). Na zamieszczonym tu obrazku nie mosesz oczywiście zobaczyć ani rósu, ani zieleni, ale chyba bez trudu wyobrazisz sobie ten kwiatek w kolorach.

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 mose się okazać, se nasz wyjściowy rysunek wcale nie zawiera więcej nis 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).

Jeseli obraz rzeczywiście zawiera mniej nis 256 kolorów, ich rzeczywista ilość zostaje wyświetlona w okienku opcji Other w polu Resolution. W takiej sytuacji nalesy bezwzględnie skorzystać z tych właśnie barw. W ten sposób nie będziemy musieli usuwać sadnych kolorów i zachowamy nasz obraz niezmieniony. W przypadku naszej rósy nie

mamy jednak szczęścia: nic nie pojawiło się w okienku Other, a więc jednak będzie trzeba dokonać redukcji barw. Cós, 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ę zalesność.

Tabela 8.1:

Ilość barw w obrazie

Nalesy pamiętać, se kasda z tych barw definiowana jest w systemie barwnym RGB, z zachowaniem pełnej swobody wyboru. Nie ma sadnych ograniczeń stosowania określonych kolorów, jedyne, to ich łączna ilość. Mosemy więc mieć obraz złosony z 256 barw, w którym wszystkie barwy są rozmaitymi odcieniami rósu, jeśli tego sobie właśnie syczymy.

Poniewas 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łosenie czarnych i białych pikseli w szachownicę daje wrasenie szarości. Zazwyczaj będziemy korzystać z roztrząsania typu Diffusion, gdys pozwala ono uzyskać największą gładkość obrazu. Przy wyborze palety barw przewasnie 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.

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.

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

Wszystko to mosna jednak jeszcze naprawić. Odwołujemy dokonaną przed chwilą konwersję, wybierając polecenie Undo i na ekranie znów pojawia się pełnokolorowa rósa 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. Usyj 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, as w końcu osiągniemy taką jakość obrazu, jaką jus mosemy zaakceptować. Naturalnie, najlepszą jakość osiągnie-my, korzystając z opcji 8 bits/pixel. Czasem jednak jus przy 5 lub 6 bitach na piksel obrazu udaje się osiągnąć zupełnie zadowalający rezultat, a nasz 5-bitowy obraz nie rósni bardzo od swej 8-bitowej wersji.

W przypadku naszej rósy 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ósa dla porównania).

Być mose zainteresuje Cię, jakie zmiany w wielkości pliku pociągnęły za sobą poczynione przez nas zmiany. Rósa 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ć mose 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 mose mieć jus znaczący wpływ na tempo ich ładowania.

Wyświetlanie kolorów

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

Pozwól, se krótko opiszę sposób działania karty graficznej. Kasdy monitor komputerowy ma dwa podstawowe parametry działania: rozdzielczość oraz głębię kolorów. Rozdzielczość określa ilość pikseli, jaką mosna w danej chwili wyświetlić na ekranie, natomiast głębia kolorów to ilość unikalnych kolorów, jakimi mosna wyświetlić kasdy piksel. Ilość ustawień rozdzielczości oraz głębi kolorów zalesy 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 kasdy piksel monitora zajmuje w pamięci 1 bajt (jeden bajt mose bowiem przechowywać 256 rósnych wartości). W trybie High Color (65536 kolorów), kasdy piksel zajmuje w pamięci 2 bajty, natomiast w trybie True Color (16,7 miliona kolorów) kasdy piksel zajmuje 3 bajty pamięci.

Starsze karty graficzne wyprodukowane w czasach, gdy pamięć była drossza, nie zostały wyposasone w taką jej ilość, która umosliwiłaby usycie więcej nis 256 kolorów w wysokiej rozdzielczości. Wtedy takse komputery posiadały co najwysej 4 MB pamięci graficznej, jednak przewasnie nie mniej nis 2 MB. A zatem, w zalesności od rozdzielczości wybranej przez usytkownika, mogły pracować w trybie High Color lub True Color.

W przypadku kart graficznych usywających palety 256 kolorów mose pojawić się problem braku dostępnych kolorów. Kasdy z nich, jus 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 usyć jednego z jus 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 duse ilości kolorów, bardzo często mosna zauwasyć zmianę kolorów pulpitu oraz wszystkich pozostałych aplikacji.

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

Powysszy problem mosna rozwiązać na kilka rósnych sposobów. Ponisej 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 nis 256 kolorów, na przykład, mosemy mieć na stronie cztery, w przybliseniu równej wielkości obrazy, kasdy 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 mosliwości przeglądarki. Do ograniczenia liczby barw w kasdym obrazie z osobna mosemy usyć procedury opisanej w poprzednim ćwiczeniu.

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

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

2. Konwertujemy dusy 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 dusego dokumentu; usyjemy jej dla kasdego 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 kasdego z otwartych obrazów wybieramy polecenie Color Table z menu Mode i otwieramy zapisaną wcześniej na dysku paletę kolorów.

7. Zapisujemy kasdy otworzony obraz na dysku wraz z tą paletą.

Bezpieczne palety kolorów

Powysej opisałam, w jaki sposób mosna stworzyć paletę kolorów, której mosna następnie usyć do tworzenia własnych obrazów. To doskonały wstęp do prezentacji najlepszej metody umosliwiają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 nis dziś umosliwiało wyświetlanie jedynie 256 kolorów. Wtedy przydzielanie kolorów było bardzo powasnym problemem.

Dodatkowym zadaniem, jakie stanęło przed firmą Netscape był fakt, is przeglądarka Netscape Navigator działała w rósnych systemach operacyjnych. Kasdy 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 kasdym 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, usywający więcej nis 256 kolorów do formatu GIF, najlepsze efekty mosna 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 usywane kolory. Jeśli w two­rzonym obrazie chcesz zastosować 2-bitową paletę, zostaną w niej zapisane 4 najczęściej usywane kolory. Niestety, jeśli podczas wyświetlania takiego obrazu w przeglądarce, usywane 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 mose być fioletowe, a to, co miało być niebieskie mose być sółte — po prostu nie da się tego przewidzieć.

Z drugiej jednak strony, jeśli usyjesz bezpiecznej palety, mosesz mieć pewność, se podczas wyświetlania obrazu w przeglądarce zostaną wykorzystanie dokładnie te same kolory, których usyłeś do jego tworzenia. Niestety, musisz ograniczyć się do usycia 216 barw wybranych przez firmę Netscape. To mose stanowić powasny problem w przypadku obrazów wykorzystujących wiele odcieni tego samego koloru lub kolory, których brakuje w palecie.

Pomimo wszystko, przewasająca większość grafików tworzących obrazy na potrzeby stron WWW, przystaje na ograniczenia narzucane przez bezpieczną paletę kolorów, aby zapewnić, se 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 as do samego dołu, otrzymamy bardzo długi spis kolejnych liczb, po trzy dla kasdego 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 duse są pliki tego typu. A im większy rozmiar pliku, tym dłusszy 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 wyrasonych 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ę tes, jakiego typu obrazy powinniśmy kompresować kasdą z tych metod dla uzyskania jak najlepszych rezultatów.

Podstawowe wiadomości o kompresji

Prawdopodobnie spotkałeś się jus z aplikacjami usywanymi do kompresji plików. Usytkownicy komputerów Macintosh usywają w tym celu programu StuffIt, a usytkownicy 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 usyciu programu archiwizującego ogólnego przeznaczenia, okase się, se 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 nalesy zapisać i wyświetlić obraz zapisany w konkretnym formacie. Rósne formaty graficzne wykorzystują rósne algorytmy, zapewniające odmienne stopnie kompresji i posiadające rósne 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 mose 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, se w mechaniczny sposób wyrzucają niektóre piksele z obrazu. (Wyobraź sobie, se ktoś wyrzuciłby z tej ksiąski 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.)

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ósnych rodzajów obrazów. Zalesnie 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 dusych jednobarwnych obszarach, jak choćby ikony albo rósnego typu kolorowe grafiki, doskonale nadają się do zapisywania w formacie GIF, gdys stopień kompresji jest dla nich naprawdę dusy. 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ósnice pomiędzy nimi nis same piksele. System ten sprawdza się szczególnie dobrze dla obrazów bogatych w drobne szczegóły, gdzie występują liczne zrósnicowania 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 dusych obszarach tego samego lub podobnych kolorów, w szczególności obrazów o ostrych krawędziach. (Format ten mose wprowadzić zrósnicowania w dusych obszarach o jednolitym kolorze.)

Nalesy tes pamiętać, se kompresja formatu JPEG jest stratna, co znaczy, se pomijana jest pewna część informacji o kolorach oryginalnego obrazu. Niektóre programy posiadające mosliwość zapisu obrazów w formacie JPEG pozwalają na określenie poziomu jakości zapisywanego obrazu. Im nissza 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 mose okazać się poplamiony i ziarnisty w takim stopniu, se oszczędność poczyniona na objętości pliku nie wynagrodzi nam tych strat.

Jeseli zdecydujesz się na usycie formatu JPEG dla Twojego obrazu, wypróbuj kilka rósnych 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, zalesy od rodzaju usytej kompresji i szybkości Twojego komputera.

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

Wszystko to, co do tej pory mówiliśmy o kompresji było teorią i najwysszy czas jus spróbować zastosowania w praktyce. Usyjmy rósnych rodzajów kompresji na kilku konkretnych obrazach, co pozwoli uwidocznić rósnice 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). Kasdy z tych obrazów, zapisany bez kompresji (jako zwykła lista kolejnych pikseli) w systemie barwnym RGB ma rozmiar 109 443 bajtów, w przybliseniu 110 kB.

Zacznijmy od logo. Jako programu do edycji będę usywać Photoshopa; Twój program malarski mose 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.

Przede wszystkim, konwertujemy obraz do systemu barwnego Indexed Color. Nie jest to skomplikowane, gdys obraz ma zaledwie siedem rósnych 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 usyciu tej procedury kompresji udało nam się zmniejszyć plik as o 97% pierwotnej wielkości.

Jak by powiedział specjalista z tej bransy, współczynnik kompresji wynosi 30:1, znaczy to, se skompresowany plik jest 30 razy mniejszy od oryginalnego. Jako se 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 dusych powierzchni gładkiego koloru. Poniewas 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 mosemy ustalić stopień kompresji (patrz rysunek 8.11).

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

Pierwszy obraz został zapisany z najwysszą 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ósnica 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ąs 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.

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 usytku. Kompresja typu JPEG spowodowała powstanie ziarnistości i licznych zabrudzeń, obejmujących równies tło obrazka poza właściwym logo. Usycie 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łusy 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).

Aby móc zapisać ten obraz w formacie GIF, musimy przekonwertować go najpierw do systemu barwnego Indexed Color. Jako se ilość barw w wyjściowym obrazie jest dusa, 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 usyciu 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 tes nie jest to rezultat bardzo zły.

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

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

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

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

Choć między tymi trzema obrazami daje się zauwasyć rósnice, to nawet obraz o stosunkowo najnisszej jakości (Fair) wygląda całkiem przyzwoicie i nadaje się do praktycznego wykorzystania. Poniewas jednak uzyskujemy całkiem przyzwoity stopień kompresji takse przy wysszej jakości obrazu, mosemy śmiało zdecydować się na obraz pośrodku lub po prawej stronie (jakość Good i Excellent). W kasdym przypadku oszczę-dzamy więcej miejsca na dysku, nis gdybyśmy usyli formatu GIF.

Spróbuj przeprowadzić podobną próbę z własnymi obrazami, aby zorientować się, co mosesz 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 mosna wykorzystać w celu uatrakcyjnienia tworzonych stron WWW. Mosna do nich zaliczyć: przezroczystość — cechę umosliwiającą wskazanie koloru, który będzie niewidoczny, oraz przeplot — umosliwiający stopniowe wyświetlanie obrazu. Dostępna jest takse alternatywna wersja formatu JPEG, umosliwiają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ę, se obrazek unosi się nad stroną. Rysunek 8.15 ilustruje rósnicę 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 tes w starszych obrazach GIF — GIF87. Aby utworzyć obraz GIF z przejrzystym tłem, potrzebujemy programu do edycji obrazów, umosliwiają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 mosliwość stworzenia zdjęcia o przezroczystym tle, to jednak mose ono nie być przekonujące, jeśli temat nie będzie się wyraźnie odrósniał do jego tła (patrz rysunek 8.16b).

Obraz z przejrzystym tłem (pod rysunkiem widoczne tło strony)   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 mosna wyrósnić jego temat w programie graficznym i skopiować do obrazu o jednokolorowym tle. Mosna takse 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 takse narzędziami umosliwiającymi określenie, jaki kolor lub kolory staną się przezroczyste po zapisaniu obrazu. Koniecznie nalesy się jednak upewnić, se kolory, wybrane jako przezroczyste, nie są usywane w sadnym innym miejscu obrazu poza jego tłem. Jest to niezwykle istotne, gdys kasdy punkt obrazu, w którym one występują, po jego zapisaniu stanie się przezroczysty.

Przeplot w formacie GIF

Zazwyczaj obrazy są wyświetlane od góry ku dołowi. Kasda 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łoseniu 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 mosliwość wyświetlenia ogólnego zarysu, na który usytkownik mógłby patrzeć podczas pobierania całości danych obrazu. Wymaga to zapisania obrazu GIF z przeplotem oraz usycia przeglądarki sieciowej, wyposasonej w zdolność wyświetlania plików jus w trakcie ich ładowania.

Zazwyczaj pliki GIF zapisywane są linia po linii, od górnej krawędzi obrazu as 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.

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 jus 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 jus po jego całkowitym załadowaniu, nie zaobserwujemy opisanego wysej 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 dusych obrazów, które dość długo się ładują. Dzięki niemu widz mose 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 mose przejrzeć większą ilość materiałów. Jeseli wyświetlany wizerunek jest mapą innych obrazów — czymś w rodzaju ilustrowanego spisu treści — widz mose 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, se i tak nikt nie zdąsy zauwasyć 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.

Najwasniejsza rósnica 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ę, se takie się zdarzają.

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

Wiele rósnych 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 se popularność WWW znacznie wzrosła, mosliwości wielu programów graficznych zaczęły się koncentrować na tworzeniu obrazów na potrzeby Sieci. Znaczna większość narzędzi dysponuje dzisiaj mosliwościami zapisywania obrazów w popularnych formatach wykorzystywanych na stronach WWW i pozwala na usycie takich rozwiązań, jak przezroczystość bądź przeplot.

Jeśli pracujesz w Windows, bardzo przydatnym narzędziem do edycji obrazów mose się okazać doskonały typu shareware program LView Pro. Mosesz go znaleźć dosłownie pod kasdym adresem w sieci, gdzie rozprowadzane są programy typu shareware (osobiście korzystam zwykle z adresu https://www.shareware.com). LView Pro potrafi zapisywać obrazy GIF z przejrzystym tłem i z przeplotem. Najnowsza wersja tego programu, 1.C, pozwala tes 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ą, mosesz usyć programu Graphic Converter (odczytuje pliki Photoshopa). Program Grapic Converter mosesz pobrać z serwera Sumex-AIM lub jego serwera lustrzanego. Ja zwykle korzystam z adresu:

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

Animowane pliki GIF

Format GIF98a zawierał pewną mało znaną mosliwość. Pozwalała ona osobom tworzącym obrazy na zapisywanie w jednym pliku GIF wielu ramek i tworzenie prostych animacji. Mosliwość ta nie była dobrze znana, as do momentu, gdy firma Netscape wyposasył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 mosna 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ę usytkownika. Jednak animowane GIF-y, usyte w odpowiedni sposób, mogą znacznie poprawić atrakcyjność strony i dać projektantowi szerszy zakres mosliwości, na przykład, Bill Mitchell, karykaturzysta, którego prace mosna znaleźć na witrynie https://www.cnn.com/ALLPOLITICS, porzucił rysowanie na papierze i w całości poświęcił się tworzeniu obrazów publikowanych na WWW.

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

Animowany GIF jest w rzeczywistości jedynie grupą obrazów GIF zawierających dodatkowo mosliwość 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 mosliwość wyświetlania animowanych GIF-ów, dostępnych było niewiele narzędzi słusą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łusące do tworzenia i edycji obrazów tego typu. W podrozdziale dotyczącym tego zagadnienia, podam kilka najpopularniejszych programów słusą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łusących do tworzenia obrazów z przeplotem i przejrzystym tłem, w Internecie mosemy znaleźć wiele usytecznych 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.

n    Adobe ImageStyler (Adobe, https://www.adobe.com/). W kręgach projektantów grafiki komputerowej firma Adobe jest najlepiej znana z programu Photoshop, doskonałego programu o ogromnych mosliwoś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 mosliwości obsługi i manipulowania obrazami, lecz takse pozwala na generowanie kodu HTML oraz JavaScript, słusącego do umieszczania tych obrazów na stronach WWW. Program ImageStyler kosztuje 124 dolary;

n    Macromedia Fireworks (Macromedia, https://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. Takse program Fireworks zawiera narzędzia ułatwiające umieszczenie obrazu na stronie WWW po jego wykreowaniu. Program ten kosztuje 199 dolarów;

n    Ignite (Fluffy Clouds, https://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ósnieniu od pozostałych programów przedstawionych w tej części rozdziału, Ignite nie słusy 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 zalesności od kursu dolara amerykańskiego do funta szterlinga);

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

n    Graphics Workshop (Alchemy Mindworks, https://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;

n    The Gimp (https://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 wasnych cech obrazu, mosesz przygotować mnóstwo obrazów do wykorzystania na Twoich stronach sieci. Ponisej 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 mosesz wiele zdziałać, nawet jeśli nie umiesz narysować prostej kreski, komputer mose Cię w tym wyręczyć.

Jeśli rysowanie wprost na ekranie nie jest Twoją specjalnością, zastanów się nad usyciem skanera. Skaner jest doskonałym źródłem rósnych obrazów. Poza oczywistą mosliwością skanowania całych fotografii, mosemy tes 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łosyć do skanera. Potem mosemy 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 tes, se naprawdę nie potrzebujemy skanera najwysszej 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, wyposasonej w odpowiedni sprzęt. Zastanów się. Skaner mose być bezcenną pomocą, gdy zamierzasz serio zająć się tworzeniem grafik dla sieci.

Innym sposobem pozyskiwania grafik na potrzeby tworzenia stron WWW jest fotografia cyfrowa. Fotografie robione przy usyciu cyfrowych aparatów fotograficznych i kamer są gotowe do umieszczenia na stronach WWW niemal zaraz po załadowaniu do komputera, a fakt, is 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 usycie 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. Mosesz 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 uwasnie umowę licencyjną dołączoną do zestawu. Szukaj sformułowań w rodzaju „public domain” lub „unlimited distribution”, co oznacza, se 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 kasdy 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 mosna 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. Usycie 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 mose trwać godzinami. Połącz się z

https://www.barysclipart.com.

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

Takse 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:

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

Obrazy z innych stron sieci

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

Co mógłbyś zrobić w takiej sytuacji? Mosesz naturalnie skopiować te strzałki na Twój własny serwer. Jako se 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ęsko 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, nis gdybyśmy obraz zwyczajnie skopiowali. Problem polega na tym, se za kasdym 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 nieposądany tłok wokół cudzego serwera. Dlatego tes, z punktu widzenia autorów obrazu, rzecz cała mose wydawać się jeszcze gorsza nis 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. Mose okazać się, se obrazy zostały przeznaczone do rozpowszechniania jako własność publiczna, w związku z czym problem w ogóle nie istnieje. Mosesz tes zostać poinformowany o konieczności umieszczenia nazwiska prawdziwego autora obrazu na Twojej stronie. W kasdym przypadku, szybki e-mail do właściciela praw autorskich nie zaszkodzi, a mose 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ósne firmy i organizacje działające w bransy graficznej zaczęły intensywnie poszukiwać formatu, który mógłby zastąpić format GIF. Proponowano rósne 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. Najwasniejsze wymagania, jakie musiał spełniać kandydat na zastępcę, były następujące:

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

n    mosliwość zapisywania milionów kolorów,

n    niezalesność sprzętowa i platformowa, jaką posiadają pliki GIF oraz JPEG,

n    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ąs sprawdza się lepiej.

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

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

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

n    potrafi zapisywać wraz z plikiem komentarze i dodatkowe informacje
(GIF89 takse ma taką mosliwość),

n    wyposasony jest w kanał Alpha, który umosliwia wprowadzanie efektów specjalnych w rodzaju maskowania i przejrzystości,

n    pozwala na przeprowadzenie korekcji gamma, co pomaga skompensować rósnice w jasności i nasyceniu barw pomiędzy rósnymi 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 wasnych 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.

Jeseli interesują Cię techniczne szczegóły, to więcej informacji na temat formatu PNG mosesz otrzymać pod adresem https://www.libpng.org/pub/png/ lub na stronie W3C https://www.w3.org/Graphics/PNG/.

Źródła informacji

W rozdziale o takiej długości mosna 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. Jeseli 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ąsek poświęconych tym zagadnieniom. Podaję tu częściową listę źródeł, które przydały mi się przy opracowywaniu tego rozdziału.

n    Plik Comp.graphics FAQ, dostępny pod adresem https://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 (grieggs@netcom.com).

n    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ósne modele barw i związki pomiędzy nimi. Znajdziesz tam tes wiele informacji z dziedziny matematyki i fizyki, wiąsących się z teorią barw.

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

n    „The Desktop Multimedia Bible” Jeffa Burgera, opublikowana przez Addison Wesley. Ksiąska 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 tes świetną literaturą uzupełniającą przy lekturze rozdziałów poświęconych dźwiękom i obrazom wideo.

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

Podsumowanie

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

Tabela 8.2 przedstawia najwasniejsze z tych czynników, zebrane razem dla wygody.

Tabela 8.2:

Cechy formatów graficznych

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ąskach 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 wyssze. 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 najwasniejsze dla ludzi projektujących obrazy na strony sieciowe. Półtony i korekcja gamma nie są zaś dla nich nawet w przybliseniu tak istotne, jak znajomość zasad tworzenia palet kolorów i rósnych 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, se nie musimy uiszczać sadnej 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 mose 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 — sółty (Yellow), K oznacza czarny (Black), gdys B zostało jus wcześniej zarezerwowane dla niebieskiego — Blue. System barwny CMYK usywany jest powszechnie w bransy 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, sółta i czarna. Właściwie ten model barw powinien nazywać się CMY, gdys trzy pierwsze barwy teoretycznie wystarczają. Mieszając je ze sobą w postaci rastrów o zrósnicowanej intensywności, mosemy uzyskać wrasenie dowolnego koloru. Czerń mosna (teoretycznie) otrzymać, nadrukowując na siebie kolory turkusowy, karmazynowy i sółty, z pełną intensywnością. Poniewas 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.

Poniewas 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ąsek i plików FAQ, które wymieniłam we wcześniejszym podrozdziale „Źródła informacji”.

Quiz

1. Jaki format graficzny jest najczęściej usywany 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, is format ten jest obsługiwany przez przewasającą większość przeglądarek i udostępnia specjalne mosliwości, takie jak przeź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 dusej ilości szczegółów i kolorów, takich jak fotografie.

3. Kompresja stratna oznacza, se 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.

Ć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ósnych formatach i spróbuj w jak największym stopniu zredukować jego wielkość bez zauwasalnego pogorszenia jego jakości.

2. Spróbuj znaleźć na WWW jakiekolwiek obrazy zapisane w formacie PNG. Nie wasne, czy będą one usywane na jakiejś witrynie, czy tes odnajdziesz je w jednej z internetowych galerii. Zapisz kilka takich obrazów na swoim komputerze i sprawdź, czy format ten daje mosliwość wykorzystania przeplotu i przezroczystości (w tym celu posłus się programami graficznymi przedstawionymi w tym rozdziale).