[huge_it_slider id='1']

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

Slawomir Gdak

Od 2009 prowadzi owego seo bloga i dzieli si─Ö swoj─ů wiedz─ů z zakresu seo.

Autor publikacji/produktów z zakresu seo m.in.: znanych list katalogów i profili, ebooków, szkoleń, artykułów w miesięczniku SEMspecialist.
Go┼Ťcinnie trener w Mie┼Ťcie Szkole┼ä oraz na Search Marketing Week.

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.

Tw├│j adres email nie zostanie opublikowany. Pola, kt├│rych wype┼énienie jest wymagane, s─ů oznaczone symbolem *

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.

Sławek Gdak Specjalista ds. seo
Je┼Ťli potrzebujesz mojej pomocy, masz jakiekolwiek pytanie wype┼énij poni┼╝szy formularz.

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 <a href="https://gdaq.pl/polityka-prywatnosci/" target="_blank">polityki prywatno┼Ťci</a>.