Optymalizacja grafiki na potrzeby stron www

<p>Kiedyś (przy łączach modemowych) bardzo pilnowano, aby wielkość strony nie przekraczała 100kb jednak od kiedy stałe łącza internetowe stały się w Polsce popularne wielu webmasterów nie zwraca na to uwagi i ponosi ich wyobraźnia. Nie mówię o optymalizacji strony do 100kb :), ale w ogóle zwracaniu uwagi na wielkość strony. Graficy często pchają w projekty bezmyślnie technologie flash, która często nic nie wnosi do projektu. W wielu stronach przeładowanie grafiki powoduje, iż strona wygląda jak "choinka". Ważne, żeby "coś latało", "się działo" bo tak sobie zażyczył prezes firmy. Nie zwraca się jednak uwagi na użyteczność strony czy też optymalizację grafiki. Internauta wchodząc na naszą stronę z reguły szuka informacji, a nie efektów specjalnych. Takie "bajery" często tylko przeszkadzają w zapoznaniu się z treścią strony. Prosta, schludna, elegancka użyteczna i dobrze zoptymalizowana strona to podstawa. Strona chodzi szybko, nie trzeba instalować żadnych dodatków, tego właśnie oczekują internauci. Co raz częściej użytkownicy mobilni zaczynają "buszować" po naszych stronach i warto też o nich pomyśleć, jeśli nie macie ochoty przygotowywać całych stron pod urządzenia mobilne to warto chociaż zoptymalizować obecne. W ostatnich latach liczba użytkowników uzyskujących dostęp do internetu za pomocą telefonów komórkowych znacząco rośnie. Analitycy przewidują, że sytuacja ta utrzyma się przez kolejne lata i popularność internetu na komórki będzie rosła dużo szybciej niż w przypadku komputerów stacjonarnych. źródło: adwords-pl.blogspot.com Nie chcę poruszać tutaj kwestii stron we flashu, które potrafią zajmować po kilka mb i zanim się załadują to internauta zdąży zamknąć przeglądarkę. Chciałem zwrócić Twoją uwagę na optymalizację plików graficznych jpg, gif, png, używanie odpowiedniego formatu plików oraz wykorzystanie CSS.

1. Optymalizacja poprzez wykorzystanie CSS Naturalnym stało się wykorzystywanie CSS do tworzenia warstwy wizualnej strony. Kiedyś CSS wykorzystywano tylko, aby nadać czcionce odpowiednią wielkość czy kolor. Teraz natomiast CSS decyduje o wyglądzie całej strony i jej układzie. Dzięki możliwości powtarzania tła elementów graficznych, webmaster w celu stworzenia nagłówka gradientowego o szerokości 990px wystarczy, że stworzy plik o szerokości 1px i w CSS zaznaczy, że tło danego elementu html ma być rozciągane na cała szerokość. To pozwala zaoszczędzić kilka, kilkanaście kb. Na ile jest to możliwe zamiast nagłówków graficznych należy stosować ostylowane nagłówki heading (h1, h2, h3, h4, h5, h6). Menu warto zrobić jako lista w html i nadać odpowiednie stylowanie podkładając w tło listy element graficzny i rozciągając go na całą szerokość. Możliwości CSS są duże i należy wykorzystywać je wszędzie gdzie taka możliwość istnieje. Po pierwsze elementy ostylowane zajmują dużo mniej niż grafika, po drugie są przyjazne pod SEO i po trzecie jakakolwiek ich zmiana będzie dokonywana w kodzie, a nie programie graficznym (co jest znacznie łatwiejsze i szybsze do zmiany). Łatwiej też jest zmieniać cały układ strony więc odrobina wytrwałości przy walce z niereformowalnym IE może się opłacić. Ostatnio na blogu Shpyo przeczytałem o CSS Sprite. Nie wiedzieć czemu nigdy wcześniej o tym nie słyszałem mimo, że nie jest to jakaś nowinka. Na czym polega CSS Sprite? css  spriteWszystkie elementy graficzne, które są przez nas najczęściej wykorzystywane na stronie łączymy w jeden duży plik. Przykładowo tło menu, buttony do przewijania stron…  a następnie tylko tym jednym plikiem operujemy w CSS przesuwając jego położenie dla odpowiednich elementów na stronie. Mamy jeden duży plik graficzny i pokazujemy użytkownikom tylko jego część dla wybranych elementów html. W komentarzu do tego wpisu Cezary Lech podał dobry przykład CSS Sprite Google (screen po prawej). Po pierwsze jeden duży plik zajmie znacznie mniej niż 40 małych. Po drugie wyszukiwarka wysyła tylko jedno zapytanie do serwera, a nie 40. Dodatkowo wydaje się, że na serwerze będzie większy porządek z plikami graficznymi. Nie miałem jeszcze okazji wykorzystać CSS Sprite jednak rozwiązanie wydaje się bardzo ciekawe. Więcej informacji na ten temat u Shpyo zapraszam też do dyskusji na ten temat.

