Grafika na Twojej stronie internetowej. Optymalizacja grafiki dla stron internetowych
Samouczek online na temat grafiki internetowej
Wydaje się, że można powiedzieć coś nowego na ten dość stary temat - optymalizacja grafiki. Spróbuję jednak podzielić się własnymi doświadczeniami w tej dziedzinie i podam kilka czysto praktycznych zaleceń, jak przygotować grafikę na strony internetowe.
Nie zastanawiałem się nad kwestiami związanymi z zachowaniem grafiki w starych ośmiobitowych trybach wideo. Takie pojęcia, jak „bezpieczna” paleta, już straciły swoją wcześniejszą przydatność. Jednocześnie wielu webmasterów często popełnia błędy, których można uniknąć, przyglądając się bliżej niektórym funkcjom formatów graficznych i edytorów graficznych.
Mówimy tylko o dwóch klasycznych sieciowych formatach rastrowych - GIF i JPEG, ponieważ dla pełnego wsparcia, powiedzmy, PNG, nawet najnowsza wersja przeglądarek wymaga specjalnego modułu, który nie wszyscy użytkownicy uważają za konieczny do zainstalowania. Grafika wektorowa jest prawie całkowicie zredukowana do ultra modnego standardu ShockwaveFlash, a to już inna historia ...
GIF i JPEG wykorzystują całkowicie inne zasady kompresji obrazu. Aby dowiedzieć się, jak wybrać odpowiedni format, spróbujmy lepiej zrozumieć urządzenie tych formatów.
Funkcje kompresji JPEG
Opracowując metodę kompresji JPEG, wzięto pod uwagę pewne niezwykłe cechy ludzkich organów percepcji kolorów. Faktem jest, że ludzkie widzenie jest bardziej wrażliwe na zmiany światła niż na rzeczywisty kolor. Model kolorów RGB (czerwony, zielony, niebieski) używany w grafice komputerowej jest „nieekonomiczny” ze względu na równe znaczenie wszystkich trzech komponentów. Wybór innego układu współrzędnych kolorów pozwala zwiększyć kompresję, odrzucając dobrą połowę informacji o odcieniu i nasyceniu kolorów. Jednocześnie najważniejszy składnik jasności oka jest nienaruszony. Po takiej operacji ilość informacji zostaje zmniejszona o jedną trzecią. Nawiasem mówiąc, w tym formacie JPEG jest bardzo podobny do schematów kolorów w telewizji kolorowej.
Dodatkowo algorytm kompresji stratnej jest zaimplementowany w JPEG - dyskretnej transformacji kosinusowej (DCT), w której informacje o kolorze każdego piksela są zastępowane informacjami o naturze zmian koloru w danym obszarze. Obraz jest kwantowany - przekształcony w mozaikę kwadratów (zwykle 8 x 8 pikseli). W obrębie każdego takiego kwadratu rozkład kolorów opisuje specjalna funkcja matematyczna, której współczynniki są przechowywane w pliku JPEG. Jakość obrazu zastępczego uzyskanego przez odwrotną transformację i odpowiednio rozmiar pliku zależy od złożoności funkcji i błędu zaokrąglenia.
Dopiero po tych wszystkich przemianach następuje zwrot normalnej kompresji (już bez straty). W tym celu stosuje się z reguły nieopatentowany algorytm kompresji Huffmana. Wstępnie posortowane informacje są kompresowane tak efektywnie, jak to możliwe.
JPEG jest przeznaczony przede wszystkim do kolorowych zdjęć z miękkimi przejściami kolorów, ponieważ wraz ze wzrostem stopnia kompresji zauważalne jest wzajemne przenikanie kolorów na ostrych stykach kolorowych i „drganie” cienkich linii. Zmieniając stopień kompresji, można osiągnąć bardzo wysokie współczynniki optymalizacji kolorowych zdjęć (na przykład 1:10) bez utraty zauważalnej jakości. Format jest 24-bitowy (16,7 miliona kolorów) - jest to prawdopodobnie główna, choć względna, przewaga nad GIF.
W przypadku obrazów o małych rozmiarach (dziesiątki pikseli) JPEG nie jest używany, ponieważ z uwagi na opisane powyżej funkcje nie przekazuje on wyraźnych szczegółów. Dla porównania podam minimalny rozmiar plików jednopikselowych: dla JPEG - 542 bajty; dla GIF - 35 bajtów.
Funkcje kompresji GIF
Ten format został stworzony przez CompuServe w 1987 roku. Obecnie GIF pozostaje jednym z najpopularniejszych formatów graficznych i jest obsługiwany przez wszystkie istniejące przeglądarki graficzne. W rzeczywistości koncepcja grafiki internetowej w większości sprowadza się do techniki tworzenia obrazów GIF.
Główną, choć całkowicie niepowiązaną, cechą formatu jest powiązanie obrazu z określoną paletą i bezstratnym algorytmem kompresji - LZW. Dlatego też rozmiar (a tym samym prędkość pobierania) pliku GIF jest ściśle zależny od dwóch rzeczy - rozmiaru palety (liczby zaangażowanych kolorów) i natury samego obrazu (jego „fragmentacja”)
Paleta (tabela kolorów) może zawierać 2, 4, 16, 32, 64, 128 lub 256 komórek. Tak więc obraz GIF nie może mieć więcej niż 256 kolorów (8 bitów na piksel). Jednak w przypadku większości zadań związanych z projektowaniem stron internetowych 256 kolorów w jednym pliku jest nawet bardzo dużo. Paleta może zawierać kolory „systemowe” lub być dowolnie indeksowane, tj. Dostosowane do konkretnego obrazu. Jeśli oryginał ma więcej niż 256 kolorów, to podczas eksportowania bliskich cieni przyjmuje średnią wartość. Istnieje nawet taka pseudo-empiryczna reguła: im większy obszar zajmowany przez kolor na zdjęciu, tym większa szansa, że pozostanie on „sobą”. Częściowo rozwiązując problem ograniczonej palety czasami pomaga dyfuzja kolorów - miksowanie pikseli w celu uzyskania odcienia przejściowego. Ta opcja jest dostępna w większości edytorów graficznych. Ale tutaj mamy do czynienia z innym problemem - dyfuzja wprowadza dodatkową część zamieszania do pliku obrazu, co wpływa na jego ściśliwość. Dlatego pożądane jest skompensowanie dyfuzji przez zmniejszenie palety (na przykład od 256 do 128 lub 64 kolorów)
Oto żywy przykład zależności rozmiaru pliku od uporządkowania informacji graficznych w nich (te trzy zdjęcia nie różnią się od siebie charakterem obrazu)
210 bajtów
519 bajtów
1002 bajty
Sekret polega na tym, że w plikach GIF informacje są przechowywane wiersz po wierszu. Jak widać, opisanie pierwszego obrazu w rzędach jest dość proste, czego nie można powiedzieć o tym drugim.
Jak wiadomo, istnieją dwie wersje formatu: GIF87a i GIF89a. Rozszerzenia, takie jak przezroczystość i animacja, są obsługiwane tylko w GIF89a, więc większość programów tworzy pliki w tej wersji.