Grafika na strony WWW

Grafika komputerowa stanowi integralną część stron WWW, uzupełniając i eksponując ważne informacje tekstowe. Decyduje również o atrakcyjności przeglądanych stron. Grafika internetowa podlega jednak kilku ograniczeniom nie spotykanym w innych zastosowaniach. Wykonanie rysunków czy ilustracji na potrzeby własnych stron WWW nie wymaga posiadania głębokiej wiedzy z zakresu grafiki komputerowej ani tworzenia dokumentów HTML. Warto jednak poznać kilka podstawowych terminów oraz elementy, które wpływają na jakość prezentowanej grafiki oraz szybkość, z jaką jest ona wczytywana przez przeglądarkę internetowa.

Raster, czy wektor?

Grafika komputerowa wykonywana jest w dwóch zasadniczych technikach: rastrowej i wektorowej. Ilustracje rastrowe składają się z szeregu punktów, zwanych pikselami. Zwiększenie wymiarów obrazka rastrowego i jego rozdzielczości powoduje znaczny wzrost rozmiaru pliku. Do tego typu formatów, powszechnie stosowanych na stronach WWW i poprawnie interpretowanych przez przeglądarki internetowe, bez konieczności instalowania dodatkowego oprogramowania należą: GIF, JPEG oraz stosunkowo nowy format PNG. Natomiast obrazy wektorowe powstają na podstawie matematycznego opisu rysunku. Dzięki temu są niezależne od rozdzielczości. Wynika z tego dodatkowa zaleta tego formatu - obrazy mogą być skalowane w dowolny sposób. Ponieważ zbudowane są z szeregu instrukcji matematycznych, a nie z pikseli, rozmiary ich są znacznie mniejsze niż plików grafiki rastrowej. Jedną z najbardziej reprezentatywnych aplikacji, umożliwiających tworzenie w tej technice interakcyjnych animacji (pliki *.fla), jest udostępniany przez firmę Macromedia shareware'owy program Flash.

Pewną niedogodnością dla internautów chcących korzystać z tak przygotowanych stron WWW jest konieczność zainstalowania darmowego plug-inu (wtyczki) Shockwave Flash do przeglądarki. Choć rysunki wektorowe zaczynają odgrywać coraz większą rolę w Internecie, zajmiemy się głównie najbardziej powszechnymi formatami grafiki rastrowej.

Narzędzia

Rozpoczynając tworzenie grafiki webowej, należy zaopatrzyć się w odpowiednie oprogramowanie. Wśród software'u komercyjnego królują dwa produkty: Corel Photo Paint, będący składnikiem pakietu Corel-DRAW, oraz Adobe Photoshop z zestawem filtrów dających olbrzymie możliwości manipulowania obrazami. Niestety, programy te są dosyć drogie. Można jednak skorzystać z kilku innych programów, równie przydatnych dla webmasterów.

Między innymi doskonały shareware'owy program PaintShop Pro posiadający szereg

rozbudowanych funkcji przeznaczonych do tworzenia grafiki statycznej i animacji na strony

WWW.

Tabl. Wybrane programy do tworzenia grafiki na strony WWW

Producent

Program

Zastosowanie do WWW

Adobe Photoshop

