Optymalizacja obrazków – jak jest ważna w pozycjonowaniu?

Optymalizacja obrazków

Strona internetowa to wizytówka każdej firmy oraz prezentacja jej oferty. Często jest miejscem, w którym następuje pierwsze spotkanie z potencjalnym klientem lub jest uzupełnieniem już wcześniej zasłyszanych informacji. Dlatego dobra strona www powinna być nie tylko przejrzysta i intuicyjna, ale również skutecznie przyciągać uwagę. W tym celu idealnie sprawdzają się dopasowane tematycznie obrazki. Optymalnie dobrane zdjęcie może być jednocześnie reklamą, pierwszą prezentacją oferty, jak również wzbudzać ciekawość klienta i zachęcać go do zagłębienia się w treść na naszej stronie.


Skąd wziąć dobre zdjęcia?

Divider

Najlepsze zdjęcia na stronę to te, które wykonaliśmy sami lub które ktoś wykonał dla fotograf - wiemy wtedy na pewno, że przedstawiają nasz produkt, nie naruszają niczyich praw autorskich, są oryginalne i wpisują się w koncepcję strony.

Jednak zwłaszcza na początku działalności, młodzi przedsiębiorcy nie posiadają jeszcze dobrych zdjęć własnych produktów czy usług, a zlecenie odpowiedniej sesji profesjonalistom to niejednokrotnie spory wydatek. Dlatego początkowo warto zapoznać się z ofertą banków zdjęć.

Za prawo do wykorzystania fotografii z renomowanych banków zdjęć będziemy musieli odpowiednio zapłacić, jednak warto zapoznać się z ofertą kilku obecnie dostępnych darmowych stocków na rynku.


Darmowe banki zdjęć:

- Pixabay

- Unsplash

- Splitshire

Płatne banki zdjęć:

- Fotolia

- Shutterstock

Korzystanie z banków zdjęć, zwłaszcza tych darmowych, ma jedną zasadniczą wadę - obrazki, które wybierzemy, może pobrać każdy, więc istnieje spora szansa, że są one już wykorzystane na domenie zbliżonej tematycznie bądź na stronie konkurenta. Często jakość zdjęć też nie jest najwyższych lotów.

Dlatego banki zdjęć to dobry pomysł na start, warto jednak w miarę rozwoju naszej strony pokusić się o oryginalną, dedykowaną sesję lub przygotować materiały samemu.


Nazwa zdjęcia a pozycjonowanie w Google

Divider

Po wpisaniu frazy kluczowej w wyszukiwarkę oprócz listy stron, których zawartość zawiera szukaną frazę, możemy odnaleźć również zdjęcia o wpisanej tematyce. Niestety, roboty Google nie posiadają jeszcze umiejętności odczytywania treści z obrazów i podczas przeszukiwania sieci kierują się nazwami załadowanych w nią plików. Dlatego tak istotne są przyjazne nazwy plików graficznych, które chcemy załadować na naszą stronę.

Sieć pełna jest zdjęć o standardowych nazwach rozpoczynających się od IMG czy DCIM. Nazwanie zdjęcia PLIK1 też nie rozwiąże sprawy. Jeżeli chcemy, żeby Google eksponował nasz obraz po wpisaniu frazy na przykład "zielone balony urodzinowe", to w ten sposób powinniśmy nazwać choć jedno zdjęcie, czyli – zielone-balony-urodzinowe.jpg.

Najlepszym sposobem na polepszenie wyników wejść na stronę bezpośrednio z Google jest nazwanie plików graficznych za pomocą fraz, które wiążą się z tematyką contentu domeny. Ważne, aby nazwa była możliwie najkrótsza, nie zawierała polskich znaków, a zamiast spacji trzeba użyć separatora "-".


Atrybuty ALT i TITLE

Divider

Nie od dzisiaj wiadomo, że marketing internetowy to główny nośnik reklamowy dla firm i przedsiębiorstw, dlatego tak dużą wagę przywiązuje się do zawartości strony. Treść jest istotna, ale to zdjęcia i grafiki przyciągają uwagę szybciej oraz skuteczniej.

Długie fragmenty tekstu można z powodzeniem przeplatać obrazkami, infografikami czy krótkimi animacjami (tzw. gify), ale aby klient mógł ją zobaczyć, Google musi umieć ją wyszukać. Stąd wcześniej wspomniana odpowiednia nazwa pliku, który zamieszczamy na stronie.

Co jednak w wypadku, gdy plik z jakiegoś powodu się nie wczytuje? Z pomocą przychodzi nam atrybut ALT.


Divider

Atrybut ALT swoją nazwę wziął z pełnionej funkcji, czyli alternatywnego opisu. W przypadku, gdy z różnych powodów strona nie może załadować grafiki, w ramce pojawi się jego alternatywny opis, o ile wcześniej ustawiliśmy takowy w kodzie źródłowym strony.

