{"id":2672,"date":"2010-03-14T21:55:19","date_gmt":"2010-03-14T20:55:19","guid":{"rendered":"https:\/\/www.blog.gdaq.pl\/?p=2672"},"modified":"2018-04-12T20:04:47","modified_gmt":"2018-04-12T18:04:47","slug":"optymalizacja-grafiki-na-potrzeby-stron-www","status":"publish","type":"post","link":"https:\/\/gdaq.pl\/blog\/2010\/03\/optymalizacja-grafiki-na-potrzeby-stron-www\/","title":{"rendered":"Optymalizacja grafiki na potrzeby stron www"},"content":{"rendered":"
\n

Kiedy\u015b (przy \u0142\u0105czach modemowych) bardzo pilnowano, aby wielko\u015b\u0107 strony nie przekracza\u0142a 100kb jednak od kiedy sta\u0142e \u0142\u0105cza internetowe sta\u0142y si\u0119 w Polsce popularne wielu webmasterów nie zwraca na to uwagi i ponosi ich wyobra\u017ania. Nie mówi\u0119 o optymalizacji strony do 100kb :), ale w ogóle zwracaniu uwagi na wielko\u015b\u0107 strony. Graficy cz\u0119sto pchaj\u0105 w projekty bezmy\u015blnie technologie flash, która cz\u0119sto nic nie wnosi do projektu. W wielu stronach prze\u0142adowanie grafiki powoduje, i\u017c strona wygl\u0105da jak "choinka". Wa\u017cne, \u017ceby "co\u015b lata\u0142o", "si\u0119 dzia\u0142o" bo tak sobie za\u017cyczy\u0142 prezes firmy. Nie zwraca si\u0119 jednak uwagi na u\u017cyteczno\u015b\u0107 strony czy te\u017c optymalizacj\u0119 grafiki. Internauta wchodz\u0105c na nasz\u0105 stron\u0119 z regu\u0142y szuka informacji, a nie efektów specjalnych. Takie "bajery" cz\u0119sto tylko przeszkadzaj\u0105 w zapoznaniu si\u0119 z tre\u015bci\u0105 strony. Prosta, schludna, elegancka u\u017cyteczna i dobrze zoptymalizowana strona to podstawa. Strona chodzi szybko, nie trzeba instalowa\u0107 \u017cadnych dodatków, tego w\u0142a\u015bnie oczekuj\u0105 internauci. Co raz cz\u0119\u015bciej u\u017cytkownicy mobilni zaczynaj\u0105 "buszowa\u0107" po naszych stronach i warto te\u017c o nich pomy\u015ble\u0107, je\u015bli nie macie ochoty przygotowywa\u0107 ca\u0142ych stron pod urz\u0105dzenia mobilne to warto chocia\u017c zoptymalizowa\u0107 obecne. W ostatnich latach liczba u\u017cytkowników uzyskuj\u0105cych dost\u0119p do internetu za pomoc\u0105 telefonów komórkowych znacz\u0105co ro\u015bnie. Analitycy przewiduj\u0105, \u017ce sytuacja ta utrzyma si\u0119 przez kolejne lata i popularno\u015b\u0107 internetu na komórki b\u0119dzie ros\u0142a du\u017co szybciej ni\u017c w przypadku komputerów stacjonarnych.<\/em> \u017aród\u0142o: adwords-pl.blogspot.com<\/a> Nie chc\u0119 porusza\u0107 tutaj kwestii stron we flashu, które potrafi\u0105 zajmowa\u0107 po kilka mb i zanim si\u0119 za\u0142aduj\u0105 to internauta zd\u0105\u017cy zamkn\u0105\u0107 przegl\u0105dark\u0119. Chcia\u0142em zwróci\u0107 Twoj\u0105 uwag\u0119 na optymalizacj\u0119 plików graficznych jpg, gif, png, u\u017cywanie odpowiedniego formatu plików oraz wykorzystanie CSS.<\/p>\n

1. Optymalizacja poprzez wykorzystanie CSS<\/strong> Naturalnym sta\u0142o si\u0119 wykorzystywanie CSS do tworzenia warstwy wizualnej strony. Kiedy\u015b CSS wykorzystywano tylko, aby nada\u0107 czcionce odpowiedni\u0105 wielko\u015b\u0107 czy kolor. Teraz natomiast CSS decyduje o wygl\u0105dzie ca\u0142ej strony i jej uk\u0142adzie. Dzi\u0119ki mo\u017cliwo\u015bci powtarzania t\u0142a elementów graficznych, webmaster w celu stworzenia nag\u0142ówka gradientowego o szeroko\u015bci 990px wystarczy, \u017ce stworzy plik o szeroko\u015bci 1px i w CSS zaznaczy, \u017ce t\u0142o danego elementu html ma by\u0107 rozci\u0105gane na ca\u0142a szeroko\u015b\u0107. To pozwala zaoszcz\u0119dzi\u0107 kilka, kilkana\u015bcie kb. Na ile jest to mo\u017cliwe zamiast nag\u0142ówków graficznych nale\u017cy stosowa\u0107 ostylowane nag\u0142ówki heading (h1, h2, h3, h4, h5, h6). Menu warto zrobi\u0107 jako lista w html i nada\u0107 odpowiednie stylowanie podk\u0142adaj\u0105c w t\u0142o listy element graficzny i rozci\u0105gaj\u0105c go na ca\u0142\u0105 szeroko\u015b\u0107. Mo\u017cliwo\u015bci CSS s\u0105 du\u017ce i nale\u017cy wykorzystywa\u0107 je wsz\u0119dzie gdzie taka mo\u017cliwo\u015b\u0107 istnieje. Po pierwsze elementy ostylowane zajmuj\u0105 du\u017co mniej ni\u017c grafika, po drugie s\u0105 przyjazne pod SEO i po trzecie jakakolwiek ich zmiana b\u0119dzie dokonywana w kodzie, a nie programie graficznym (co jest znacznie \u0142atwiejsze i szybsze do zmiany). \u0141atwiej te\u017c jest zmienia\u0107 ca\u0142y uk\u0142ad strony wi\u0119c odrobina wytrwa\u0142o\u015bci przy walce z niereformowalnym IE mo\u017ce si\u0119 op\u0142aci\u0107. Ostatnio na blogu Shpyo przeczyta\u0142em o CSS Sprite<\/strong>. Nie wiedzie\u0107 czemu nigdy wcze\u015bniej o tym nie s\u0142ysza\u0142em mimo, \u017ce nie jest to jaka\u015b nowinka. Na czym polega CSS Sprite? \"cssWszystkie elementy graficzne, które s\u0105 przez nas najcz\u0119\u015bciej wykorzystywane na stronie \u0142\u0105czymy w jeden du\u017cy plik. Przyk\u0142adowo t\u0142o menu, buttony do przewijania stron…  a nast\u0119pnie tylko tym jednym plikiem operujemy w CSS przesuwaj\u0105c jego po\u0142o\u017cenie dla odpowiednich elementów na stronie. Mamy jeden du\u017cy plik graficzny i pokazujemy u\u017cytkownikom tylko jego cz\u0119\u015b\u0107 dla wybranych elementów html. W komentarzu do tego wpisu Cezary Lech poda\u0142 dobry przyk\u0142ad CSS Sprite Google (screen po prawej). Po pierwsze jeden du\u017cy plik zajmie znacznie mniej ni\u017c 40 ma\u0142ych. Po drugie wyszukiwarka wysy\u0142a tylko jedno zapytanie do serwera, a nie 40. Dodatkowo wydaje si\u0119, \u017ce na serwerze b\u0119dzie wi\u0119kszy porz\u0105dek z plikami graficznymi. Nie mia\u0142em jeszcze okazji wykorzysta\u0107 CSS Sprite jednak rozwi\u0105zanie wydaje si\u0119 bardzo ciekawe. Wi\u0119cej informacji na ten temat u Shpyo zapraszam te\u017c do dyskusji na ten temat.<\/p>\n

2. Dobór formatu pliku graficznego<\/strong> Najpopularniejsze formaty plików graficznych jakie s\u0105 wykorzystywane na stronach www to jpg, gif oraz png. Kiedy i jaki format stosowa\u0107?<\/strong> Obrazy proste zawieraj\u0105ce niewielk\u0105 ilo\u015b\u0107 kolorów, bez cieniowa\u0144, przej\u015b\u0107 tonalnych eksportuje si\u0119 do formatu gif. Wykonuj\u0105c eksport warto dobiera\u0107 jak najmniejsz\u0105 ilo\u015b\u0107 kolorów, oczywi\u015bcie nale\u017cy tak je dobra\u0107, aby jako\u015b\u0107 obrazu si\u0119 nie pogorszy\u0142a. \u015awietnym przyk\u0142adem grafik, które nale\u017cy eksportowa\u0107 do pliku gif s\u0105 np. loga na stronie. Logo zawiera z regu\u0142y 2 maksymalnie 3 kolory. W programie graficznym warto ustawi\u0107 powiedzmy 8-16 kolorów, aby obraz nie straci\u0142 na jako\u015bci i w porównaniu z formatem jpg uzyskamy o wiele lepsz\u0105 optymalizacj\u0119. Format gif obs\u0142uguje przezroczysto\u015b\u0107 grafik. Zupe\u0142nie odwrotnie jest przy eksportowaniu obrazów zawieraj\u0105cych, zdj\u0119cia, przej\u015bcia tonalne etc. Tutaj bezwzgl\u0119dnie nale\u017cy u\u017cy\u0107 formatu jpg z odpowiednim % kompresji. Z mojego do\u015bwiadczenia (PS, Fireworks) wynika, \u017ce przeci\u0119tnie optymalizacja 60-70% daje odpowiedni poziom kompresji i pozwala utrzyma\u0107 obraz na wystarczaj\u0105cej jako\u015bci. Zalecam jednak, aby do ka\u017cdego obrazu podchodzi\u0107 indywidualnie i kompresowa\u0107 pliki pojedy\u0144czo. Nie próbujcie zdj\u0119\u0107 czy innych skomplikowanych obrazów eksportowa\u0107 do formatu gif bo ich obj\u0119to\u015b\u0107 b\u0119dzie zdecydowanie wi\u0119ksza ni\u017c jpg. Trzecim u\u017cywanym formatem jest png aczkolwiek musz\u0119 przyzna\u0107, \u017ce korzystam z niego do\u015b\u0107 rzadko. Jako\u015b\u0107 png jest bardzo dobra jednak z regu\u0142y pliki te wa\u017c\u0105 wi\u0119cej ni\u017c jpg czy gif. Format png wykorzystuj\u0119 tylko i wy\u0142\u0105cznie w przypadku gdy potrzebuj\u0119 stworzy\u0107 grafik\u0119 zawieraj\u0105c\u0105 elementy przezroczyste. Format gif te\u017c obs\u0142uguje przezroczysto\u015bci jednak png radzi sobie zdecydowanie lepiej i jego kraw\u0119dzie s\u0105 o wiele g\u0142adsze. Na co dzie\u0144 korzystam z Macromedia Fireworksa i radzi on sobie bardzo dobrze z optymalizacj\u0105 grafiki. Je\u015bli chodzi o grafik\u0119 do stron www to rzek\u0142bym, \u017ce jest on wydajniejszy, wygodniejszy w pracy ni\u017c Photoshop.<\/p>\n

3. Optymalizacja plików graficznych<\/strong> Niby bana\u0142, a  jednak sam czasem \u0142api\u0119 si\u0119 na tym, \u017ce nie staram si\u0119 wykorzysta\u0107 w pe\u0142ni mo\u017cliwo\u015bci optymalizacji plików graficznych. Ostatnio wrzuca\u0142em kilka ikon na stron\u0119. Ikonki zmniejszy\u0142em do odpowiedniej wielko\u015bci (px) i zapisa\u0142em je domy\u015blnymi ustawieniami Fireworksa. Po chwili zorientowa\u0142em si\u0119, \u017ce te kilka prostych ikon zajmuje prawie 50kb. Wrzuci\u0142em je do fireworks'a i jeszcze raz zrobi\u0142em eksport, jednak tym razem dobieraj\u0105c odpowiednie ustawienia optymalizacji. Efekt to zej\u015bcie z 50kb do 7kb. Na jednej ze stron jakie mia\u0142em okazj\u0119 tworzy\u0107 znajdowa\u0142o si\u0119 bardzo du\u017co znaków firmowych zajmuj\u0105cych po kilka, kilkana\u015bcie kb. Jak si\u0119 okaza\u0142o ka\u017cdy z tych znaków mo\u017cna by\u0142o zoptymalizowa\u0107 2-3 krotnie co przy ilo\u015bci 100 sztuk zmniejszy\u0142o wag\u0119 o ponad 250kb. Pliki gif by\u0142y zapisane ze zbyt du\u017c\u0105 ilo\u015bci\u0105 kolorów. Tak jak pisa\u0142em w punkcie drugim, warto do ka\u017cdego obrazu oddzielnie dobiera\u0107 % kompresji czy ilo\u015b\u0107 kolorów, aby w pe\u0142ni wykorzysta\u0107 mo\u017cliwo\u015b\u0107 optymalizacji pliku. Jakie s\u0105 zalety przywi\u0105zywania uwagi do optymalizacji grafiki na stronach www?<\/strong> – oszcz\u0119dno\u015b\u0107 miejsca na serwerze oraz oszcz\u0119dno\u015b\u0107 transferu jaki generuj\u0105 pliki znacznie wp\u0142ynie na nasze roczne koszty utrzymania serwera, – oszcz\u0119dno\u015b\u0107 w wysy\u0142aniu przez stron\u0119 zapyta\u0144 do wyszukiwarki spowoduje szybsze wczytywanie si\u0119 stron co tak\u017ce mo\u017ce wp\u0142yn\u0105\u0107 na popraw\u0119 pozycji naszej strony w Google. Je\u015bli kompresja plików czy odpowiednie dobranie formatu nie wp\u0142ynie negatywnie na ich jako\u015b\u0107 to z pewno\u015bci\u0105 wyjdzie to nam tylko na dobre. Zwrócenie szczególnej uwagi na optymalizacje grafiki na potrzeby stron www polecam osobom, które prowadz\u0105 serwisy odwiedzane przez wielu internautów. Je\u015bli posiadamy stron\u0119, któr\u0105 dziennie odwiedza 100, 200, 300 osób nie robi to tak du\u017cej ró\u017cnicy. Je\u015bli jednak posiadamy serwis, który jest odwiedzany przez kilkana\u015bcie, kilkadziesi\u0105t tysi\u0119cy czy wi\u0119cej odbiorców, to te kilkaset kb zaoszcz\u0119dzone na kompresji grafiki pomo\u017ce nam zaoszcz\u0119dzi\u0107 rocznie sporo pieni\u0119dzy.<\/p>\n

Je\u015bli ten artyku\u0142 pomóg\u0142 Ci, masz co do niego jakie\u015b w\u0105tpliwo\u015bci lub pytania "Zostaw komentarz", a na pewno na niego odpowiem.<\/h5>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Kiedy\u015b (przy \u0142\u0105czach modemowych) bardzo pilnowano, aby wielko\u015b\u0107 strony nie przekracza\u0142a 100kb jednak od kiedy sta\u0142e \u0142\u0105cza internetowe sta\u0142y si\u0119 w Polsce popularne wielu webmasterów nie zwraca na to uwagi i ponosi ich wyobra\u017ania. Nie mówi\u0119 o optymalizacji strony do 100kb :), ale w ogóle zwracaniu uwagi na wielko\u015b\u0107 strony. Graficy cz\u0119sto pchaj\u0105 w projekty […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[12,13],"tags":[],"class_list":["post-2672","post","type-post","status-publish","format-standard","hentry","category-webdesign","category-usability"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/posts\/2672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/comments?post=2672"}],"version-history":[{"count":1,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/posts\/2672\/revisions"}],"predecessor-version":[{"id":11833,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/posts\/2672\/revisions\/11833"}],"wp:attachment":[{"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/media?parent=2672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/categories?post=2672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gdaq.pl\/blog\/wp-json\/wp\/v2\/tags?post=2672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}