Pozycjonowanie zdjęć, czyli optymalizacja grafik na stronę internetową

Niekiedy wydaje się nam, że dobra treść zdziała cuda, lecz często cuda dzieję się tam gdzie są obrazki, a nie słowa, dlatego warto skupić się na pozycjonowaniu zdjęć. Wiecie jak to robić?

Obrazy stanowią znaczącą część zasobów sieci internetowej - ładne zdjęcia dobrej jakości nie tylko przyciągają uwagę odbiorcy, są również czymś co interesuje mechanizmy Google, dlatego warto poświęcić czas na optymalizację zdjęć na stronie.

Wielkość obrazka na stronę internetową ma znaczenie

Pracę nad optymalizacją obrazków na stronę powinno się zacząć od sprawdzenia jakiej wielkości jest obraz, ponieważ wielkość zdjęć czy grafik zamieszczonych w serwisie ma bardzo duży wpływ na szybkość ładowania się strony, a to z kolei na jej pozycję w wyszukiwarce.
Wymiary zdjęcia podawane są zazwyczaj w pikselach (px), tak samo podaje się wielkość powierzchni na stronach internetowych – za maksymalną szerokość strony wyświetlanej na komputerach uważa się 1920px. Najczęściej tej szerokości są jedynie bannery, dlatego nie warto umieszczać tak dużych (lub większych) zdjęć w innych miejscach witryny. Co prawda, większość systemów CMS automatycznie dopasowuje grafikę do dostępnej powierzchni, lecz przesłanie większych zdjęć niż wyświetlane powoduje wolniejsze ładowanie się strony – jeżeli ktoś będzie miał starszy sprzęt czy wolniejsze łącze internetowe, może czekać wieczność, aż ten ogromny obrazek się wyświetli albo co gorsza opuści naszą stronę i poszuka innego miejsca gdzie może znaleźć podobne treści lub produkty.
Zmniejszenie zdjęcia (skalowanie) w znaczący sposób przyspieszy wczytywanie się strony. Należy pamiętać, że skalowanie powinno odbyć się bez utraty lub z jak najmniejszą utratą jakości zdjęcia.

Jak sprawdzić wielkość zdjęcia?

Jeżeli nie wiesz jakiej wielkości jest zdjęcie, które chcesz wrzucić do artykułu czy produktu na stronie internetowej, wystarczy kliknąć na nie prawym przyciskiem myszki: Właściwości>Szczegóły – w tym miejscu widoczna jest wysokość, szerokość (w pikselach) oraz rozdzielczość (dpi) zdjęcia. Można również najechać myszką na zdjęcie i poczekać, aż wyświetli się dymek zawierający informacje o typie pliku, wymiarach i wadze.

Jakiej rozdzielczości powinno być zdjęcie na stronie?

Rozdzielczość (dpi) obrazka odpowiada za jego jakość, dlatego nie powinna zejść poniżej 72dpi. Jeżeli chcemy zamieścić duże zdjęcie np. jako background, powinno się je „odchudzić” - niestety zmniejszenie rozdzielczości niesie za sobą konsekwencje nieczytelności obrazu.

Przyjmuje się, że zdjęcia nie powinny przekraczać 200KB. Do zmniejszenia wielkości lub rozdzielczości obrazu można użyć bezpłatnego programu Gimp lub płatnego Photoshop. W sieci można również znaleźć programy online do optymalizowania grafiki.

Rozszerzenie pliku – format JPEG czy PNG?

Najpopularniejszym formatem pliku jest JPG (JPEG), lecz coraz częściej można spotkać się z rekomendowanym eksportem do png np. grafiki tworzone na facebook. Dzieje się tak, ponieważ PNG podczas kompresji zdjęcia nie traci na jakości. Jednak nie wszystko co dobrze wygląda na FB, będzie dobre dla naszej strony internetowej, ponieważ zdjęcie w formacie JPG przekonwertowane do PNG będzie ważyło (KB) więcej niż zdjęcie w swoim oryginalnym formacie. Warto pamiętać, że PNG używamy do wszelkiego rodzaju grafik (wykresy i diagramy; logo; rysunki; zeskanowane dokumenty; pliki graficzne z małą ilością kolorów lub z gwałtownym przechodzeniem pomiędzy znacznie różniącymi się barwami; ikonki; gdy potrzebna jest przezroczystość), zaś rozszerzenie JPG lepiej sprawdzi się do wszelkiego rodzaju zdjęć.

