Blog

Optymalizacja obrazków na strony internetowe

Optymalizacja obrazków na strony internetowe

Nieodłącznym elementem każdego audytu on-site jest punkt: „optymalizacja obrazków”. O dostosowanie grafik na potrzeby stron www warto dbać od samego początku. Przyniesie to wymierne korzyści pozwalając zaoszczędzać czas i środki (także finansowe) w przyszłości. Obrazy, animowane GIFy lub filmy to jeden z ważniejszych elementów stron internetowych. Nie chodzi tylko o to, że użytkownik lubi ładne zdjęcia. Witryny bogate w różne treści będą pojawiać się na wyższych pozycjach. Do tego, dobrze zoptymalizowane obrazy będą generować ruch organiczny z wyszukiwarek grafiki i nie będą ograniczać szybkości wczytywania strony. Choć rozpoznawanie zawartości zdjęcia to pieśń przyszłości, to dzięki dobremu opisowi obrazu wyszukiwarka bez problemu zidentyfikuje temat naszej strony. Należy jednak zadbać o parę ważnych aspektów technicznych, związanych nie tylko z opisami zdjęć, ale także ich rozmiarem – równie ważnym dla robotów indeksujących.

Optymalizacja obrazów na stronach powinna obejmować przede wszystkim 2 główne aspekty:

  1. Optymalizacja wagi, rozmiaru i formatu obrazków – na straży optymalizacji szybkości ładowania strony

    Najprostsze zasady rządzą technicznymi aspektami obrazów. Dla wyszukiwarki nie jest ważna zawartość ponieważ nie jest ona jeszcze na tyle sprytna, aby odczytać co przedstawia dana grafika. Opiera ona swoją ocenę na dostosowania danego pliku. W związku z tym, należy przygotować obrazy:

    • odpowiedniej wadze (rozmiar pliku graficznego w kb). Tutaj zaleca się aby jego rozmiar był poniżej, lub niewiele powyżej, 300 kilobajtów. Ta magiczna granica jest obecna w wielu miejscach w Internecie – to maksymalny rozmiar formatu MMS w większości sieci lub (do niedawna) zdjęcia wysłanego za pośrednictwem Facebook Messenger. Takie grafiki są używane z bardzo prostego powodu. Jednym z najważniejszych czynników wpływających na pozycję w wynikach wyszukiwania jest szybkość ładowania strony. Zbyt „ciężkie” witryny ładują się powoli, przez przez co mają większy współczynnik odrzuceń. Optymalizacja obrazów jest więc bardzo ważna! Co więcej szybkość strony to ważny czynnik rankingowy więc jeśli o nią nie zadbamy, wyszukiwarka po prostu zrzuci naszą piękną, jednak masywną witrynę na dalsze pozycje. Jednocześnie, nie możemy sobie pozwolić na złą jakość, bo to na ogół denerwuje użytkowników. Równowaga to klucz w tym przypadku , ale bądźmy szczerzy 300kb to dość dużo. Odnosząc się jeszcze do oszczędności. Gdy mamy do czynienia z dużymi portalami z jeszcze większą ilością grafik (sklepy internetowe) ograniczenie rozmiaru grafik pozwala często na zmniejszenie opłat za serwer, aczkolwiek po kompresji można zmniejszyć wagę nawet do 75%.
    • odpowiedniej rozdzielczości (wysokość i szerokość). Nie ma tu uniwersalnych wartości, ponieważ wielkości różnią się w zależności od miejsca umieszczenia danego pliku na stronie i wielkości elementów w danym szablonie, każda strona może wykorzystywać inne wymiary grafik). Ważne jest, jednak aby w okienku o szerokości 150x150px znajdował się plik o takiej własnie rozdzielczości, a nie plik z rozdzielczości 1920x1200px – pozwoli to na szybsze wczytywanie strony. Z rozdzielczością należy postępować również tak, aby zbalansować w taki sposób, aby pasowała do rozmiaru strony na róznych urządzeniach. Generalnie, grafiki w Internecie lubią raczej „trzycyfrowe na trzycyfrowe” liczby pikseli.
    • typ pliku (JPG, PNG czy GIF?). Trzeci czynnik, który musimy zoptymalizować, czyli format pliku, zasadniczo wpływa on na wielkość i jakość obrazu. 3 podstawowe formaty, czyli JPG, PNG i GIF, mają różne zastosowania. GIF, który ma ubogą paletę barw, służy do ikon i animacji. JPG to najpopularniejszy format, który może przedstawiać duże rozdzielczości przy małym rozmiarze. Wielkość palety barw nie ma w nim znaczenia, więc idealnie nadaje się do zdjęć. PNG natomiast przenosi przezroczystości, jego rozmiar rośnie wraz z ilością kolorów, jednak kompresowany jest bezstratnie, więc służy głównie bardziej skomplikowanym grafikom w dobrej jakości. np. ikonom czy logotypom, jednak nie zdjęciom.
  2. Optymalizacja danych – nazwa, tekst alternatywny i tytuł obrazów – wskaż temat strony robotom

    Zawartość pliku graficznego to sprawa drugorzędna dla wyszukiwarki, która i tak nie wie, czy dany obraz to zdjęcie, infografika czy pusta kartka. Choć dla użytkownika to jedyny widoczny element, to wyszukiwarka dostrzega kompletnie inne parametry. Podstawowymi danymi zbieranymi przez robota indeksującego będą:

    • nazwa pliku graficznego; W nazwie pliku nie używamy znaków specjalnych, a zamiast spacji wykorzystujemy separator „-” lub „_”, w zależności od osobistych przekonań (ja stosuje podkreślenia, myślnik stosuje standardowo w linkach do podstron). Trzymam się także zasady, aby w nazwie pliku znalazł się opis tego co jest na zdjęciu.
    • atrybut alt; Coś dla niewidomych… (bo tak to było, za czasów mojej edukacji). Nie oszukujmy się, tutaj można zamieścić słowo kluczowe, a na podstronach docelowych nawet trzeba! Jest to miejsce na wrzucenie „niewygodnych fraz”, w taki sposób, aby nie zniechęcały użytkowników do czytania treści (to wszytko o altach).
    • tytuły/podpis; tutaj także można dodać słowo kluczowe, ale w sposób bardziej naturalny bo jest ono wyświetlane po najechaniu kursorem na grafikę. Ja osobiście, nie do każdego obrazka dodaje tytuł, z racji tego, że po prostu przeszkadza mi jego wyświetlanie się, gdy mamy kilka obrazków w niedalekich odległościach (jeśli więc już go dodajesz zadbaj o to, aby był możliwie krótki). Jeśli komuś zależy na podpisaniu obrazka proponuje jednak dodać caption pod nim, zamiast wdrażać tytuły dla każdej grafiki (być może bardziej doświadczeni koledzy i koleżanki napiszą, że nie wykorzystuje jego potencjału, aczkolwiek nie zauważyłem także zbawiennego wpływu jego dodania na wzrosty pozycji), natomiast opis pod obrazkiem zwiększy nasycenie słowem kluczowym podstronę i będzie w moim uznaniu bardziej naturalny i mniej „przeszkadzający”.
  3. Podsumowując drugi punkt: Zadanie do wykonania jest proste – należy uzupełnić wszystkie trzy (co najmniej dwa pierwsze) parametry, używając krótkich i precyzyjnych sformułowań, które nie będą identyczne i w jakiś sposób opiszą zawartość strony (także obrazka bo przecież obrazki dobieramy do tematyki strony). Oczywiście nie należy upychać fraz kluczowych lub bardzo sztucznie nadmuchiwać tych elementów (choć nie ukrywam, że mi osobiście się to czasami zdarzy i jeszcze nigdy mi to nie zaszkodziło).

