Obrazkowa dieta-cud

O szybkości otwierania strony WWW decyduje wiele czynników, m.in. przepustowość łącza, natężenie ruchu w Sieci, wydajność serwera, na którym umieszczono stronę, a także odpowiednie jej przygotowanie.


Ten ostatni czynnik to nie tylko możliwie "czysty" i oszczędny kod, ale także odpowiednio przygotowane elementy graficzne. Zbyt często twórcy stron WWW zważają tylko na to, jak dane zdjęcie, banner czy inny element graficzny wyglądają na stronie, nie troszcząc się o ich optymalizację. A przecież "odchudzenie" grafiki nie musi iść w parze z widocznym pogorszeniem jej jakości (a więc również atrakcyjności wizualnej strony). Wręcz przeciwnie, zoptymalizowanie grafiki ma same plusy - mniejsza objętościowo strona szybciej się otwiera, co zwiększa szanse na to, że użytkownik ponownie odwiedzi witrynę. Warto sprecyzować samo pojęcie optymalizacji grafiki. W dużym uproszczeniu można powiedzieć, że jest to obróbka plików graficznych, polegająca m.in. na zmniejszeniu liczby wykorzystywanych kolorów i odpowiednim doborze formatu graficznego przy możliwie najmniejszej utracie jakości grafiki i maksymalnej redukcji rozmiaru pliku.

Jak to osiągnąć? Kluczem do sukcesu jest właściwy dobór formatu, w którym zapiszesz plik. Internet zdominowany został właściwie przez dwa formaty graficzne - JPG oraz GIF. Pojawiają się także inne, np. PNG, ale stopień ich akceptacji przez internautów jest raczej niewielki. Inna sprawa, że popularne pliki JPG oraz GIF całkowicie wystarczają. Pozostaje tylko pytanie - kiedy JPG, a kiedy GIF?

Zasada jest prosta - gdy jest mniej barw, warto wykorzystywać format GIF, ponieważ potrafi zapamiętać tylko 256 kolorów (lub mniej). Gdy liczba barw w pliku wyjściowym nie mieści się w palecie formatu GIF, do symulowania przejść tonalnych (tzw. gradientów) wykorzystywany jest mechanizm zwany ditheringiem. Znacząco wpływa to na objętość pliku.

Również wtedy, gdy obrazek zawiera duże jednokolorowe obszary lub gdy grafika jest bardzo mała (np. w wypadku przycisku), zdecydowanie lepszym wyborem okaże się GIF. Dla niektórych istotną zaletą jest również możliwość zapisania w tym formacie wielu klatek animacji w jednym pliku. Do niedawna szczególnie chętnie korzystali z tego twórcy bannerów i innych animowanych elementów, teraz przeważnie stosuje się Flash.

Kiedy jednak chcesz umieścić na stronie WWW zdjęcie o bogatej kolorystyce i w dodatku z dużą liczbą przejść tonalnych, to niezastąpiony będzie format JPG. Oferuje 24-bitową paletę kolorów i doskonale radzi sobie z odwzorowywaniem gradientów.

Format ten, w przeciwieństwie do GIF, pozwala na stosowanie kompresji opartej na dwóch zmiennych: jakości (Quality) i wygładzaniu (Smoothing). Wraz ze zmniejszaniem wartości tych parametrów zmniejsza się objętość pliku, równocześnie jednak pogarsza się jakość grafiki. Aby uzyskać zadowalającą jakość przy niewielkiej objętości musisz zatem dobrze dobrać obie wartości.