2. Dobór formatu pliku graficznego Najpopularniejsze formaty plików graficznych jakie są wykorzystywane na stronach www to jpg, gif oraz png. Kiedy i jaki format stosować? Obrazy proste zawierające niewielką ilość kolorów, bez cieniowań, przejść tonalnych eksportuje się do formatu gif. Wykonując eksport warto dobierać jak najmniejszą ilość kolorów, oczywiście należy tak je dobrać, aby jakość obrazu się nie pogorszyła. Świetnym przykładem grafik, które należy eksportować do pliku gif są np. loga na stronie. Logo zawiera z reguły 2 maksymalnie 3 kolory. W programie graficznym warto ustawić powiedzmy 8-16 kolorów, aby obraz nie stracił na jakości i w porównaniu z formatem jpg uzyskamy o wiele lepszą optymalizację. Format gif obsługuje przezroczystość grafik. Zupełnie odwrotnie jest przy eksportowaniu obrazów zawierających, zdjęcia, przejścia tonalne etc. Tutaj bezwzględnie należy użyć formatu jpg z odpowiednim % kompresji. Z mojego doświadczenia (PS, Fireworks) wynika, że przeciętnie optymalizacja 60-70% daje odpowiedni poziom kompresji i pozwala utrzymać obraz na wystarczającej jakości. Zalecam jednak, aby do każdego obrazu podchodzić indywidualnie i kompresować pliki pojedyńczo. Nie próbujcie zdjęć czy innych skomplikowanych obrazów eksportować do formatu gif bo ich objętość będzie zdecydowanie większa niż jpg. Trzecim używanym formatem jest png aczkolwiek muszę przyznać, że korzystam z niego dość rzadko. Jakość png jest bardzo dobra jednak z reguły pliki te ważą więcej niż jpg czy gif. Format png wykorzystuję tylko i wyłącznie w przypadku gdy potrzebuję stworzyć grafikę zawierającą elementy przezroczyste. Format gif też obsługuje przezroczystości jednak png radzi sobie zdecydowanie lepiej i jego krawędzie są o wiele gładsze. Na co dzień korzystam z Macromedia Fireworksa i radzi on sobie bardzo dobrze z optymalizacją grafiki. Jeśli chodzi o grafikę do stron www to rzekłbym, że jest on wydajniejszy, wygodniejszy w pracy niż Photoshop.

3. Optymalizacja plików graficznych Niby banał, a  jednak sam czasem łapię się na tym, że nie staram się wykorzystać w pełni możliwości optymalizacji plików graficznych. Ostatnio wrzucałem kilka ikon na stronę. Ikonki zmniejszyłem do odpowiedniej wielkości (px) i zapisałem je domyślnymi ustawieniami Fireworksa. Po chwili zorientowałem się, że te kilka prostych ikon zajmuje prawie 50kb. Wrzuciłem je do fireworks'a i jeszcze raz zrobiłem eksport, jednak tym razem dobierając odpowiednie ustawienia optymalizacji. Efekt to zejście z 50kb do 7kb. Na jednej ze stron jakie miałem okazję tworzyć znajdowało się bardzo dużo znaków firmowych zajmujących po kilka, kilkanaście kb. Jak się okazało każdy z tych znaków można było zoptymalizować 2-3 krotnie co przy ilości 100 sztuk zmniejszyło wagę o ponad 250kb. Pliki gif były zapisane ze zbyt dużą ilością kolorów. Tak jak pisałem w punkcie drugim, warto do każdego obrazu oddzielnie dobierać % kompresji czy ilość kolorów, aby w pełni wykorzystać możliwość optymalizacji pliku. Jakie są zalety przywiązywania uwagi do optymalizacji grafiki na stronach www? – oszczędność miejsca na serwerze oraz oszczędność transferu jaki generują pliki znacznie wpłynie na nasze roczne koszty utrzymania serwera, – oszczędność w wysyłaniu przez stronę zapytań do wyszukiwarki spowoduje szybsze wczytywanie się stron co także może wpłynąć na poprawę pozycji naszej strony w Google. Jeśli kompresja plików czy odpowiednie dobranie formatu nie wpłynie negatywnie na ich jakość to z pewnością wyjdzie to nam tylko na dobre. Zwrócenie szczególnej uwagi na optymalizacje grafiki na potrzeby stron www polecam osobom, które prowadzą serwisy odwiedzane przez wielu internautów. Jeśli posiadamy stronę, którą dziennie odwiedza 100, 200, 300 osób nie robi to tak dużej różnicy. Jeśli jednak posiadamy serwis, który jest odwiedzany przez kilkanaście, kilkadziesiąt tysięcy czy więcej odbiorców, to te kilkaset kb zaoszczędzone na kompresji grafiki pomoże nam zaoszczędzić rocznie sporo pieniędzy.