Optymalizacja obrazów ma jedną, wielką zaletę. Jest bardzo prosta, a jednocześnie bardzo efektywna. Choć żmudność wykonania ręcznie tej pracy może przytłoczyć, to z pomocą idą liczne wtyczki i aplikacje. Jest to jedna z podstawowych czynności, które należy wykonać w trakcie optymalizacji strony. Może od niej zależeć zarówno pozycja w wynikach wyszukiwania, jak i ruch organiczny generowany, nieraz w zaskakujący sposób, z graficznego long taila. Warto poświęcić temu trochę uwagi!

Dodatkowym usprawnieniem indeksowania naszej witryny może być osobna mapa XML dla obrazów lub dołączenie informacji o obrazkach do wdrożonej sitemap’y. Warto wykorzystać tą możliwość, jeśli na stronie znajduje się dużo zdjęć. Do tego, można zastosować mikrodane, aby wspomóc przypisywanie obrazów do kategorii, jednak to wymaga wczytania się w materiały, które udostępnia Google na ten temat.

Myślę, że w kwestii optymalizacji obrazków pod SEO to wszytko. Mam nadzieję, że udało mi się przekazać garść przydatnych informacji, które wykorzystacie na swoich stronach.

O autorze

Paweł Kuczera

Od 2014 roku w branży e-marketingu. Swoją pracę zaczynałem od stażu w agencji interaktywnej z Bytomia. Jestem samozwańczym specjalistą SEO/SEM z praktycznym podejściem do prowadzonych projektów, indywidualnymi poglądami, kilkoma certyfikatami, oraz bagażem doświadczeń. Chętnie podzielę się wiedzą zdobytą w praktyce - na podstawie własnych testów i obserwacji. Współpracuje z mniejszymi firmami oraz prowadzę działania w zakresie SEO, jako podwykonawca dla większej agencji. Cenie przyjaciół oraz niezależność. Założyłem i pracuje nad marką SearchNow.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Komentarze: 0

Brak komentarzy, bądź pierwszy!