Pliki JPG można zapisać w trybie Baseline Standard bądź Baseline Optimized. Ten drugi, jako nowszy, oferuje nieco mniejszą utratę jakości przy takiej samej objętości pliku. W najnowszych wersjach programów graficznych możliwe jest również zapisywanie JPG-ów w trybie progresywnym (Progressive). Przeglądarka internetowa odczytuje takie pliki na raty, stopniowo zwiększając dokładność wyświetlania obrazka. Tryb Progressive doskonale nadaje się do wykorzystania w Sieci, ponieważ użytkownik może bardzo szybko zobaczyć, co znajduje się na otwieranym właśnie obrazku. Niektóre przeglądarki internetowe, zwłaszcza starsze, mogą jednak nie poradzić sobie z wyświetleniem takiego pliku (są to przypadki naprawdę sporadyczne). Jeżeli jednak chcesz mieć pewność, że absolutnie wszyscy będą mogli podziwiać Twoją stronę w pełnej krasie, zalecamy zapisywanie plików JPG w trybie Baseline Optimized.

Czas na dietę

Prześledźmy zatem drogę, jaką powinien przejść obrazek (na początku zajmiemy się zdjęciem z aparatu cyfrowego), który chcesz umieścić na swojej stronie !WWW. Wykorzystamy do tego celu testową wersję najpotężniejszego programu do obróbki grafiki - Adobe Photoshop 7.0. Początkowy rozmiar takiego pliku wynosi zwykle kilka megabajtów, więc obejrzeliby go w Internecie tylko nieliczni, dysponujący superszybkimi łączami. Metoda "odchudzenia" pliku graficznego, która pierwsza przychodzi na myśl, to zmniejszenie rozmiarów zawartego w nim obrazka. Na przykład zdjęcie wykonane aparatem cyfrowym z 2-megapikselową matrycą będzie miało wielkość 1600x1200 pikseli. Aby je zmniejszyć, wystarczy wybrać opcję Image Size z menu Image. Pojawi się okno dialogowe, w którym możesz wpisać nowe wymiary zdjęcia. Jeżeli zaznaczona jest opcja Constrain Proportions, to po wpisaniu długości lub wysokości program sam dobierze drugi rozmiar w taki sposób, aby zachować proporcje obrazu. Przykładowe zdjęcie zamku zmniejszymy zatem tak, aby miało 500 pikseli szerokości. Dociekliwi mogą się zastanawiać, do czego służą ustawienia w polu Resample Image. Otóż - w dużym skrócie - odpowiadają za wpływ zmiany wymiarów na jakość obrazka. Ustawienie Nearest Neighbor to najgorsza jakość (a najkrótszy czas wykonywania operacji), Bilinear - średnia, Bicubic - najwyższa (wymaga dłuższych obliczeń). W oknie Resize Image możesz również zmienić rozdzielczość obrazka. Do zastosowań internetowych zdecydowanie wystarczy 72 dpi. Plik graficzny ma teraz znacznie ograniczone rozmiary - z prawie 750 KB w wersji oryginalnej zmniejszył się do 123 KB (JPEG z maksymalną jakością). Dla przeciętnego użytkownika modemu takie zdjęcie ciągle dalekie jest jednak od ideału. Pobranie go, przy założeniu, że prędkość analogowego połączenia modemowego wynosi 56 Kb/s, potrwa bowiem ok. 21 s (czas ten jest podawany w oknie dialogowym pojawiającym się podczas zapisu obrazka). Chcąc umieścić więcej zdjęć na stronie, musisz jeszcze bardziej zredukować objętość obrazków. Pomoże Ci to, że format JPEG pozwala na kompresję stratną, czyli kosztem jakości ograniczy objętość zdjęcia. Trzeba tylko dobrze wyważyć oba parametry.

Bardzo wygodnym narzędziem Photoshopa jest opcja Save For Web. Pozwala na takie dobranie jakości obrazka, aby zajmował jak najmniej miejsca - można uzyskać podgląd nawet czterech wersji zdjęcia jednocześnie. Dodatkowo program pozwala w tym miejscu ustawić wszystkie najważniejsze parametry zapisu obrazków: format pliku, jakość, wygładzanie, rodzaj optymalizacji, liczba kolorów w wypadku plików GIF i PNG czy rodzaje ditheringu, czyli "mieszania" kolorów podczas przejść tonalnych. W oknie dialogowym znajdziesz również wszystkie najważniejsze informacje: wielkość pliku po zastosowaniu zmian, czas pobierania podczas połączenia o wybranej przepustowości oraz stopień kompresji.

