IV. Grafika w internecie

Język HTML i protokół WWW przyczyniły się niewątpliwie do dużego rozwoju grafiki w Internecie. Strony internetowe są głównym miejscem, w którym pojawiają się zdjęcia, rysunki itp. Jednak czas transferu strony z serwera wydłuża się wraz ze wzrostem ilości takich atrakcji, szczególnie przy słabych łączach, którymi
dysponujemy w Polsce. Nierzadko zdarza się, ze na uzyskanie potrzebnej informacji trzeba czekać kilka minut, gdyż ktoś umieścił 120 kB plik graficzny.
Język HTML daje możliwości i narzędzia rozwiązujące ten problem.

1) Objętość
Główny problem, jaki wiąże się z grafika internetową to jej objętość.
Klasyczne zdjęcie formatu 600x800 w 16 mln kolorów zajmuje 1 440 kB.
Wiedząc, ze w Polsce w Internecie 10k B potrafi być transferowane przez ponad 2 s, łatwo można policzyć, iż aby zobaczyć taki obrazek na ekranie swojego komputera należałoby czekać przez 288s, co daje ponad 3,5 minuty.
Aby skrócić tak długi czas oczekiwania należy zmniejszyć wielkość pliku.
Jak się jednak okazuje aby tego dokonać nie trzeba pomniejszać rozmiaru zdjęcia.
Specjalne formaty graficzne zapewniają nam rozmaite metody kompresji (ściskania informacji w mniejsze paczki) skutecznie redukując gigantyczne pliki nawet o 95% ich wielkości.
Np. w naszym przypadku skompresowane zdjęcie mogłoby zajmować 72 kB,
czyli ok. 14 s oczekiwania, a efekt na ekranie taki sam.
Druga sprawa dość istotna dla grafiki internetowej jest to, iz język HTML
pozwala na „dość swobodne” układanie rozmaitych rysunków na stronie internetowej,
dzięki czemu nie musimy tworzyć jednego dużego pliku zawierającego
wszystkie elementy graficzne, wystarczy, ze rozmieścimy poszczególne części jako
oddzielne obrazki na tzw. backgroundzie, czyli tle.
Oczywiście tło stron internetowych to również plik graficzny, zawierający pojedynczy motyw, który jest wyświetlany na ekranie jak mozaika.
Dobierając odpowiednio pliki graficzne na tło, można uzyskać wrażenie jednolitego obrazka (np. nieba). Dodatkowym „bajerem” jest to, ze niektóre formaty pozwalają na oznaczenie przestrzeni „przezroczystej”, tzn. ze tło może „prześwitywać” przez środek obrazka.



