Optymalizacja SEO obrazów a Google Grafika – poradnik

Optymalizacja SEO obrazów a Google Grafika

Myśląc o zwiększaniu ruchu na stronie internetowej, najczęściej skupiamy się na pozycjach witryny w rankingu stron internetowych oraz na wszelkich działaniach zewnętrznych – AdWords, social media itp.

Pomijając niestety pewną bardzo ważną kwestię.

Jeżeli Twój serwis ma dużą liczbę ciekawych zdjęć, to możesz zyskać dodatkowy ruch poprzez ich właściwą optymalizację.

Zarządzanie zdjęciami na stronie internetowej nie polega tylko i wyłącznie na wrzucaniu ich do serwisu bezpośrednio z aparatu. Można wokół nich wykonać wiele czynności, które sprawią, że Twoje fotografie zaczną budować ruch poprzez wyszukiwarkę Google Grafika.

Dlatego też można przyjąć, iż istnieje coś takiego jak optymalizacja SEO obrazów. W tym wpisie dowiesz się między innymi:

  • dlaczego właściwe nazewnictwo plików jest istotne,
  • jakie korzyści przynosi kompresja obrazów oraz jak ją wykonać,
  • w jaki sposób – zależnie od sytuacji – dobierać odpowiednie rozszerzenia plików,
  • jaką rolę odgrywa atrybut ALT grafik,
  • … oraz poznasz kilka innych, ciekawych kwestii związanych z zarządzaniem obrazami na stronie internetowej.

Przejdźmy zatem do meritum.

Dostosowywanie oraz optymalizacja SEO obrazów – 7 wskazówek

1. Rozważ użyteczność danych zdjęć i grafik.

Rolą obrazów jest budowanie przekazu i wywieranie wrażenia. Stanowią one często uzupełnienie tekstu, wzbogacając go poprzez doznania wizualne.

Na łamach naszego bloga bardzo często wspominamy, iż przekaz wizualny trafia do nas zdecydowanie szybciej, niż czysto tekstowy.

Dlatego też, decydując się na zamieszczenie na swojej stronie internetowej jakichkolwiek grafik, dokładnie przemyśl ich rolę.

Przykładem mogą być zdjęcia produktów w sklepie internetowym. Jest to dość specyficzny rodzaj obrazów, gdyż od nich w dużej mierze zależy ewentualne powodzenie sprzedaży.

Powinny wyróżniać się m.in. ujęciami produktów z różnych kątów oraz przedstawianiem ich zarówno na białym tle, jak i w codziennym użytkowaniu. Istotna jest też możliwość ewentualnego powiększenia wybranych fragmentów zdjęcia tak, aby widzieć pożądane szczegóły.

Jak widzisz, bardzo ważny jest cały kontekst oraz wszelkie funkcje, które mają zdjęciom towarzyszyć. Są one oczywiście zależne od konkretnej strony internetowej, jednak za dodawaniem obrazów powinna stać po prostu jakaś przemyślana filozofia.

2. Dobierz odpowiednie formaty plików.

Nie bez powodu używa się wielu formatów plików graficznych: PNG, JPG, GIF, SVG itp. Różnorodność technologii bierze się stąd, że nie każda z nich nadaje się do wszystkich rodzajów obrazów.

Plików JPG powinno używać się w przypadku wszelkich grafik, które mają szeroką paletę barw. Idealnym przykładem są fotografie. Dzięki JPG mamy możliwość ustalenia jakości obrazu, gdzie stopień na poziomie ok. 70% zazwyczaj pozwala na osiągnięcie zadowalającej jakości przy relatywnie zmniejszonej wadze pliku.

Z kolei format GIF ogranicza nas do palety barw, mającej maksymalnie 256 kolorów. Dzięki temu GIF nie nadaje się do skomplikowanych grafik. Jest za to idealny w przypadku wszelkich ikon oraz obrazów, gdzie nie musimy stosować wielu kolorów – logo, flagi itp. Warto dodać, że w formacie GIF można również zapisywać animacje.

PNG dzieli się na dwa rodzaje: wersję PNG-8 i PNG-24.

Pierwszy z nich jest bardzo podobny do GIF. Co prawda nie oferuje animacji, jednak spisuje się lepiej w przypadku stosowania przezroczystości oraz umożliwia na uzyskiwanie plików o mniejszym rozmiarze.

PNG-24 jest zaś podobny do JPG, jednakże wyróżnia go pewna bardzo istotna cecha – brak utraty jakości. Dzięki temu możemy uzyskiwać piękne grafiki z zastrzeżeniem, że im większa paleta barw, tym większy rozmiar pliku uzyskamy. PNG wykorzystuje się zazwyczaj w przypadku grafik zamieszczanych w sieci oraz tych, gdzie wykorzystywana jest przezroczystość.

