Optymalizacja grafiki na stronę internetową

Dobra optymalizacja grafiki na stronę internetową, może znacząco przyczynić się do wzrostu jej pozycji w wynikach wyszukiwania Google. Co więcej, odpowiednio skompresowane obrazki będą się szybciej ładowały, a co za tym idzie, nasza strona będzie bardziej przyjazna dla użytkowników i będzie przez nich chętniej odwiedzana.

Jest to bardzo ważny aspekt, zwłaszcza dla sklepów internetowych. Wolne ładowanie strony z produktami może sprawić, że nasi klienci nie będą czekać, i w konsekwencji skorzystają z oferty konkurencji. Dlatego warto zadbać o właściwe przygotowanie grafiki i sprawić, by nasza strona była bardziej przyjazna w obsłudze.

Optymalizacja grafiki na stronę internetową – od czego zacząć

Optymalizacja grafiki na stronę internetową zaczyna się w zasadzie już przy wyborze zdjęć. Warto zadbać o to, aby pasowały one do treści naszej strony lub artykułu. Część wejść na stronę możemy uzyskać poprzez wyszukiwarkę grafik. Owszem, Google nie rozpoznaje, co się znajduje na zdjęciach, ale możemy mu w tym pomóc, odpowiednio podpisując i nazywając pliki. Trafnie dobrana grafika może zdecydowanie przyczynić się do zwiększenia liczby odwiedzin na naszej stronie. Jest bardzo mało prawdopodobne, że użytkownik wpisujący do wyszukiwarki frazę „pielęgnacja drzewka bonsai” kliknie zdjęcie przedstawiające pierogi ruskie :-). Nieodpowiednio dobrana grafika nie zaszkodzi naszej stronie, oczywiście pod warunkiem, że nie upychamy na siłę niepasujących słów kluczowych. Oszukiwanie Google jeszcze nikomu na dobre nie wyszło. Zresztą marnujemy też potencjał, jaki niesie ze sobą właściwe dobranie słów kluczowych.

Odpowiednia nazwa pliku

Tak jak wcześniej wspomniałam należy pomóc Google w rozpoznawaniu co znajduje się na naszej grafice. W tym celu należy odpowiednio nazywać pliki. Załóżmy, że prowadzimy bloga o tematyce ogrodniczej i piszemy artykuł o pielęgnacji drzewka bonsai. W nagłówku chcemy wstawić poniższe zdjęcie:

Niepoprawnie byłoby nazwać powyższe zdjęcie np. 145.jpg lub pierogi-ruskie.jpg. Zamiast tego należałoby nazwać plik: pielegnacja-drzewka-bonsai.jpg. Zdjęcie będzie wtedy pozycjonowane na frazę „pielęgnacja drzewka bonsai”. Jest bardzo prawdopodobne, że osoba wpisująca do wyszukiwarki grafik frazę „pielęgnacja drzewka bonsai” klinie zdjęcie i przejdzie do naszego artykułu. Zauważ również w jaki sposób został nazwany plik. Słowa są oddzielone myślnikami i nie zawierają polskich znaków. Ponadto staraj się używać małych liter. W nazwie można użyć cyfr.

Atrybut alt

Do każdej grafiki należy dodać atrybut alt zawierający tekst, który wyświetla się w przypadku niewczytania zdjęć. Taka sytuacja może mieć miejsce wtedy, kiedy użytkownik wyłączył w przeglądarce wyświetlanie obrazków lub korzysta z czytnika ekranowego dla osób niewidomych lub słabo widzących. Obrazki mogą się także nie wyświetlić, kiedy podamy do nich złą ścieżkę. W nazwie grafik warto umieścić słowa kluczowe, jednak nie należy robić tego na siłę. Najlepiej jest w sposób naturalny wpleść słowa kluczowe. Poniżej kod umieszczający powyższe zdjęcie na stronie:

<img src="img/pielegnacja-drzewka-bonsai.jpg" alt="Pielęgnacja drzewka bonsai">

Tekst przeznaczony jest nie tylko dla Google, ale także dla użytkowników. Dlatego warto zadbać o poprawne formatowanie oraz polskie znaki. Jeśli wstawiasz grafikę poprzez panel administracyjny WordPress, Joomla, Drupal, wtedy atrybut alt możesz dopisać podczas dodawania zdjęcia.

Tytuł

Tytuł zdjęcia w formie dymka wyświetla się po najechaniu na nie kursorem myszy. Aby to uzyskać należy do znacznika z grafiką dodać atrybut title:

<img src="img/pielegnacja-drzewka-bonsai.jpg" alt="Pielęgnacja drzewka bonsai" title="Jak dbać o drzewko bonsai">

Tytuł, tak jak atrybut alt powinien być czytelny nie tylko dla wyszukiwarek, ale także przede wszystkim dla użytkowników .

Właściwy rozmiar

