Zdjęcia na bloga, które podrasują jego wygląd! Optymalizacja obrazów na stronie www

Grafika ożywia stronę internetową, przyciągając uwagę użytkownika, wzbudzając jego zainteresowanie i zachęcając do dokonania konwersji (pożądanego przez nas działania) – przeczytania tekstu, ściągnięcia e-booka, wypełnienia ankiety. Dobór zdjęć, które zaangażują czytelników naszego bloga, jest rzeczą gustu, bo każdemu z nas podoba się coś innego. Znalezienie idealnej grafiki to dopiero połowa sukcesu. Następnym krokiem powinna być optymalizacja obrazów na stronie internetowej, czyli ich dostosowanie do poprawnego wyświetlania i indeksowania przez wyszukiwarki internetowe. Brzmi jak mega wyzwanie, ale w rzeczywistości sprowadza się do kilku, prostych czynności.

 

Skąd brać zdjęcia na bloga? Strony z darmową grafiką

Bank zdjęć to strona internetowa, z której można bezpłatnie pobrać lub kupić grafikę wektorową, rastrową, wysokiej jakości fotografie i zdjęcia. Na potrzeby bloga warto skorzystać z serwisów oferujących darmowe obrazy. Ja korzystam z dwóch źródeł:

  • pixabay.com,
  • pl.freepik.com.

Oba banki zdjęć obsługują wyszukiwarkę w języku polskim, więc bez większych problemów można znaleźć ładne zdjęcia na bloga. Oczywiście darmowe grafiki nie zawsze będą nam w pełni odpowiadały, więc sięgając po program do obróbki zdjęć online (polecam pixlr.com), mamy możliwość dodania napisów, ikon lub innych elementów, które ulepszą obraz. Aby samodzielnie stworzyć prostą infografikę, zachęcam, aby sprawdzić takie aplikacje jak:

  • Piktochart (piktochart.com),
  • Canva (canva.com).

Za ich pomocą można przygotować angażującą grafikę na stronę internetową.

 

Alternatywnym, ale niepolecanym przeze mnie bankiem zdjęć jest Google Image. W wyszukiwarce grafiki wyłącznie po zastosowaniu odpowiednich filtrów otrzymamy darmowe obrazy.

 

google images wyszukiwarka grafiki

 

Jeśli nie wybierzemy odpowiedniego prawa do użytkowania (np. fotografii oznaczonych do ponownego wykorzystania), pobierzemy grafikę, do której ktoś może posiadać prawa autorskie. Jej wykorzystanie narazi nas na przykre konsekwencje.

 

Optymalizacja obrazów na stronie internetowej

Gdy grafika na bloga zostanie wybrana, przechodzimy do jej optymalizacji pod SEO, zaczynając od przygotowania obrazu do przesłania na stronę, a kończąc na uzupełnieniu poszczególnych znaczników w kodzie HTML lub panelu administracyjnym WordPressa. Kolejne etapy SEO images uwzględniają następujące kwestie:

 

1. Wielkość i waga grafiki, czyli kompresja obrazu

Darmowe obrazy, szczególnie te o wysokiej rozdzielczości i jakości, będą posiadały dużą wagę, co niestety przekłada się na spadek wydajności bloga. Wielkie zdjęcia ładują się dłużej, obniżając tzw. pagespeed strony (czas ładowania), który z kolei często decyduje zarówno o pozycji w wynikach wyszukiwania, jak i utrzymaniu uwagi niecierpliwego użytkownika. Zanim prześlesz grafikę na serwer, zmniejsz jej rozmiar. Jak skompresować zdjęcie bez utraty jakości? Wystarczy sięgnąć po program do kompresji zdjęć online, np. tinyjpg.com.

 

Skompresowane obrazki na bloga nie powinny przekraczać 200 KB, chociaż im mniejsza waga pliku, tym lepiej. W szczególnych przypadkach możemy wgrać większe zdjęcie, jeśli jego zmniejszenie spowodowałoby, że stałoby się nieczytelne dla użytkowników. Warto także przesyłać obrazy z rozszerzeniem .png zamiast .jpg.

 

2. Nazwa pliku

Darmowe grafiki na bloga pobierane z banków zdjęć często mają bardzo dziwne tytuły, np. 89765-5ahdhdah.jpg. Przesyłając plik o takiej nazwie, nie szkodzimy jeszcze stronie, ale też nie zwiększamy szans na konwersję. Jeśli użytkownik pobierze obraz i zapisze go np. na pulpicie, po jakimś czasie nie będzie pamiętał, co kryło się pod randomowym wyrażeniem. Nazywając plik kot-na-fotelu.jpg, internauta od razu wie, co pobrał z naszego serwisu. Innym plusem stosowania indywidualnego nazewnictwa grafik jest to, że niektóre systemy CMS (np. WordPress) na jego podstawie podpowiadają tytuły i opisy alt w edytorze służącym do publikacji zdjęcia na blogu.

 

Nazwa pliku graficznego:

  • nie powinna zawierać polskich liter, znaków specjalnych,
  • musi być w miarę krótka,
  • a w roli separatora (odstępu oddzielającego kolejne wyrazy) warto zastosować zwykłą pauzę „-„.

 

3. Atrybut alt i tytuł obrazka

Wyszukiwarki internetowe to programy analizujące treść – kod strony i tekst. Nie są w stanie (jeszcze) rozpoznać, co znajduje się na obrazie, ale dzięki atrybutowi alt, można przekazać im, co prezentuje grafika. Elementem o mniejszym znaczeniu jest title, czyli tytuł pliku graficznego. Warto również dodać ten element, dzięki czemu zadbamy o pełną optymalizację grafiki pod SEO.

 

W kodzie HTML obrazek wraz z atrybutem alt i title wygląda następująco:

<img src=”http://domena/kot-na-fotelu.jpg” alt=”Śmieszny kot na fotelu” title=”Czarny kot na fotelu” />.

 

W wordpressowym edytorze zdjęć atrybut alt to Alternatywny tekst. Polecam uzupełniać go dla każdego obrazka, ponieważ dzięki temu znacznikowi zdjęcie ma szansę trafić do wyszukiwarki grafiki, skąd również możemy pozyskać czytelników.

 

Jak przygotować alt i title dla obrazka na blogu?

  • alt i title nie powinny być takie same,
  • oba znaczniki muszą odzwierciedlać to, co znajduje się na obrazku,
  • w opisie obrazka warto dodać słowa kluczowe,
  • opis i tytuł nie mogą być zbyt długie,
  • można używać w nich polskich znaków.

 

Grafika na blogu – must have, o który musisz zadbać!

optymalizacja obrazów seo imagesWyszukanie idealnego obrazka, a następnie jego optymalizacja może pochłaniać tyle samo czasu, co napisanie tekstu, jednak mimo to warto dodawać ładne i tematyczne grafiki na bloga. Polecam je do długich artykułów, które ubarwią i „odciążą”. Na stronie świetnie sprawdzają się także infografiki oraz schematy lub wykresy. Dbaj o jakość przesyłanych zdjęć, bo tzw. pikseloza nie jest mile widziana. I nie zapominaj o optymalizacji plików graficznych, by dobrze wypaść w ocenie algorytmów wyszukiwarek, a tym samym zyskać szansę, by trafić do nowych czytelników.