2) Paleta kolorów — co to znaczy?
Jak wcześniej wspominałem zdjęcie 800x600 pikseli w 16 mln kolorów (24 bity na kolor), zajmuje 1440 kB, to samo zdjęcie w 64tys. kolorów (16 bitów na kolor) zajmuje już tylko 960 kB, w 256 kolorach (8 bitów na kolor) zajmuje tylko 480 kB, natomiast zapisane jako mapa bitowa (czarno-białe, monochromatyczne
— 1 bit na kolor) zajmowałoby 60 kB (wszystkie te wielkości podawane są przy założeniu, ze nie stosujemy kompresji). Powstaje wiec pytanie, ilu kolorów potrzebujemy do zapisania naszego zdjęcia, tak aby nie utracić jakości.
Jeżeli nasz obrazek jest typowa grafika, składającą się z dużych elementów pokrytych jednakowym kolorem (kółka, prostokąty, krzywe) i nie zawiera tzw. przejść tonalnych (płynnych przejść z jednego koloru w kolor) i kolory sąsiadujące wyraźnie odcinają się od siebie jest to znak, iż można zastosować paletę, zawierającą
np. 256 kolorów (lub mniej).
Owa paleta kolorów jest to zestaw wybranych kolorów, za pomocą którego staramy się przedstawić naszą grafikę, z reguły proces ten jest wykonywany automatycznie przez komputer.
Dobry sprzęt komputerowy pozwala na wyświetlenie 16mln kolorów na ekranie (jest to liczba wyznaczona empirycznie przez zespoły badawcze, przy której przeciętny człowiek nie odróżnia dwóch „sąsiadujących” kolorów, co pozwala na stworzenie wrażenia płynności przechodzenia kolorów). Jednak w rzeczywistości
przeciętnemu użytkownikowi wystarcza 64 tys. kolorów.
W przypadku grafiki komputerowej okazuje się ze wiele prac nie zawiera, aż tylu kolorów (np. zdjęcie nieba zawiera odcienie niebieskiego i biel, nie zawiera koloru czerwonego, żółtego, zielonego), dzięki czemu możemy wybrać pewien zestaw, który umożliwi bardzo wierne odtworzenie tego samego obrazu, przy jednoczesnym zmniejszeniu jego wielkości w pamięci komputera. W praktyce spotyka się prace, które można przedstawić za pomocą np. czterech kolorów (2 bity na kolor). Zmniejszanie palety kolorów jest bardzo dobrym sposobem na redukowanie wielkości plików z grafiką, a jednocześnie umożliwia lepsza kompresje.
Warto zwrócić uwagę na fakt ,iż zdjęcia czarno-białe (grayscale) można przedstawić za pomocą palety 256 odcieni, bez jakichkolwiek strat jakości (przeciętny człowiek nie odróżnia więcej niż 128 odcieni szarości, a monitor jest w stanie przedstawić 256), dlatego też zapisywanie zdjęć czarno-białych za pomocą 16 mln kolorów jest pozbawione sensu!
W przypadku przedstawiania obrazków za pomocą ograniczonej liczby kolorów w palecie (w stosunku do liczby kolorów w oryginalnej pracy) bardzo przydatna jest opcja tzw. „dither”, która umożliwia symulowanie jednego koloru za pomocą dwóch innych (np. za pomocą szachownicy biało-czerwonej stworzonej
z pikseli ekranu, można zasymulować kolor jasnoczerwony), pozwala to na wierniejsze oddanie oryginału.
Obrazy graficzne są reprezentowane w komputerze za pomocą tzw. modeli barw, z którymi możemy się spotkać w programach graficznych.

W przypadku prac internetowych spotykamy cztery podstawowe: 

- RGB — 16 mln kolorów, pozwala na wierne przedstawienie obrazu.

- GrayScale — 256 odcieni szarości, pozwala na wierne przedstawienie czarno - białego obrazu.

- Bitmap — czerń + biel, nie zawiera odcieni szarości, dość rzadko używany, tylko obrazy czarno-białe monochromatyczne.

- IndexedColor — pozwala na stworzenie własnej palety barw od 8 do 256 odcieni.

Większość aplikacji graficznych obsługuje te modele (inne spotykane modele nie maja szczególnego zastosowania w Internecie, poza tym, ze format graficzny JPEG, konwertuje obrazy RGB na inny model, który umożliwia zastosowanie kompresji tzw. stratnej, bez znacznego pogarszania wyglądu obrazu).
Jak widać istnieje wiele metod na zmniejszenie rozmiaru plików graficznych dostosowując ich modele barw do naszych potrzeb.
Znając te sposoby, warto wziąć je pod uwagę przy projektowaniu obrazów na strony internetowe.


