Dzisiaj jest czwartek, 17 sierpnia 2017
Więcej szczęścia niż rozumuWygrałem w lotto i co dalej?Ile za zlecenie czyli jak wycenić własną pracę?
Optymalizacja grafiki do internetu

Optymalizacja grafiki do internetu

poniedziałek, 2010-05-100

Można by powiedzieć, że temat bardzo nie na czasie, bo kto by się przejmował wielkością plików skoro niemal wszyscy (dla wielu jest to jednak synonimem wszyscy) mają szerokopasmowy dostęp do internetu. Więc co za różnica: 100kB czy kilka MB pobranych (często niepotrzebnie) danych?

Tymczasem nie jest to wcale taka nieistotna sprawa. Coraz więcej osób przegląda internet na komórkach a tu jeszcze często płaci się za czas połączenia lub za ilość pobranych kilobajtów. Co więcej, Google coraz większą uwagę zwraca na szybkość ładowania strony i jej ciężar - ma do duży wpływ na pozycję w wynikach wyszukiwania.

Sam temat optymalizacji też nie jest taki banalny. Często oglądam strony, które o ile graficznie wyglądają super o tyle pod kątem ciężaru (nie tylko grafiki, także kodu, ale o tym napiszę innym razem) wołają o pomstę itd.

Formatów graficznych jest wiele

Tylko kilka formatów graficznych nadaje się do użycia w internecie
Zatweetuj

Ale tylko kilka nadaje się do używania na stronach internetowych ze względu na ich wysoką kompresję, chociaż często stratną:

  • GIF - używany głównie do prostych grafik np. ikonek o ograniczonej ilości kolorów (wykorzystywana jest paleta o maksymalnej ilości 256 kolorów) oraz prostych i krótkich animacji. Jeden kolor z palety można przeznaczyć na przezroczystość, niestety nie jest to prawdziwy kanał alfa, więc przy bardziej skomplikowanych kształtach może się pojawić efekt aureoli, zwłaszcza gdy oryginalne tło było np. jasne a tło, na którym wyświetlana jest grafika - ciemne. Ale zaokrąglenie rogów małych ikonek wychodzi jak najbardziej OK.
  • JPG - najlepiej nadaje się do zdjęć ponieważ nie ma ograniczeń w ilości kolorów. Za to jego kompresja zawsze jest stratna, to znaczy po otworzeniu pliku JPG NIGDY nie otrzymamy tego, co było przez zapisem. W zależności od stopnia kompresji wokół ostrych krawędzi pojawią się mniejsze lub większe artefakty. W związku z tym JPG nie nadaje się jako plik przejściowy do dalszej edycji, ale do wrzucenia na WWW jak najbardziej. Najlepsza kompresja to około 60-70%. Przed eksportem małych grafik warto sprawdzić, czy przypadkiem GIF nie okaże się lepszym rozwiązaniem.
  • PNG - od lat mówi się, że jest to następca GIFa, który korzysta z kompresji LZW a ta jest obciążona patentami (swoją drogą nigdy jeszcze nie spotkałem się z przypadkiem, żeby ktoś zamknął stronę internetową za używanie GIFów). Ponadto posiada prawdziwy kanał alfa z 256 poziomami przezroczystości. PNG jest zajebisty do tworzenia ikonek, które możemy wyświetlać na dowolnym tle.
  • SWF - jest to w zasadzie animacja Flash, ale często wykorzystywana (a czasem nadużywana) do wyświetlania statycznych grafik. Jako że jest to format wektorowy, idealnie nadaje się do różnych wykresów i prostych grafik. Wielkość takiego pliku to często ułamek analogicznego GIFa, pod warunkiem, że nie wrzuci mu się wielkiej bitmapy, bo ta jest pomniejszana dopiero przy wyświetlaniu, a w pliku jest w oryginalnej wielkości, często kilkukrotnie przekraczającej rozmiar docelowy.
    EDIT 2017: SWF w stronach internetowych to przeżytek. Nie widzą go urządzenia mobilne, Apple go nie lubi, coraz więcej przeglądarek blokuje i trzeba za każdym razem zgadza się na jego wyświetlenie. Dlatego lepiej użyć poniższego...
  • SVG - ciekawy i coraz popularniejszy format wektorowy, chociaż starsze przeglądarki IE nie obsługują go natywnie. Potrzebna jest wtyczka a tą mało kto ma ochotę (a często i możliwość) instalować.
    EDIT 2017: Obecnie wszystkie przeglądarki już bez problemu wspierają SVG. Dlatego zapomnijcie o Flashu i całą grafikę wektorową spokojnie możecie przygotować w SVG. Powiększ sobie rozmiar strony i zobacz jak ładnie wygląda moje logo - zero pikselozy. Ikonki też już robię niemal wyłącznie w SVG (ewentualnie przy użyciu Font Awesome).