Ciekawostka: istnieje jeszcze coś takiego, jak APNG, czyli Animated Portable Network Graphics. Format ten jest jeszcze dość eksperymentalny, jednak Google Chrome wspiera go od lipca 2017 roku.

Warto również wspomnieć o SVG – formacie wektorowym, zupełnie różnym od wcześniej wymienionych. Idealnie nadaje się do logo oraz prostych grafik, które są wręcz „geometryczne”, czyli zawierające różnego rodzaju okrągłe lub kanciaste kształty.

Podsumowując, format jest jak ubiór – należy go dobierać stosownie do okazji.

Sporo więcej na ten temat dowiesz się z tekstu Jakuba Ozorowskiego o tym, jak zoptymalizować grafikę na stronie internetowej.

3. Zadbaj o właściwe nazwy plików.

Punkt ten bardzo mocno wyjaśnia, dlaczego optymalizacja SEO obrazów jest niezwykle ważna. Oto prosty przykład.

Jeżeli widzisz zawartość folderu, w którym masz ukazane (w widoku listy, bez miniaturek) pliki w rodzaju:

  • IMG_0001.JPG
  • IMG_0002.JPG
  • IMG_0003.JPG itd.

to czy jesteś w stanie z góry stwierdzić, jaka jest zawartość tych obrazów?

Oczywiście, że nie. Zupełnie inaczej wygląda sytuacja w rodzaju:

  • samsung-galaxy-s9-front.JPG
  • infiniti-qx-70-wnetrze.JPG
  • slub-tomek-kasia-kosciol.JPG

Już sama nazwa w ww. przypadkach jest w stanie podpowiedzieć nam, co znajduje się wewnątrz.

Pliki graficzne powinno się nazywać adekwatnie do zawartości, gdyż takie działanie jest przyjazne nie tylko nam, użytkownikom, lecz także robotom wyszukiwarek.

Zapytasz pewnie: „a co w momencie, gdy mam wrzucić do sieci kilkadziesiąt grafik?”. Wtedy odpowiadam: Bulk Rename Utility.

Bulk Rename Utility

Bulk Rename Utility to prosty program, który umożliwia zarządzanie nazwami wielu plików jednocześnie. Na powyższym obrazku widzisz, w jaki sposób – przy pomocy trzech opcji – zmieniono nazwy kilkunastu plików.

Program ten pozwoli Ci zaoszczędzić sporo czasu, jeżeli Twoim zadaniem jest zmiana nazewnictwa wielu plików jednocześnie.

4. Ustal optymalne wymiary obrazów.

Jaki jest idealny rozmiar grafiki? Nikt nie odpowie jednoznacznie na to pytanie, gdyż wszystko jest zależne od konkretnego przypadku.

Ważny jest odpowiedni balans pomiędzy jakością a rozmiarem, ponieważ są one do siebie wprost proporcjonalne.

Kieruj się potrzebami Twoich użytkowników. Serwuj im obrazy w takich wymiarach, aby miały dostatecznie dobrą jakość.

Jeżeli jesteś fotografem, zamieszczaj na stronie internetowej miniatury (dopasowane do obszaru, w który są wyświetlane). Dopiero kliknięcie małego obrazka (czyli wykonanie akcji) powinno skutkować otwarciem wersji większej lub nawet pełnej, w natywnej rozdzielczości.

Niesie to za sobą szereg zalet, z oszczędnością czasu pobierania zdjęć i zmniejszeniem ilości wykorzystywanego transferu danych na czele.

Bulk Resize Photos

Również w przypadku tej czynności mogę podrzucić Ci pewien „myk”, który znacząco uprości Twoje życie. Jest nim usługa o nazwie Bulk Resize Photos.

Dzięki niej możesz zmniejszać wymiary wielu plików przy pomocy narzędzia drag-and-drop. Wystarczy, że zaznaczysz interesujące Cię zdjęcia oraz przeniesiesz je w pole oznaczone na powyższym zrzucie ekranu.

Dalej masz mnogość opcji – skalowanie, zmiana wysokości, szerokości, dodawanie znaku wodnego itp.

Program ten zawdzięcza swoją popularność niezwykłej prostocie. Nie wymaga od Ciebie żadnej rejestracji ani instalacji czegokolwiek. Ba, nie musisz nawet przesyłać zdjęć drogą online. Usługa jest jedynie „bramką”, komplet działań odbywa się na Twoim urządzeniu!

5. Zastosuj kompresję, czyli zmniejsz rozmiar bez utraty jakości.