3) Formaty graficzne stosowane w WWW
W przypadku grafiki internetowej istnieją dwa podstawowe formaty graficzne: GIF oraz JPEG.
Obydwa formaty stosują odmienne metody kompresji i maja zastosowanie do innych modeli kolorów.
Format GIF został stworzony przez firmę Compuserve z myślą o przekazywaniu grafiki pomiędzy różnorodnymi platformami komputerowymi i w bardzo krótkim czasie stał się standardem do wymiany grafiki w Internecie (tu właśnie występuje problem różnorodnych niekompatybilnych systemów komputerowych).
Dodatkowo format ten pozwala na wyświetlanie ciągu kolejnych bitmap (znajdujących się we wspólnym pliku), które w ten sposób tworzą animowana sekwencje, jednocześnie umożliwia określenie jak długo dana klatka ma być widoczna oraz w jaki sposób powinna pojawić się na ekranie (dostępne są dwa tryby: z przeplotem i zwykły).
Kolejna ciekawa cecha tego formatu jest możliwość zdefiniowania kolorów „przezroczystych”, to znaczy takich które nie będą wyświetlane (w efekcie na stronie internetowej w miejscu koloru „przezroczystego” widoczne jest tło).
Pozwala to na osiągnięcie różnych ciekawych efektów.
W celu zmniejszenia objętości plików GIF zastosowano model IndexedColor, oraz kompresje LZW, która dodatkowo zmniejsza rozmiar zbioru.
Pogotowie komputerowe wrocław
Użycie trybu wyświetlania z przeplotem pozwala na szybsze pokazanie zarysu grafiki na ekranie użytkownika.
Wyświetlanie to polega na pokazaniu wpierw co 8 linii, potem co 4, co 2, a na końcu linii nieparzystych.
Przy stosowaniu GIF’a należy pamiętać, ze nie potrafi on zapisywać obrazów w modelu RGB, dlatego przed zachowaniem zbioru w tym formacie, należy dokonać „świadomej” transformacji na tryb IndexedColor. Celowo podkreślam słowo świadomej, gdyż często zdarza się iż przy zapisywaniu w formacie GIF programy
dokonują automatycznej konwersji, która nie zawsze daje najkorzystniejsze efekty.
Wiekszosc programów pozwala na określenie trybu wyświetlania obrazu na ekranie (z przeplotem lub bez), oraz na zdefiniowanie kolorów „przezroczystych”.
Aby wykorzystać możliwości cyklicznego wyświetlania różnych obrazków, czyli animacji, z reguły należy użyć dodatkowego programu, który pozwala na „wciągnięcie” wcześniej przygotowanych plików GIF z pojedynczymi obrazkami i zmontowanie ich w spójna całość. Jednym z takich programów jest GIF Construction Set, sharewarowy program, który ma bardzo duże możliwości.
Na koniec można dodać, ze GIF jest formatem nie stratnym (dla modelu IndexedColor), to znaczy iż praca zachowana jako GIF, po otworzeniu, będzie wyglądała tak samo jak przed zachowaniem.

Drugim równie często używanym formatem jest JPEG. Format ten został stworzony przez Join Photographic Experts Group (w wolnym tłumaczeniu „Wspólna Grupa Rzeczoznawców Fotografii”), a jego głównym astosowaniem jest archiwizacja zdigitalizowanych zdjęć.
Jego podstawowa zaleta jest duży stopień kompresji (nawet 1:50 i więcej).
Jednak trzeba podkreślić, iż kompresja ta jest stratna, oznacza to, ze po otworzeniu pliku JPEG otrzymamy obraz o jakości gorszej od oryginału (czyli obrazka zapisanego wcześniej). Pogorszenie jakości jest wprost proporcjonalne do stopnia kompresji, czym bardziej skompresujemy grafikę, tym większe będzie pogorszenie jej jakości. Jednak w przeciwieństwie do formatu GIF, JPEG pozwala na zapisanie
Serwis komputerowy wrocław
pełnej gamy kolorów RGB (w rzeczywistości gama ta jest nieco zubożana, jednak dla zwykłego użytkownika efekt ten jest niezauważalny), co jest bardzo przydatne przy prezentowaniu zdjęć na stronach internetowych (często zdjęcia zapisane w trybie IndexedColor traca cały urok, natomiast zapisane w JPEG wyglądają tak jak należy). Wada tego formatu jest to, ze nie można w nim zachować animacji,
ani tez zdefiniować kolorów „przezroczystych”.
Warto tutaj dodać, iż zapisywanie obrazów IndexedColor w formacie JPEG nie ma większego sensu, gdyż i tak są konwertowane do innego modelu, który zawiera wiele barw. Należy wiec przyjąć iż w formacie JPEG zachowujemy obrazy RGB i Grayscale.