Optymalizacja grafiki na stronę internetową to nie tylko odpowiednie jej nazwanie. Ważny jest także rozmiar użytych zdjęć. Użyta grafika na stronie internetowej nie powinna być skalowana przez przeglądarki. Jeśli wstawiamy obrazek, który będzie prezentowany na stronie w szerokości 300px, to plik z obrazkiem również powinien mieć nie więcej niż 300px szerokości. Jeśli wrzucimy na serwer obrazek o szerokości 3000px, to sprawimy, że przeglądarka będzie musiała go przeskalować do 300px i spowolnimy przez to naszą stronę. Aspektem tym nie musimy się martwić tworząc wpisy w WordPressie (lub w innych popularnych CMS), ponieważ obrazki są już automatycznie przycinane do kilku rozmiarów. Jednak przesyłając za duże pliki na serwer, niepotrzebnie zmniejszamy jego pojemność.

Bezstratna kompresja

Przyjęte jest, że pojedynczy plik z grafiką użytą na stronie www nie  powinien przekraczać 100KB. Jest to tylko umowna granica i dozwolone jest użycie grafiki o większej pojemności. Jednak należy pamiętać, że im więcej będzie zdjęć o dużej pojemności, tym nasza stronie wolniej się będzie ładowała, przez co możemy zniechęcić ludzi do odwiedzania nas. Nie należy również popadać w skrajność i używać zdjęć może i o małej pojemności, ale za to w słabej rozdzielczości, ponieważ wtedy nasza strona będzie mało atrakcyjna wizualnie. Powinniśmy znaleźć złoty środek. Użyta grafika powinna być w miarę lekka, ale i w miarę czytelna.

Bardzo pomocnym narzędziem jest kompresor online  https://tinyjpg.com. Dzięki TinyJPG możemy poddać grafikę w formacie zarówno jpg, jak i png kompresji bezstratnej. Często pojemność jednego pliku jest zmniejszana nawet o ponad 80%! Czasem zdarza mi się, że TinyJPG zmniejsza pojemność plików nawet o 95%. Obecnie każda użyta przeze mnie grafika na stronę www jest poddana kompresji poprzez TinyJPG.

Odpowiedni format

Najczęściej na strony internetowe wstawia się grafikę w formacie PNG, JPG, GIF oraz SVG. Bardzo ważne jest, aby używać odpowiedniego formatu, gdyż pozwala to uzyskać kompromis pomiędzy wielkością pliku, a jego jakością.

Format JPG zyskał największą popularność. Stosuje on kompresję stratną. Jego zaletą jest to, że pliki w formacie JPG można dość znacznie skompresować, jednak niesie to za sobą znaczne pogorszenie jakości. Oczywiście, jeśli zdjęcie posiada małą ilość detali oraz mały kontrast, to pogorszenie jakości będzie mało zauważalne. Format ten idealnie nadaje się do fotografii o płynnych przejściach między kolorami (np. krajobrazy).

Pliki w formacie PNG są w lepszej jakości niż JPG, ale nie można ich skompresować tak jak JPG. Format ten obsługuje przezroczystość oraz  ostre krawędzie, przez co idealnie nadaje się na ikony oraz loga, które muszą być wysokiej jakości. Należy wiedzieć, że niektóre starsze przeglądarki np. IE6 nie obsługują tego formatu. Do fotografii o dużej rozpiętości barw lepiej użyć pliku JPG, ze względu na mniejszą pojemność pliku.

Format GIF posiada małą paletę kolorów, a pliki w zapisane w tym formacie mają małą pojemność. GIF tak jak PNG obsługuje przezroczystość. Niestety pliki w tym formacie są słabej jakości. Format GIF idealnie nadaje się do prostych obrazków lub ikon i wszędzie tam, gdzie nie  zależy nam na wysokiej jakości. Często do prostych elementów lepiej jest użyć GIF zamiast PNG, gdyż zyskujemy na zmniejszeniu objętości.

Format SVG służy do zapisu grafiki wektorowej. Niestety nie jest obsługiwany przez niektóre urządzenia mobilne. Format ten sprawdzi się, gdy zależy nam na ostrych krawędziach oraz wysokiej jakości na dużych wyświetlaczach.

Optymalizacja grafiki na stronę internetową, to także odpowiednie jej umiejscowienie

Postaraj się umieszczać zdjęcia w sąsiedztwie tekstu zawierającego te same kluczowe frazy. Dzięki temu zwiększysz szanse na pojawienie się zdjęcia w wynikach wyszukiwania grafik. Ponadto Twój artykuł również może osiągnąć wyższą pozycję.

Optymalizacja grafiki na stronę internetową – podsumowanie

Jak widzisz, optymalizacja grafiki na stronę internetową nie jest trudna, a można osiągnąć niewymierne korzyści. Odpowiednia waga oraz rozmiar zdjęć mogą znacząco przyspieszyć naszą stronę. Dzięki temu strona osiągnie wyższą pozycję w Google, a my zyskamy nowych odwiedzających.