Istnieje coś takiego jak kompresja obrazów. Czynność ta pozwala bez utraty jakości (lub z naprawdę minimalną stratą) znacząco zmniejszać rozmiar plików graficznych.

W tekście na temat promocji lokalnej firmy przy pomocy SEO wspomniałem o dwóch usługach, które mogą Ci w tym pomóc.

Pierwszą z nich jest TinyPNG:

Optymalizacja obrazków i grafik w SEO

Tak jak w przypadku Bulk Resize Photos, tutaj również wystarczy zaznaczyć interesujące pliki oraz „wrzucić” je w odpowiednie pole. Usługa pobiera obrazy, przetwarza je oraz udostępnia wersje skompresowane.

Wszystko to jest istotne, gdy interesuje Cię optymalizacja SEO obrazów, ponieważ nawet samo Google podkreśla, że obrazy powinny być kompresowane. Gdy tak nie jest, narzędzie Google PageSpeed Insights po przeprowadzeniu testu wyświetla ostrzeżenie, zatem coś musi być na rzeczy.

TinyPNG to oczywiście niejedyne rozwiązanie. Smush Image Compression and Optimization jest z kolei wtyczką, którą śmiało możesz wykorzystać, jeśli Twoja strona oparta jest o system CMS WordPress. Wspomniany dodatek zajmie się zarówno dotychczas dodanymi grafikami, jak i będzie kompresował kolejne, które będziesz wrzucać na serwer.

6. Wypełnij zawartość atrybutów ALT.

Rzuć okiem na poniższy obrazek.

Atrybut ALT - SEO obrazów

Pokazuje on fragment kodu strony internetowej, a dokładniej linijkę odpowiedzialną za wyświetlenie obrazka. Podstawowym atrybutem jest SRC, czyli źródło. Wskazuje, jaki jest adres grafiki. Bez poprawnie wypełnionej ścieżki obrazek nam się nie wyświetli.

Z kolei podkreślona część wskazuje atrybut ALT. Jak widzisz, jego wartość to „Darmowa dostawa”. Oznacza to, że autorzy strony przyporządkowali ten tekst jako wartość alternatywną dla grafiki, gdyby – jakimś cudem – nie wyświetliła się ona użytkownikowi.

Zapytasz pewnie: „po co to robić?”. Cóż, jeżeli optymalizacja SEO obrazów ma zostać przeprowadzona, to każda grafika w Twoim serwisie powinna mieć wypełniony atrybut ALT.

Atrybut ALT przypisuje konkretny tekst do danej grafiki. Dzięki temu możesz wprost wskazać robotom wyszukiwarek, co dokładnie znajduje się na tym obrazie. My, ludzie, zawartość znamy w sposób naturalny. Robotom jednak należy w tym pomóc.

Jeżeli dodajesz zdjęcie, na którym znajduje się np. samochód Tomka, to idealnym ALT-em powinien być „Samochód Tomka”. Z kolei np. infografika ukazująca stopień bezrobocia w Europie powinna mieć ALT w stylu „Bezrobocie Europa – infografika”.

ALT-y muszą być po prostu opisowe. Staraj się stosować możliwie najkrótsze wartości tego atrybutu, jednocześnie nie przesadzając ze zbytnim upychaniem słów kluczowych. Spraw, aby wszystko było możliwie najbardziej naturalne.

7. Zadbaj o wkomponowanie obrazów w otoczenie.

Roboty wyszukiwarek internetowych analizują całe podstrony. Czysty tekst, kod oraz oczywiście zdjęcia.

Optymalizacja SEO obrazów uwzględnia także „otoczenie” grafik, czyli cały kontekst, w którym się znajdują.

Dbaj zatem o to, aby tekst na danej podstronie korelował z użytymi obrazami. Wszystko to powinno stanowić spójną całość, aby tematyka podstrony była klarowna.

Oczywiście nie tyczy się to tylko robotów wyszukiwarek, ale także użytkowników. W końcu strony internetowe tworzy się po to, aby zarówno jedni, jak i drudzy byli odpowiednio zadowoleni.

Gdzie można znaleźć darmowe, dobrej jakości zdjęcia?

Jeżeli szukasz świetnych i bezpłatnych obrazów, odsyłam Cię do tego wpisu: 22 strony z darmowymi zdjęciami. Znajdziesz tutaj szereg serwisów, za których pośrednictwem możesz pobrać przeróżne fotografie.

Moim faworytem całego zestawienia jest bez wątpienia Kaboompics. Jest to świetnie wykonany serwis, z obszerną bazą zdjęć i przydatnymi funkcjami.

Co więcej, prowadzi go nasza rodaczka – Karolina – zatem jest tym bardziej godny polecenia.