Jak nazwać obrazek na stronę?

Kolejnym, lecz najważniejszym krokiem przed wrzuceniem zdjęcia na stronę jest odpowiednie nazwanie pliku, które umożliwi robotom Google odnalezienie i wyświetlenie zdjęcia w wyszukiwarce.

Opis alternatywny, czyli atrybut ALT

Tekst alternatywny alt pomaga w pozycjonowaniu zdjęcia, a co za tym idzie strony. Wytyczne dla ALT są podobne jak wytyczne nazwy obrazka, jednak można, a nawet powinno się używać w nich polskich znaków. Treść alt powinna być sensowna, czyli wyrażać to co jest widoczne na obrazku albo czynność, do której obrazek ma zachęcić np. Optymalizacja obrazków na stronę czy Naucz się optymalizacji zdjęć na stronę. Wrzucenie w każde zdjęcie tego samego opisu przesyconego słowami kluczowymi zostanie źle odebrane przez robota Google, dlatego tak ważne jest, aby nie upychać słów na siłę, przysiąść i odrobić to zadanie sumiennie.
Warto nie przesadzać z ilością słów zawartych w ALT, można ustalić sobie złoty przedział między 5 do 15 słów (nie za mało i nie za dużo).
Tytuł alternatywny dla pierwszego zdjęcia można ustawić taki sam jak tytuł artykułu czy produktu, kolejne zdjęcia powinny mieć inaczej brzmiące ALT.
Uzupełnienie tekstów alternatywnych przy zdjęciach produktów w sklepie internetowym jest najlepszą drogą do zaistnienia w Google Grafika.

Prawidłowo wstawione w kodzie strony zdjęcie z tekstem alternatywnym powinno wyglądać tak:

<img src="http://domena/optymalizowanie-zdjec.jpg" alt="Optymalizowanie zdjęć na stronę" />

lub tak:

<img alt="Optymalizowanie zdjęć na stronę" src="http://domena/optymalizowanie-zdjec.jpg" />

Obecnie większość stron posiada CMS (panel zarządzania treścią), który pozwala na uzupełnienie tekstu alternatywnego z poziomu panelu podczas wstawiania zdjęcia do artykułu lub podczas edycji zdjęcia w sklepie internetowym.

Atrybut title dla obrazka

Pracując w CMS można zobaczyć jeszcze jedną wartość, którą można pominąć jeśli wykonaliśmy dwie powyższe operacje, czyli prawidłowo nazwaliśmy obrazek i nadaliśmy zdjęciu ALT. Tytuł, czyli Title tag to tekst wyświetlany w dymku, który pojawia się po najechaniu kursorem myszki na obrazek. Celem title jest głównie użyteczność, więc można go zastosować jako opis zdjęcia, zachętę/instrukcję czy jako dodatkowy komentarz do zdjęcia (jeśli chcemy zaznaczyć kontekst) np.
Nazwa obrazka: Łabędzie nad jeziorem
ALT: Łabędzie nad jeziorem
Title: Zdjęcie łabędzi wykonane nad jeziorem Wigry podczas Imprezy X

Jeżeli zdecydujecie się na uzupełnienie również tego atrybutu, pamiętajcie, aby nie był identyczny z tekstem alternatywnym alt.

Podpisy pod zdjęciami

Wartościowe treści wzbogacone grafikami bronią się same, lecz można im pomóc w jeszcze jeden sposób – podpisując obrazki (oczywiście jeśli mamy taką możliwość). Użytkownicy Internetu bardzo często czytają opisy zdjęć, pomijając towarzyszący im tekst – dlatego infografiki są tak popularne, gdyż obrazują to, co normalnie trzeba przyswoić czytając np. ten artykuł. Skupienie uwagi odbiorców na zdjęciach i ich podpisach pozwala zatrzymać ich na dłużej na stronie, a to przekłada się na pozycję strony w wyszukiwarce – jest ona uznawana za bardziej wartościową od strony, na której użytkownik spędził kilka sekund.

Podsumowanie

Ciekawe zdjęcia wzbogacają stronę i ożywiają treść, lecz pamiętaj aby fotografie były jak najlepiej dopasowane do Twojej strony i artykułów jakie oferujesz. Ludzie bardzo często szukając odpowiedzi na interesujące ich zagadnienia wchodzą na stronę, z której obraz został zindeksowany przez Google grafika, dlatego warto zadbać o prawidłową optymalizację obrazków.