Jak to wykorzystać?

Podczas eksportu do GIFa można zmniejszyć ilość kolorów. W niektórych przypadkach (grafiki o małym kontraście) można bez problemu zmniejszyć ich ilość z 256 do 64 bez widocznej utraty jakości za to z dużym zyskiem na wielkości plików. Generalnie stosuję zasadę ograniczyć nieco ilość kolorów niż grafika ma w rzeczywistości np. dla 150 kolorów ograniczam do 128 i jest OK. Jak już pisałem, GIF obcina ilość kolorów do 256 (lub mniej w zależności od ustawień) i jeśli oryginalna grafika tyle ma, to kompresja będzie bezstratna. Większa ilość kolorów zostanie ograniczona bądź to do najbliższych kolorów bądź przy użyciu tzw. ditheringu.

W przypadku SWF, przed jego utworzeniem warto się zastanowić nad kilkoma rzeczami:

  • Czy małej, prostej animacji nie lepiej zrobić jako GIF? Flash bardzo obciąża przeglądarkę a wyświetlenie kilku, nawet prostych animacji potrafi uprzykrzyć życie użytkownikowi.
  • Czy na pewno trzeba całą grafikę pakować do Flasha, może lepiej wyświetlić tylko część wektorową na przezroczystym tle?

Jako ciekawostkę czynności odwrotnej (użycia GIFa zamiast SWF) przytoczę przykład jednego z moich byłych klientów. Zapragnął mieć w nagłówku nieco animacji. Wrzucił więc nagłówek do Photoshopa, dorobił animowane napisy i CAŁOŚĆ wyeksportował do GIFa, który waży, ponad 4MB! Proponowałem mu przerobienie tego na Flasha w trosce o jego klientów, ale widać, nie bardzo go oni obchodzą. Cóż, nie będę się narzucać.

W przypadku tekstury tła (zdarzają się jeszcze strony, których autorzy na przekór czytelności, wrzucają w tło grafikę) warto spreparować powtarzający się kawałek - kafelek - i wypełnić nim stronę. Oczywiście brzegi powinny do siebie pasować, żeby nie było widać tzw. szwów. Ale wrzucanie gigantycznej tapety z Windowsa mija się z celem i to bardzo.

Polecam wpis o formatach graficznych (nie tylko do internetu), gdzie dokładniej opisuję ich cechy i zastosowanie: Jaki format pliku graficznego wybrać?

Jeszcze jeden ciekawy patent

Coraz częściej proponowane jest wrzucenie np. wszystkich buttonów w jeden plik i zastosowanie sztuczki zwanej CSS Sprite czyli przy pomocy CSSa wskazywać, jaki fragment grafiki będzie wyświetlany. Plusem tego rozwiązania jest fakt, że jeden duży plik szybciej się pobierze niż wiele małych (no i będzie on mniejszy niż suma małych). Jednak ten sposób ma wadę, która w moim przekonaniu skreślają go - trzeba napisać wiele linii w arkuszu stylów CSS lub kombinować ze stylami na bieżąco lub z poziomu JavaScripu. Jak dla mnie zbyt wiele niepotrzebnej roboty. A przecież pliki i tak będą odczytane tylko raz, potem przeglądarka pobiera je z cache'a. Więc korzyść jest niewielka i tylko jednorazowa.

Spodobał Ci się wpis? Udostępnij go w Social Media:
Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na