Optymalizacja SEO obrazów – czy to wszystko?

Absolutnie nie. Istnieje jeszcze kilka zagadnień, które z powodzeniem mogą być opisane w tym temacie, choćby rola grafik w mapie strony oraz ewentualne konflikty, jakie mogą tworzyć z obrazami sieci CDN. Szerzej poruszę je wraz z sukcesywnym rozszerzaniem treści niniejszego wpisu.

Spodobał Ci się ten tekst?

Jeśli sądzisz, że moglibyśmy Tobie pomóc, odezwij się do nas. Wypełnij bardzo prosty formularz szybkiej wyceny. Gwarantujemy szybką odpowiedź.

  1. Marcin

    Dzięki za zestaw cennych porad. Przy okazji jedno pytanko: czy Twoim zdaniem lepiej nazywać pliki z wykorzystaniem polskich znaków, czy też nie ma to znaczenia (albo lepiej ich unikać)? Akurat mam dużo produktów z polskimi „ogonkami” i zastanawiam się, jaka nazwa będzie odpowiednia przez pryzmat SEO…

    Odpowiedz
    • MobileTry logo
      MobileTry

      Należy unikać „ogonków” – zarówno w nazwach plików, jak i w nazwach podstron.

    • Marcin

      Dziękuję za odpowiedź – tego się będę trzymał. A tak z ciekawości – dlaczego lepiej ich unikać? W czym przeszkadzając Googlowi? 😉

    • MobileTry logo
      MobileTry

      Nasze znaki specjalne są – jak sama nazwa wskazuje – niestandardowe. Dużo lepiej jest tworzyć wszelkie nazwy z użyciem wyłącznie tradycyjnych, uniwersalnych liter, dostępnych dla niemal wszystkich alfabetów. Stosowanie np. „samochod” zamiast „samochód” dla robotów wyszukiwarek nie robi żadnej różnicy, z kolei działanie w odwrotną stronę może powodować komplikacje powiązane choćby z kodowaniem znaków. Polskie „ogonki” po prostu nie są uniwersalnymi znakami.

    • Marcin

      Moja obawa odnośnie nazywania bierze się stąd, że w Google Trends frazy z ogonkami i bez są traktowane właśnie jako osobne hasła (te z ogonkami są zwykle popularniejsze) i w sumie sama wyszukiwarka też daje trochę inne wyniki po wpisaniu choćby wspomnianego „samochód” oraz „samochod”. Niemniej, zapewne problemy z kodowaniem mogą narobić więcej zła 😉 Dzięki i pozdrawiam.

    • MobileTry logo
      MobileTry

      Spokojnie, z rozróżnianiem contentu roboty wyszukiwarek radzą sobie dobrze i ustawicznie coraz lepiej. 🙂 Zdecydowanie lepiej jest być ostrożnym pod kątem technicznym, czyli w kwestii nazewnictwa plików i linków.

Oświadczam, że akceptuję postanowienia zawarte w polityce prywatności. *

Michał Ziółkowski

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Mało czytania? Nie ma problemu!

Sprawdź inne teksty powiązane z tym artykułem

Michał Ziółkowski

5 lat temu

Porady dotyczące user interface – 7 ważnych kwestii

Oto nasze porady dotyczące user interface, których wcielenie w życie sprawi, że Twoja strona internetowa będzie bardziej przyjazna odbiorcom. Sprawdź je!

Michał Ziółkowski

5 lat temu

Proces tworzenia strony internetowej – na czym polega?

Z jakich kroków składa się proces tworzenia strony internetowej? Jakie jego aspekty są istotne, a które mniej? Zobacz, jak proces ten powinien przebiegać.

Michał Ziółkowski

5 lat temu

Najczęstsze błędy typograficzne na stronach internetowych

Jakie są najczęstsze błędy typograficzne na stronach internetowych? Dlaczego należy ich bezwzględnie unikać na własnej stronie? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Aktualizacja strony internetowej – kiedy najlepiej ją przeprowadzić?

W którym momencie aktualizacja strony internetowej powinna być przeprowadzona? Po czym poznać, że najwyższy czas na zmiany? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Tworzenie własnego portfolio – co warto mieć na uwadze?

Tworzenie własnego portfolio to proces, który musi być solidnie przemyślany. Sprawdź więc, w jaki sposób można stworzyć własną, skuteczną teczkę z pracami.

Michał Ziółkowski

5 lat temu

Strona internetowa projektanta wnętrz – 9 niezbędnych rzeczy

Jakie elementy powinna zawierać idealna strona internetowa projektanta wnętrz? Na co projektanci powinni zwracać szczególną uwagę? Odpowiadamy!