Wróćmy jednak do zdjęcia zamku. Gdy miało szerokość 500 pikseli, "ważyło" 123 KB. Korzystając z opcji Save For Web, zapisz je teraz jako JPEG, ustawiając suwak Quality na 60, co pozwala na zachowanie stosunkowo wysokiej jakości przy znacznej redukcji objętości pliku. Z takimi parametrami zajmie już tylko 35 KB, a utrata jakości na pierwszy rzut oka będzie niezauważalna - zdjęcie można zatem umieścić na stronie WWW. W przypadku ustawienia Quality na wartość 30 pojawiają się już zniekształcenia obrazu. Są szczególnie widoczne przy krawędziach obiektów. Plik stał się, co prawda, znowu o połowę "lżejszy", ale obrazek ma wyraźnie gorszą jakość.

Format GIF przy 256 kolorach oferuje w tym przypadku jeszcze niezłą jakość (zdjęcie nie zawiera zbyt dużej liczby kolorów), jednak wielkość pliku wyniesie aż 103 KB (a więc niewiele mniej niż w przypadku nieskompresowanego JPEG). Format GIF pozwala na uzyskanie mniejszych plików, ale tylko przy mniejszej liczbie kolorów. Stąd wniosek, że standard ten jest idealny do zapisu obrazków zawierających duże obszary wypełnione jednolitym kolorem, czy mało przejść tonalnych. Najlepiej widać to na przykładzie wszelkiego rodzaju napisów umieszczanych na stosunkowo jednolitym tle. Zapisanie takiego obrazka jako JPEG spowoduje powstanie ogromnego pliku lub, przy gorszej jakości, wspomnianych wcześniej zniekształceń. Widać to doskonale na ilustracji.

Na plasterki

Należy również wspomnieć o jeszcze jednej niezwykle przydatnej dla webmasterów opcji Photoshopa - dzielenia obrazków na kilka obszarów (Slices), z których każdy może być zapisany jako oddzielny plik. Pozwala to np. na wybranie fragmentów obrazka zawierających mniej kolorów i zapisanie ich w formacie GIF, podczas gdy reszta może pozostać w formacie JPEG. Wszystkie utworzone w ten sposób "plasterki" zapisywane są w jednym folderze, a Photoshop tworzy równocześnie dokument HTML, który ponownie składa je w całość. Taki zabieg pozwala nie tylko na dalsze zmniejszenie objętości i czasu pobierania obrazka oraz zapobiega utracie jakości (np. wtedy, gdy na zdjęcie w formacie JPEG nałożony zostanie jakiś napis. Dzielenie obrazka na "plastry" pozwala też przypisać każdej części fotografii inny adres URL. W naszym przykładzie kliknięcie zamku mogłoby przenieść internautę na jedną stronę, a kliknięcie łabędzia - na inną. Nie trzeba chyba dodawać, jak atrakcyjne menu można tworzyć za pomocą tej techniki.

Opisane wyżej operacje można, oczywiście, przeprowadzić nie tylko za pomocą Photoshopa, chociaż ten właśnie program stanowi bez wątpienia jedno z bardziej kompletnych i wszechstronnych rozwiązań dla grafików (nie tylko "internetowych"). Jednak wiele innych programów umożliwia osiągnięcie podobnych efektów w mniej lub bardziej wygodny sposób. Nie da się przytoczyć nawet nazw ich wszystkich, bo idą w setki. Pokusiliśmy się jednak o zestawienie w jednej tabeli istotnych dla webmasterów cech kilku programów - począwszy od kombajnów za kilka tysięcy zł (jak Photoshop), a skończywszy na bezpłatnych programach.