Linia kodu będzie wyglądała następująco:

< img src="adres obrazka" alt="Krótki opis tego, co znajduje się na grafice" / > (bez spacji między nawiasami)

Czyli na przykład: < img src="adres obrazka" alt="Czarna skórzana kurtka pilotka z kołnierzem" / > (bez spacji między nawiasami)


Dlaczego warto używać atrybutu ALT?

Divider

Po pierwsze, roboty Google odnajdą naszą stronę, sczytując słowa kluczowe zawarte w opisie alternatywnym, nawet gdy obraz nie wyświetla się poprawnie.

Po drugie, po wejściu na stronę przy braku obrazka, klient zobaczy opis alternatywny, więc będzie wiedział, co się na nim znajduje. Po trzecie, atrybut ALT jest wykorzystywany w oprogramowaniu dla osób niewidomych i niedowidzących - jest odczytywany jako integralna część strony. Dlatego też użycie atrybutu ALT jest ważne zarówno dla pozycjonowania strony, jak i UX.

Ten atrybut gwarantuje więc nie tylko wyświetlenie się naszej strony podczas przejściowych problemów z zamieszczoną grafiką, ale użycie za każdym razem innego opisu alternatywnego przy grafikach zbliżonych do siebie tematycznie. Dzięki temu możemy zwiększyć ilość fraz kluczowych, na które wyświetla się w Google pozycjonowana domena.


Rola atrybutu TITLE

Divider

Atrybut TITLE to "kropka nad i" w tworzeniu dobrych obrazków na stronę www. Pozwala na tworzenie tekstowych dymków, które wyświetlają się po najechaniu na element graficzny. Ten atrybut można przypisać do każdego fragmentu kodu HTML, jednak najczęściej dokleja się go do linków oraz właśnie do zdjęć.

W uzyskanym dymku, dzięki dodaniu atrybutu TITLE, możemy zamieścić na przykład szerszy opis grafiki, dodatkowe informacje z nią związane lub odnośnik kierujący odwiedzających na kolejną podstronę, w przypadku, gdy grafika ma pełnić funkcję banneru.

Warto używać obu tych atrybutów. Mamy wtedy możliwość dodania dodatkowych fraz kluczowych związanych z naszymi obrazkami. Należy też pamiętać o tym, żeby treść obu atrybutów stanowiła logiczną całość, a nie na przykład szereg dowolnie wybranych fraz kluczowych następujących po sobie.


Odpowiedni rozmiar zdjęć i grafik dodawanych na stronę

Divider

Podczas tworzenia zdjęć, jednym z ważniejszych parametrów, na które zwracamy uwagę, jest rozdzielczość. Im większy rozmiar, tym lepiej.

O ile duża rozdzielczość jest istotna podczas wykonywania przedruków, bannerów czy plakatów, o tyle dla zdjęć zamieszczanych na stronach internetowych decydująca jest odpowiednia wielkość i waga grafiki, którą zamierzamy na stronie umieścić.


Divider

Do podstawowych wad wrzucania na stronę dużych obrazów zaliczyć należy takie problemy, jak:

  • długi czas ładowania strony - duży obraz zajmuje dużo miejsca, a to spowalnia proces ładowania się strony. W związku z czym odwiedzający użytkownik musi poczekać dodatkowe kilka sekund na poprawne jej wyświetlenie. Często wpływa to na zwiększony współczynnik odrzuceń.
  • spowolnienie działania strony zostanie odnotowane przez algorytm rankingowy Google - dłuższe wczytywanie obniża pozycje domeny w serpach.
  • duże zdjęcia są problematyczne podczas przeglądania strony na smartfonach i tabletach - Jeśli nie posiadamy wersji light na aplikacje mobilne, duże grafiki na stronie oryginalnej mogą sprawiać, że będzie się ona rozjeżdżać, a przez to może być zupełnie nieczytelna.

Nawet najlepszej jakości zdjęcie niewiele pomoże, jeśli nasza strona będzie nieczytelna lub Google wyświetli ją daleko w swoim rankingu.


Jaki powinien być prawidłowy rozmiar zdjęć?

Divider

Przyjmuje się, że na potrzeby witryn internetowych w zupełności wystarczają materiały graficzne o wadze 100KB. Nie jest to sztywna rama, ale może stanowić pewien punkt odniesienia dla zdjęć, które chcemy zamieścić. Aby zmniejszyć rozmiar wrzucanych grafik, możemy skorzystać z kilku ogólnodostępnych narzędzi, na przykład TinyJPG lub TinyPNG.

Oczywiście, jeśli posługujemy się profesjonalnym programem graficznym, takim jak Photoshop, tam też znajdziemy podobne funkcje.


Odpowiedni format plików

Divider

Na stronach internetowych możemy spotkać najczęściej pliki graficzne o trzech rozszerzeniach:

JPEG (nazwa.jpg) - obecnie najbardziej popularny. Zdjęcia w tym formacie można poddać znacznej kompresji, niestety tracą one przy tym mocno na jakości. Warto jednak korzystać z "jotpegów", ponieważ są to pliki o bardzo małej wadze.

GIF (nazwa.gif) - to rozszerzenie jest zwykle stosowane do prostych grafik i krótkich animacji. Często kompresja obniża rozdzielczość obrazu do 256 kolorów, przez co tracimy sporo na jakości, dlatego nie jest to format zalecany do zdjęć.

PNG (nazwa.png) - coraz częściej spotykany format pliku, stworzony głównie z myślą właśnie o stronach WWW. Charakteryzuje go bezstratna kompresja, dzięki czemu jakościowo zmniejszony obraz nie odbiega od oryginału. Wadą jednak jest to, że zapis i odczyt plików w tym formacie mocno obciąża procesor, co może spowalniać otwieranie strony.

WEBP (nazwa.webp) - nowy format graficzny rozwijany przez Google. Idealny do optymalizacji zdjęć na strony www. Łączy zalety plików GIF i PNG jednocześnie zajmując mniej miejsca niż JPEG. Niestety, WEBP ma podstawową wadę - w tej chwili jedynie przeglądarki Google Chrome i Opera obsługują ten typ plików.


Divider

Jeśli chodzi o wymiary grafik dodawanych na stronę, to pomimo faktu, iż większość CMS-ów potrafi samodzielnie skalować zbyt duże grafiki (np. za pomocą wtyczek), warto jednak zrobić to samemu przed uploadem. Dzięki temu zdjęcia będą szybciej się ładować, co zaowocuje wyższym rankingiem w wyszukiwarce. Ogólna jakość zdjęcia będzie wyższa, gdyż CMS skaluje zdjęcia "na bieżąco", a przy tym może gorzej odwzorowywać kolory. Czasem optymalizacja zdjęć za pomocą wtyczek sprawia, że zdjęcia nie są akceptowane przez klienta. A jeżeli wcześniej nie zrobiło się backupu grafik, mogą być duże problemy.

Z kolei dołączenie zdjęcia zbyt małego może skończyć się katastrofą, gdy CMS będzie próbował wyskalować je do większych rozmiarów. W dobie 4K FULL HD z dwojga złego lepiej jednak dodać zdjęcie zbyt duże niż zbyt małe.

PODSUMOWANIE


Podsumowując, zdjęcia dostępne na stronie są ważne w procesie pozycjonowania oraz sprzedaży. Mają znaczący wpływ na pozycje strony w wyszukiwarce, co przekłada się na ilość odwiedzin, dlatego warto umieszczać je mądrze.

Olga Matuszak

W świece SEO i pozycjonowania od 2017r. Można powiedzieć, że content marketing mam we krwi. Gdy nie pozycjonuję w Lokomotywie zaczytuję się w komiksach i oglądam za dużo seriali animowanych :)

10 Comments

  1. Sabina pisze:

    Mało kto o tym pamięta, a to bardzo ważne. Po pierwsze pilnujemy nazwy zdjęcia, ponieważ będzie widoczna w kodzie strony. Marto plik ze zdjęciem nazwać frazą. 🙂 Kolejna kwestia to alt, który ma bardzo duży wpływ na pozycjonowanie. Wiele stron czerpie ogromne korzyści właśnie dzięki wyszukiwanym zdjęciom. Obrazek musi być tez odpowiednio skonwertowany, aby szybko sie ładował i nie zabierał zbyt dużo miejsca, jednocześnie dbamy o jego jakość. 🙂

  2. Nie wiedzialam, ze atrybut alt moze byc taki ważny.. 🙂 trzeba wyrobić sobie nowy nawyk 🙂

  3. Andrzej pisze:

    Bardzo kompleksowy artykuł. Wydaje mi się, że po przeczytaniu już nie ma się wątpliwości jak ważne, jest zadbanie o grafiki na stronie. Zastanawia mnie trochę kwestia powtarzalności grafik, gdy korzysta się z darmowych banków zdjęć.

    • Olga pisze:

      Powtarzalność grafik w przypadku pobierania z darmowych banków nie jest szczególnie szkodliwa – po prostu trzeba się liczyć z tym, że setki tysięcy innych stron na pewno też z nich skorzystała 😉

  4. Largo pisze:

    A nie macie czasami wrażenie ,że na zdjęcia z szuterstoka to już ludzie reagują filtrem poznawczym ?

    • Olga pisze:

      Ci bardziej wtajemniczeni na pewno tak 😉 Jak pisaliśmy, najlepszą opcją jest tworzenie własnych zdjęć, ponieważ są najbardziej unikatowe, ale nie każdego na to stać (nie tylko finansowo), więc pozostają banki zdjęć. Warto się jednak trochę pomęczyć i poszukać tych mniej oklepanych, aby choć trochę zapewnić sobie unikalność 😉

Dodaj komentarz

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