Adobe Systems (www.adobe.com')

Zapisywanie obrazów w formacie JPG i GIF z

uwzględnieniem atrybutu przezroczystości. Dołączona

aplikacja Adobe ImageReady umożliwia tworzenie animacji, optymalizację obrazów dla Webu i łączenie obrazu z adresem URL.

Corel Photo-Paint

Painter

Picture Publisher

Windows Draw

Corel (www.corel.com)

MetaCreations (www.metacreations.co

Micrografx (www.microqrafx.com)

Micrografx (www.micrografx.com)

Duża liczba narzędzi wspomagających tworzenie grafiki dla Webu. Przyporządko­wanie adresu URL do obrazu, moduł konwersji grafiki na tryb 8-bitowy z dużą liczbą opcji.____________________________________________

Dzięki dołączonemu do programu modułowi plug-in łatwo tworzy estetyczne przyciski nawigacyjne i tła. Posiada zaawansowane narzędzia do animacji.____________

Zastosowania dla Webu są jego bardzo silną stroną. Posiada kreator zawierający szablony stron WWW. Jedyną jego wadą jest brak możliwości sterowania przezroczystością tworzonego GIF-a.______________

Za niewielką cenę oferuje całe spektrum webmasterskich narzędzi. Łączy niektóre elementy programów Photoshop oraz CorelDRAW.

Prawdopodobnie najlepszy obecnie
shareware'owy program do przetwarzania
grafiki, mający wiele zalet profesjonalnych
programów graficznych.____________

Paint Shop Pro

Jasc Software (www.jasc.com)

Głębia koloru

Kolory cyfrowych rysunków i fotografii zapisywane są w postaci zer i jedynek. Bit, czyli najmniejsza jednostka informacji, opisywany jest przez dwa stany O lub 1. Obraz 1-bitowy może mieć tylko dwie barwy, czarną lub białą. W tym trybie nie można uzyskać odcieni szarości ani żadnych kolorów. W celu otrzymania wrażenia płynnego przejścia od barwy białej do czarnej, poprzez kolejne odcienie szarości obraz musi zawierać 256 poziomów szarości. Uzyskuje się to przez zwiększenie informacji opisującej każdy piksel, tzn. konieczne jest już 8 bitów opisujących każdy piksel.

Liczba bitów przypadających na każdy piksel określa głębokość bitową lub inaczej głębię koloru. Głębia koloru może być również definiowana liczbą wyświetlanych kolorów, np. 256 kolorów lub 16,7 miliona kolorów. Na potrzeby Internetu tworzona jest głównie grafika kolorowa. Najczęściej obrazy są 16-, 256-kolorowe lub w trybie True Color o głębi 24-bitowej (16,7 milionów kolorów).

Informacje o barwie jednego piksela zajmują w tym ostatnim przypadku trzy bajty. Każdy z trzech podstawowych kolorów: czerwony, zielony i niebieski (RGB) przybierają 256 różnych wartości. Oznacza to możliwość korzystania z palety 256x256x256 = 16,7 min kolorów. W grafice przeznaczonej na strony WWW standard RGB (red, green, blue) używany jest do zapisywania fotografii cyfrowej. Jest to domyślna liczba kolorów dla formatu JPEG. Z powodu dużego rozmiaru tego rodzaju plików przed jego umieszczeniem na stronach WWW stosuje się techniki kompresji.

Model i paleta kolorów

Model Indexed Color (kolor indeksowany), będący podzbiorem modelu RGB, wykorzystuje 256 kolorów z aktualnej palety. Natomiast, żeby uzyskać zmniejszenie gamy barw, w programie należy z menu „Colory" wybrać polecenie „Zmiana głębi kolorów" (Decrease Color Depth), a następnie 256 colorów (8-bitowy). Dołączane do plików graficznych standardowe palety kolorów, zawierają 256 spośród 16,7 milionów kolorów. Jeżeli w tabeli nie występuje któryś z kolorów oryginalnego obrazka, program dopasowuje barwę do najbliższego koloru z tabeli kolorów lub symuluje (tzw. dithering) go za pomocą dostępnych aktualnie barw.

Przy redukcji z modelu RGB do modelu 256 kolorów wybiera się potrzebny zestaw barw, czyli stowarzyszoną z ilustracją paletę kolorów, zwaną także tablicą przypisań, która jest zapisywana jako część pliku. Kolory są w niej umieszczane w sposób indywidualny (tzw. paleta optymalizowana) lub stosuje się ustawienia standardowe (paleta systemowa dla Windows), obejmujące 256 kolorów równomiernie rozmieszczonych w gamie trzybajtowej wraz z szesnastoma standardowymi kolorami Windows. Paleta optymalizowana pozwala wybrać barwy dokładniej oddające kolorystykę obrazu wyjściowego.

Dla ilustracji na strony WWW poleca się stosowanie ustawień standardowych, ponieważ dzięki temu uniknie się przypadkowej zmiany barw przez różne, wyświetlane jednocześnie pliki graficzne, które będą korzystać z tej samej gamy kolorów. Palety kolorów mają największe znaczenie przy pracy z obrazami w formacie GIF. Istnieją metody pozwalające, nawet przy zastosowaniu ograniczonej ilości barw, na uzyskanie dobrych jakościowo obrazków na strony WWW. Są to dithering i antialiasing.

Dithering i mieszanie kolorów

Dithering, czyli symulacja kolorów to łączenie barw dostępnych w danej palecie. Jeżeli paleta

kolorów nie zawiera wszystkich barw używanych w obrazku i nie oddaje w pełni oryginału,

aby je zasymulować można posłużyć się procesem ditheringu. Funkcja ta dostępna jest

w niemal wszystkich programach do obróbki rastrowej i występuje najczęściej pod nazwą

„Dithering", „Error diffusion" lub „Dither Option". Podczas tego procesu piksele w kolorach

wchodzących w skład palety ulegają wymieszaniu w taki sposób, by zasymulować brakujący

kolor.

Wyróżniamy trzy opcje ditheringu:

- można zamiast danego koloru używać najbardziej zbliżonego do brakującego (obrazki

wyświetlone w ten sposób mają jednak tendencję do ostrych przejść między

poszczególnymi odcieniami koloru),

- nieuporządkowane rozpryskiwanie w odpowiednich proporcjach dostępnych w palecie

kolorów,

- stosowanie wybranych losowo pikseli ułożonych we wzorek w celu symulacji brakujących

kolorów (niestety ta opcja dotyczy wyłącznie palety systemowej Macintosha).

Roztrząsanie nie jest procesem korzystnym dla grafiki internetowej, gdyż powoduje, że pliki graficzne nie mogą być wydajnie skompresowane. W przypadku, jeśli system komputerowy wyświetla tylko 256 kolorów, a w grafice wystąpią barwy spoza palety kolorów, przeglądarka użytkownika sama wykonuje dithering. Zazwyczaj dobry efekt roztrząsania występuje w przypadku fotografii, a słabo wypada w rysunkach, gdyż powstają na nich nierównomiernie rozłożone plamki.

Antialiasing

Antialiasing stanowi proces uzupełniania tworzonego obrazu kolorami pośrednimi w celu wygładzenia brzegów rysunków. Niektóre programy, np. Adobe Photoshop lub Paint Shop Pro, dodają do krawędzi rysunku kolory pośrednie między barwą obrazka a tłem. Dzięki temu zapobiega się powstawaniu ząbkowanych krawędzi. Niestety wprowadzenie dodatkowych barw również zmniejsza stopień maksymalnej kompresji tworzonych plików graficznych. Jeżeli rysunki składają się z linii pionowych i poziomych, nie wymagają one wygładzenia. Również niektóre linie nachylone pod kątem 45 stopni nie wymagają antialiasingu. Użycie skomplikowanego, wzorzystego tła zmusza do zastosowania tego procesu, gdyż inaczej grafika staje się nieestetyczna, dając efekt nierównej obwódki wokół rysunku.

Odpowiedni format dla WWW

Trzeba pamiętać, że przeglądarki internetowe wyświetlają tylko niektóre formaty graficzne i chociaż ich liczba uległa znacznemu rozszerzeniu, wciąż oferta jest zbyt skromna, szczególnie dla grafików pragnących stosować różne środki wyrazu. Pomimo trwających sporów o licencje, najbardziej rozpowszechnionymi w sieci formatami są pliki tworzone w formacie GIF (Graphics Interchange Format). Obejmują one blisko 80% grafiki internetowej. Format ten dysponuje najlepszym z dotychczasowych algorytmem kompresji bezstratnej LZW. Istotą tej metody jest doskonała kompresja bloków pikseli tego samego koloru rozciągających się w poziomie. Dzięki temu można średnio czterokrotnie zmniejszyć wielkość pliku graficznego, zachowując przy tym jego pierwotną jakość. Tworząc grafikę na potrzeby Internetu w formacie GIF, powinniśmy pamiętać, że ponieważ w tym przypadku rysunek zapisywany jest w sposób „poprzeczny" (linijka po linijce), to niski i szeroki GIF będzie o wiele mniejszy niż taki sam rysunek umieszczony w pionie (tj. obrócony o 90 stopni). Format ten jest stosowany do wyświetlania grafik w 256 kolorach, tzw. model Indexed Color. Z tego powodu nie nadaje się do obróbki fotografii, natomiast jest doskonały do tworzenia napisów, przycisków nawigacyjnych, znaków graficznych, logo i rysunków ubogich w odcienie. Format Gif89a umożliwia wykonanie obrazka z przezroczystym tłem.

Format JPEG (Joint Photographic Expert Group) realizuje typ kompresji stratnej. Przeznaczony jest do prezentacji w Sieci zdjęć oraz obrazków z łagodnymi przejściami tonalnymi, ponieważ umożliwia odfiltrowanie wielu informacji, nie rejestrowanych przez ludzkie oko. Uzyskany plik będzie o wiele mniejszy od wyjściowego. Kompresja mieści się zazwyczaj w zakresie od 10:1 do 100:1. Skompresowane obrazki JPEG mogą mieć miliony kolorów, przy czym wielkość pliku zależy przede wszystkim od rozmiarów ilustracji, nie zaś od liczby barw. Ten sposób kompresji nie nadaje się do obrazków o małej liczbie kolorów, gdyż powoduje ich zniekształcenia. Prezentuje się to gorzej niż zmniejszenie liczby barw przy kompresji GIF. JPEG nie umożliwia tworzenia przezroczystości.

Format PNG wprowadzony jako alternatywa dla GIF'a występuje jako PNG-8 (odpowiada formatowi GIF) i PNG-24 (odpowiada formatowi JPEG). W zasadzie wszystkie nowsze programy graficzne potrafią generować PNG. Twórcy grafiki internetowej mogą obecnie zamiast GIF-ów umieszczać obrazki lub napisy wykonane w PNG-8. Wielkość ich jest porównywalna do takich samych obrazków GIF. Natomiast PNG-24 może służyć do obróbki fotografii, lecz jego wielkość jest większa niż zdjęć wykonywanych w formacie JPEG. Standard ten jest nadal ulepszany, a możliwość jego poprawnej interpretacji przez najnowsze przeglądarki, daje kreatorom stron WWW nowe, cenne medium graficzne.

Wskazówki

Znamienne są słowa Davida Siegela, autora światowego bestselleru „Creating Killer Web Sites": „dobra grafika przychodzi w małym pakunku". Atrakcyjność stron internetowych zależy od jakości i liczby obrazków. Grafikę na strony WWW wykonuje się w rozdzielczości 72—120 punktów na cal, co w zupełności wystarcza do dobrego wyświetlenia ich na monitorze. Obrazki powinny być czytelne, o objętości jednak nie większej niż 30—35 kB. Polecane jest umieszczanie do czterech na stronie, ale wtedy muszą mieć odpowiednio mniejsze rozmiary, średnio ok. 10—15 kB każdy. Czas oczekiwania na wyświetlenie strony nie powinien być dłuższy niż 60 sekund.

W przeciwnym przypadku potencjalni „surferzy" mogą zrezygnować z jej oglądania. Wielkość strony WWW, łącznie z grafiką nie powinna przekraczać 70—80 kB. W celu dalszego odchudzenia plików można zredukować liczbę barw do najważniejszych w wybranej palecie kolorów, starając się nie utracić dobrej jakości obrazka. Takie postępowanie zwiększy kompresowalność pliku zapisywanego w formacie GIF. Można też przeskalować obrazek, czyli zmniejszyć jego rozmiary. Pamiętać trzeba, że pierwotne dane są nieodwracalnie tracone. W formacie JPEG redukuje się wielkość pliku, a nie liczbę kolorów. Dlatego bardzo wygodne są coraz bardziej powszechne narzędzia, udostępniane przez wiele programów, umożliwiające rzeczywistą wzrokową ocenę efektu kompresji.

Poświęcenie odpowiedniej ilości czasu i włożenie pewnego wysiłku w stworzenie małych, lecz dobrej jakości ilustracji, powinno zaowocować powstaniem ciekawej, szybko wczytującej się i często odwiedzanej internetowej strony.