E-rmitaż

Dziś każdy entuzjasta fotografii cyfrowej może się pochwalić swoimi osiągnięciami przed szerszym gronem znajomych. W tym celu wystarczy zbudować sobie internetową galerię. Trzeba jednak wiedzieć, jak to robić i czym. O szybkości otwierania strony WWW decyduje wiele czynników: rodzaj przeglądarki, wydajność komputera, wydajność serwera, na którym umieszczono stronę, a także odpowiednie przygotowanie samej witryny - przede wszystkim umiejętne zoptymalizowanie grafik.

Dziś każdy entuzjasta fotografii cyfrowej może się pochwalić swoimi osiągnięciami przed szerszym gronem znajomych. W tym celu wystarczy zbudować sobie internetową galerię. Trzeba jednak wiedzieć, jak to robić i czym. O szybkości otwierania strony WWW decyduje wiele czynników: rodzaj przeglądarki, wydajność komputera, wydajność serwera, na którym umieszczono stronę, a także odpowiednie przygotowanie samej witryny - przede wszystkim umiejętne zoptymalizowanie grafik.

Zbyt często twórcy stron WWW zwracają uwagę tylko na to, jak dane zdjęcie, banner czy inny element graficzny wyglądają na stronie, w ogóle nie interesując się 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 - ma same zalety, bo mniejsza objętościowo strona szybciej się otwiera, co zwiększa szanse na to, że użytkownik zdecyduje się na ponowne odwiedzenie witryny. Dla mniej zorientowanych warto może sprecyzować samo pojęcie optymalizacji grafiki. W dużym uproszczeniu to obróbka plików graficznych, polegająca m.in. na zmniejszeniu liczby kolorów i odpowiednim doborze formatu graficznego przy możliwie najmniejszej utracie jakości grafiki i maksymalnej redukcji rozmiaru pliku.

Kluczem do sukcesu jest właściwy dobór formatu, w jakim zapiszesz plik. W Internecie dominują właściwie przez dwa formaty graficzne - JPG oraz GIF. Pojawiają się, co prawda, także inne, np. PNG, ale stopień ich akceptacji przez internautów jest raczej niewielki. Inna sprawa, że popularne jotpegi oraz gify całkowicie wystarczają. Pozostaje tylko pytanie - kiedy JPG, a kiedy GIF? Zasada jest prosta - im mniej kolorów, tym lepiej wykorzystywać format GIF, ponieważ potrafi ich zapamiętać tylko 256 lub mniej. Kiedy liczba kolorów pliku wyjściowego nie mieści się w palecie GIF, do symulowania przejść tonalnych (tzw. gradientów) wykorzystywany jest mechanizm zwany ditheringiem, co znacząco zwiększa objętość pliku. Również gdy obrazek zawiera duże obszary wypełnione jednolitym kolorem lub gdy grafika jest bardzo mała (np. na przycisku), zdecydowanie lepszym wyborem okaże się GIF. Dla niektórych istotną zaletą jest również możliwość zapisywania 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 odchodzi powoli w zapomnienie za sprawą wszechobecnego Flasha.

Kiedy jednak chcesz umieścić na stronie WWW zdjęcie o bogatej kolorystyce i w dodatku z wieloma przejściami tonalnymi, to niezastąpiony okaże się 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, zwłaszcza starsze przeglądarki internetowe mogą jednak nie poradzić sobie z wyświetleniem takiego pliku (zdarza się to naprawdę sporadycznie). Jeżeli jednak chcesz mieć całkowitą pewność, że absolutnie wszyscy będą mogli podziwiać twoją stronę w pełnej krasie, zalecamy zapisywanie jotpegów w trybie Baseline Optimized.

Tak wygląda nasze zdjęcie źródłowe. Po kilku prostych operacjach będzie ono kilkakrotnie "lżejsze", równie dobrze wyglądając.

Tak wygląda nasze zdjęcie źródłowe. Po kilku prostych operacjach będzie ono kilkakrotnie "lżejsze", równie dobrze wyglądając.

Prześledźmy zatem drogę, którą 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 najpotężniejszy program do obróbki grafiki - Adobe Photoshop 7.

Początkowy rozmiar takiego pliku wynosi zwykle kilka megabajtów, a więc umieszczenie go w Internecie wymagałoby pogodzenia się z tym, że zobaczą go nieliczni (dysponujący superszybkimi łączami) użytkownicy. Pierwszą nasuwającą się na myśl metodą zmniejszenia objętości pliku graficznego jest zmniejszenie rozmiarów zawartego w nim obrazka. Na przykład zdjęcie wykonane aparatem cyfrowym z dwumegapikselową matrycą będzie miało rozmiary 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 jednego z wymiarów (długości lub wysokości) program sam dobierze drugi w taki sposób, aby nie zmienić proporcji obrazu. Nasze przykładowe zdjęcie drzewa 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, a Bicubic - najwyższa, wymagająca dłuższych obliczeń. W oknie Resize Image możesz również zmienić rozdzielczość obrazka. Do zastosowań internetowych zdecydowanie wystarczy 72 dpi.