Na stronach WWW można również stosować inne formaty graficzne, chociażby pliki AVI i MPEG zawierające sekwencje filmu i dźwięku. Zamiast JPEG można użyć kompresji fraktalnej. Ostatnio powstał format PNG, który umożliwia zdefiniowanie stopnia przeźroczystości poszczególnych fragmentów grafiki, co daje
efekty znacznie ciekawsze niż przezroczyste kolory w GIFie. Jednak wiele przeglądarek
nie obsługuje standardowo niektórych z tych formatów, co sprawia, ze nie możemy mieć pewności iż oglądający stronę widzi te elementy.


4)  Małe jest piękne
Tak jak wspominałem na samym początku, grafika internetowa powinna zajmować mało miejsca na dysku. Nie oznacza to jednak, że musi być ona uboga i nieciekawa. Dobra znajomość właściwości poszczególnych formatów graficznych pozwoli nam na bardzo swobodne planowanie grafiki, przy jednoczesnym minimalizowaniu rozmiarów plików.
Głównym elementem graficznym strony internetowej z reguły bywa tło (tzw. background). Istnieje wiele źródeł, które dostarczają najrozmaitsze rodzaje backgroundu, dzięki czemu nie musimy ślęczeć całymi godzinami nad wymyślaniem czegoś oryginalnego. Warto pamiętać, iż użycie tego samego elementu tła na kolejnych stronach skraca czas oczekiwania na załadowanie tych stron (odwołanie do tego samego miejsca w sieci powoduje skorzystanie z bufora (ang. cashe), znajdującego się na lokalnym dysku użytkownika, w którym gromadzone są odczytane wcześniej informacje). Jednak ciekawie zaprojektowane tło może zapewnić elegancki wygląd strony, dlatego tez czasami warto pomyśleć. Nie można przy tym zapomnieć, że tło jest elementem powtarzanym jak mozaika, dlatego prawy brzeg powinien dobrze być dopasowany do lewego, tak aby powstawał efekt zlewania — płynnego przejścia. Bezcelowe jest tworzenie elementu tła tak dużego, by wypełniał całą stronę bez powtarzania się, jednak niektórzy uzyskują ciekawe efekty
tworząc elementy bardzo szerokie, ale krótkie (np. 600x2 piksele), otrzymując przykładowo stylowy lewy margines strony.


5) Praktyczne podsumowanie
Przy tworzeniu grafiki do strony WWW warto kierować się następującymi
Wskazówkami:

- ikony, bardzo małe obrazki, wskaźniki, graficzne odnośniki należy zachowywać w formacie GIF (nie powoduje on „rozmywania krawędzi”, jakie następuje w przypadku formatu JPEG), warto jest również ograniczyć ilość występujących tu kolorów (gwarantuje to lepsza kompresje i zmniejszenie rozmiaru
pliku), dodatkowo format GIF umozliwia stosowanie grafik o ciekawych kształtach (nie tylko prostokątnych) dzięki zdefiniowaniu „przezroczystych” kolorów, jak również tworzenie małych animowanych elementów.

- kolorowe i czarno-białe zdjęcia należy zachowywać jako JPEG, daje to bardzo dobre możliwości kompresji przy jednoczesnym zachowaniu walorów estetycznych (stopień kompresji trzeba wyznaczać empirycznie dla poszczególnych obrazków, poprzez stopniowe zwiększanie, aż do momentu gdy pogorszenie
jakości staje się zauważalne),  
- elementy graficzne zawierające duże obszary o takich samych kolorach, nie zawierające przejść tonalnych zachowujemy w formacie GIF.

- grafiki zawierające ostre, wyraźne elementy, drobny tekst itp., należy zapisywać w formacie GIF (format JPEG powoduje „rozmywanie” ostrych krawędzi),
- należy unikać płynnych przejść tonalnych na dużych obszarach (np. przejście od bieli do zieleni na obszarze 100x100 pikseli), gdyż żaden z wymienionych wcześniej formatów nie zapewni poprawnego odwzorowania, 
- jeżeli to możliwe przy konwersji na IndexedColor nie korzystać z opcji Dither (poprawia to stopień kompresji),

- należy unikać zbyt dużych elementów graficznych, jak również zbyt wielu małych elementów.