Jeśli ten artykuł pomógł Ci, masz co do niego jakieś wątpliwości lub pytania "Zostaw komentarz", a na pewno na niego odpowiem.
VN:F [1.9.22_1171]
Rating: 4.8/5 (19 votes cast)
Optymalizacja grafiki na potrzeby stron www, 4.8 out of 5 based on 19 ratings

o autorze

Sławomir Gdak

"Pomagam właścicielom małych i średnich firm w generowaniu ruchu z wyszukiwarek, aby ich biznes był stabilniejszy i bardziej dochodowy, za pomocą każdego rodzaju produktów i usług, jakie w danym momencie pozwalają mi ten cel realizować najlepiej."

13 komentarzy

napisz komentarz
  • Powiedziałbym nawet, że bardzo przydatne 🙂
    Jeden z lepszych argumentów to ten o oszczędność transferu i kosztach serwera z tym związanych.

    • No tak na klientach największe wrażenie robią koszty 🙂 Jak powiesz, że zoptymalizowanie grafiki to koszt xx zl, dobrze to wyliczysz i przedstawisz, że w przeciwnym wypadku za rok będą musieli dokupić hosting za 400 zl to od razu Twoja propozycja im się spodoba. Niestety to są pikusie z których klienci nie zdają sobie sprawy, a my musimy ich edukować.

  • Dziękuję za bardzo przydatny artykuł. Po przeczytaniu stwierdzam, że mam wszystkie pliki graficzne na stronie do podmiany…

  • "Nie chcę poruszać tutaj kwestii stron we flashu, które potrafią zajmować po kilka mb i zanim się załadują to internauta zdąży zamknąć przeglądarkę"

    zależy czego szuka interonauta… zamknie jeśli się chce pogapić, jeśli szuka czegoś konkretnego nie zamknie!!

    a przekonannie że tylko to i nic innego jest doskonałe… jest bardzo błędne

  • Flash ma zastosowanie przy stronach np. agencji, filmów etc. które muszą samą stroną coś pokazać, natomiast w większości stron nie ma potrzeby, aby wykorzystywać flasha.

  • No właśnie zastanawiam się czy takie kreatory jak webwave też nie pozycjonują się całkiem nieźle. Muszę potestować:)

  • Sławek, a co zrobić, kiedy chcemy mieć na stronie duże Slider’y z grafiką. Ważące łącznie około 3 MB. Jak zachować jakość przy jednoczesnym zachowaniu szybkości ładowania strony?

    • Tomku stosowanie sliderów bardzo mocno obniża konwersję strony i zostało to poparte wieloma testami więc warto zastanowić się czy jest sens w ogóle je stosować.

  • Dzięki Sławku, właśnie szukałam czegoś o optymalizacji plików graficznych do zamieszczania w artykułach i potwierdziłeś mi, że istotą w temacie jest głównie właściwa kompresja 🙂

  • Sławku ze wszystkim się zgodzę to co napisałeś. Czasami wystarczy tylko dobra optymalizacja aby strona wskoczyła dość wysoko. Grafika jeśli jest wielka można ją pociąć ale wtey pojawia się problem z altami.

Skomentuj Kuba Cancel Reply

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Wyrażam zgodę na przetwarzanie danych osobowych przez firmę GDAQ.PL Multimedia Sławomir Gdak. Zgoda może zostać anulowana w dowolnym momencie. Szczegółowe informacje dotyczące danych osobowych są umieszczone na stronie polityki prywatności.

Wszelkie prawa zastrzeżone. Zabrania się wykorzystywania jakichkolwiek treści bez zgody autora.

Slawek Gdaq

Chcesz, żebym pomógł Ci zwiększyć pozycje, ruch i przychody z Twojej strony?

Sprawdź moją propozycję pozycjonowania.