Podczas zmiany rozmiarów obrazka w Photoshopie możesz również dzięki opcji Resample Image zdecydować, czy ma ona przebiegać szybciej (kosztem jakości) czy wolniej.

Podczas zmiany rozmiarów obrazka w Photoshopie możesz również dzięki opcji Resample Image zdecydować, czy ma ona przebiegać szybciej (kosztem jakości) czy wolniej.

Nasz plik graficzny został znacznie zmniejszony - z prawie 550 KB w wersji oryginalnej do 114 KB (przy zapisie w formacie JPEG z maksymalną jakością). Dla przeciętnego użytkownika modemu takie zdjęcie ciągle dalekie jest jednak od ideału. Jego pobieranie, przy założeniu, że prędkość analogowego połączenia modemowego wynosi 56 KB/s, potrwa bowiem ok. 20 sekund (czas ten jest podany w oknie dialogowym pojawiającym się podczas zapisu obrazka). Przy większej liczbie zdjęć na stronie musisz jeszcze bardziej zredukować objętość obrazków. Tu przychodzi w sukurs jedna z cech formatu JPEG - pozwala on na kompresję stratną. Oznacza to, że poświęcając jakość zdjęcia, możemy dość istotnie zmniejszyć jego objętość. Trzeba tylko dobrze wyważyć oba te parametry.

Photoshop ma bardzo wygodną opcję Save For Web, która pozwala tak dobrać jakość obrazka, żeby zajmował jak najmniej miejsca - użytkownik może podglądać do 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 przypadku GIF i plików PNG) czy rodzaje ditheringu (odwzorowanie niedostępnego w systemie koloru poprzez zmieszanie kilku zbliżonych do niego barw z dostępnej palety). W oknie dialogowym znajdziesz również wszystkie najważniejsze informacje: wielkość pliku po zastosowaniu zmian, czas pobierania podczas połączenia o zadeklarowanej przepustowości oraz stopień kompresji.

Cztery wersje tego samego obrazka - możesz dowolnie dobrać parametry kompresji, jakość czy liczbę kolorów i zapisać tę, która ci najbardziej odpowiada.

Cztery wersje tego samego obrazka - możesz dowolnie dobrać parametry kompresji, jakość czy liczbę kolorów i zapisać tę, która ci najbardziej odpowiada.

Wróćmy jednak do zdjęcia drzewa. Mając szerokość 500 pikseli "ważyło" 114 KB. Korzystając z opcji Save For Web, zapisz je teraz jako JPEG, ustawiając suwak Quality na 60. Wartość taka pozwala na zachowanie stosunkowo wysokiej jakości przy dość znacznej redukcji objętości pliku. Z takimi ustawieniami zajmie już tylko 69 KB, a utrata jakości na pierwszy rzut oka będzie absolutnie niezauważalna - zdjęcie można zatem z czystym sumieniem umieścić na stronie WWW . Jak widać na ilustracji, w przypadku ustawienia Quality na wartość 30, pojawiają się już tzw. artefakty (czyli zniekształcenia obrazu spowodowane zbyt mocną kompresją). Są szczególnie widoczne przy krawędziach obiektów. Plik jest, co prawda, znowu o połowę "lżejszy", ale obrazek ma już wyraźnie gorszą jakość.

Warto również zwrócić uwagę na to, że format GIF przy 256 kolorach w tym przypadku oferuje jeszcze niezłą jakość (zdjęcie nie zawiera zbyt wielu kolorów), jednak wielkość pliku wyniesie aż 159 KB (a więc niewiele mniej od 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 zapisywania obrazków zawierających duże obszary wypełnione jednolitym kolorem czy mało przejść tonalnych. Najlepszym przykładem będą wszelkiego rodzaju napisy umieszczane na stosunkowo jednolitym tle. Zapisanie takiego obrazka jako JPEG spowoduje bądź powstanie ogromnego pliku bądź, przy gorszej jakości, powstanie wspomnianych już wcześniej "artefaktów".

Koniecznie należy również wspomnieć o jeszcze jednej niezwykle przydatnej webmasterom opcji Photoshopa - dzielenia obrazków na kilka obszarów (Slices), z których każdy może być zapisany jako oddzielny plik. Pozwala to na przykład na wybranie fragmentów obrazka zawierających mniej kolorów i zapisanie ich jako gify, podczas gdy reszta może pozostać jotpegiem. Wszystkie utworzone w ten sposób "plasterki" zapisywane są w jednym folderze, a Photoshop tworzy równocześnie dokument HTML, który składa je w całość. Taki zabieg pozwala na dalsze zmniejszenie objętości i czasu pobierania obrazka bez utraty jakości (co mogłoby nastąpić na przykład wtedy, gdy na zdjęcie w formacie JPEG nałożony zostanie jakiś napis - jak na naszej ilustracji). Dzielenie obrazka na "plastry" pozwala również na przypisanie każdej części fotografii innego adresu URL. Nie trzeba chyba dodawać, jak atrakcyjne menu można stworzyć z wykorzystaniem tej techniki.


Zobacz również