Optymalizacja grafiki na potrzeby www

Wiele razy słyszeliśmy pytanie: "jak zoptymalizować grafikę na stronie internetowej?". Pytanie to jest bardzo dobre, gdyż właściwie dobrane i przygotowane obrazki mogą przesądzić o sukcesie waszej strony internetowej... lub o jej porażce. Dlaczego właściwie obrazy są tak ważne w Internecie? Bo to (między innymi) na nie zwracają uwagę wasi potencjalni klienci... i Google. W tym wpisie dzielimy się z wami wiedzą, dzięki której jeszcze dziś możecie zacząć dopracowywać grafiki na własnej stronie www.


Spis Treści

  1. Optymalizacja grafiki do Internetu - dlaczego warto?
  2. Wysoka Jakość Zdjęć
  3. Waga i wymiary obrazu

  4. Trafność zdjęć
  5. Nazwa obrazu i adres url

  6. Atrybut alt i title obrazu

  7. Podpis pod grafiką
  8. Mapa obrazów

  9. Podsumowanie

Optymalizacja grafiki do Internetu – dlaczego warto?

Istnieje wiele powodów, dla których warto zatroszczyć się o udoskonalanie obrazów. Oto najważniejsze z nich:

  • Właściwie dobrane zdjęcia wyróżnią waszą ofertę na tle konkurencji. Zwiększą również szansę na to, że internauta postanowi skorzystać właśnie z waszych usług lub produktów
  • Obrazy to jeden z elementów na stronie, na które Google zwraca uwagę podczas oceny jakości strony. A im wyżej Google oceni witrynę, tym wyżej znajdzie się w jego wynikach wyszukiwania
  • Jeśli kiedyś zastanawialiście się, jak dodać zdjęcie do Google Grafika... to już wiecie. Przestrzegajcie zasad spisanych w tym poradniku, a wasze szanse na pojawienie się w wyszukiwarce graficznej Google znacznie wzrosną
  • Poprawne zdjęcia przyspieszą również czas ładowania i ułatwią nawigację na Twojej stronie.

Przejdźmy już jednak do tego, na co wszyscy czekają – poradnika optymalizacji obrazów online. Oto checklista 7 rzeczy, na które musisz zwrócić uwagę, dodając zdjęcia do Internetu.


1. Wysoka jakość zdjęć

W optymalizacji grafik pod kątem wyszukiwarek najważniejszy jest... internauta. A bardzo często pierwszym, na co zwraca uwagę internauta wchodząc na stronę www, są znajdujące się na niej obrazy. Dlatego właśnie niezwykle istotne jest to, aby dobrane przez was grafiki wyróżniały się możliwie najwyższą jakością. Zdjęcie ma być wyraźne i czytelne: już pierwszy rzut oka na nie ma wystarczyć do określenia, co się na nim znajduje.

Warto również zadbać o to, by grafika była intrygująca i przyciągająca uwagę. Unikajcie nijakich, powtarzających się na dziesiątkach innych stron grafik ze stocka. Najlepiej, jeśli jesteście w stanie sami załatwić elementy graficzne na swoją stronę. I wcale nie muszą to być obrazy. Mogą to być infografiki, ilustracje, rysunki... co tylko pozwoli na wzbogacenie treści.

Optymalnie byłoby, gdybyście posiadali w swoim zespole fotografa i grafika. Wiele firm musi jednak sobie radzić bez takich osób w zespole. Co robić wtedy? W Internecie znajduje się wiele repozytoriów materiałów graficznych. Można w nich znaleźć właściwie wszystko.

Oto kilka przykładowych źródeł grafiki online:


2. Waga i wymiary obrazu

Grafiki szyte na miarę – czyli jakie są odpowiednie wymiary obrazów na stronę www

Wrzucając obraz na stronę pamiętajcie, by zmniejszyć go do rozmiarów, jakie będzie wykorzystywał na stronie. Jeżeli np. wrzucacie miniaturkę produktu, to nie ma sensu obciążać strony obrazem w rozdzielczości Full HD albo większej.

Zmniejszenie wymiarów to pierwszy krok do zmniejszenia jego wagi. Waga obrazu to bardzo ważna kwestia! Nawet pojedynczy ciężki obraz może znacząco spowolnić działanie strony, zwłaszcza na urządzeniach mobilnych. Spowoduje to wydłużenie czasu jej ładowania i może prowadzić do utraty mniej cierpliwych potencjalnych klientów. Może to również prowadzić do obniżenia pozycji w Google, które bardzo dba o satysfakcję internautów.

waga i wymiary obrazów
Jaki wpływ ma waga i wymiary grafiki na stronę www

Wpływ wagi obrazu na wrażenia czytelników

Jak sobie z tym poradzić? Gdy już zmniejszyliście wymiary zdjęcia, kolejnym krokiem jest zmniejszenie jego jakości. Uważny czytelnik pewnie w tej chwili się zastanawia: "Hej, hej, hej! Przecież przed chwilą pisaliście, że liczy się wysoka jakość grafiki. Teraz z kolei każecie ją obniżać... To jak to w końcu jest?".

Niestety, smutna prawda brzmi tak, że najlepiej jest znaleźć złoty środek między jakością zdjęcia a jego wagą. Co nam po najlepszym nawet zdjęciu, jeśli nikt go i tak nie zobaczy, bo będzie ładowało się wieczność? Z drugiej jednak strony błyskawiczne załadowanie ani trochę nie pomoże zdjęciu, które z litości należałoby natychmiast usunąć ze strony. Faktem jest również to, że nawet drobne, niezauważalne dla człowieka obniżenie jakości zdjęcia może prowadzić do znacznego zmniejszenia wagi obrazu.

Możecie też jeszcze bardziej zaoszczędzić na wadze obrazka, jeśli zdecydujecie się na pogorszenie jakości widoczne ludzkim okiem. Pamiętajcie jednak, że wrażenia wizualne klientów powinny być najczęściej ważniejsze od przesadnej optymalizacji. Najlepiej więc o tyle zmniejszyć jakość grafiki, by nie ucierpiała na tym jej atrakcyjność - przy jednoczesnym zmniejszeniu jej wagi.

W tym celu możecie poprosić o pomoc grafika lub skorzystać z jednego z dostępnych w Internecie narzędzi do optymalizacji wagi obrazów. Przykładowe narzędzie: http://optimizilla.com/.


3. Trafność zdjęć

Zdjęcia, które dobieracie do treści, muszą być z nią związane. Załóżmy na przykład, że piszecie artykuł porównujący różne modele radia do samochodu. Wrzucenie do niego nawet najlepiej zoptymalizowanego zdjęcia z wakacji u cioci Stefy raczej nie będzie najlepszym pomysłem. Wielu z was potraktuje pewnie tę wskazówkę jako oczywistość. Jednak przeglądając Internet trudno nie zauważyć, że nie dla wszystkich jest to tak zrozumiałe.

Trafność tematyczna zdjęć
Dopasowanie tematyczne zdjęć do treści

Gdy Internauta trafi na artykuł z nietrafnymi grafikami, to efekt raczej nie trafi do jego gustu. W najlepszym wypadku bardziej skupi się na niepasującym zdjęciu niż na zakupach lub wypełnieniu formularza kontaktowego. W najgorszym zaś nie potraktuje was poważnie, opuści witrynę i wybierze konkurencję. Niedobrze.

Właściwie dobrane zdjęcia to również punkt w rankingu Google. Jeśli chcemy zgodnie z wytycznymi Google dla webmasterów korzystać ze wskazówek opisanych dalej w tym poradniku, to zdjęcia po prostu muszą być trafne. Nazwa pliku, atrybut alt i title powinny krótko i zgodnie z prawdą opisywać zawartość grafiki.

  • Jeśli nietrafne grafiki opiszecie zgodnie z wytycznymi Google, to i tak nic wam to nie da, gdyż będą wtedy zoptymalizowane pod nietrafne słowa kluczowe;
  • Jeśli nietrafne grafiki opiszecie trafnymi słowami kluczowymi, to złamiecie wytyczne Google. Gdy Google się o tym zorientuje (a zorientuje się szybko), to może nawet ukarać waszą stronę niższą pozycją rankingową!
  • Jedynym słusznym wyborem są trafne grafiki opisane według zasad Google. W każdym innym wypadku lepiej byłoby już w ogóle nie dodawać do artykułu żadnych zdjęć.

Na koniec mały pro tip: staraj się dodawać zdjęcia w takim miejscu na stronie, gdzie treść najbardziej pasuje do jego zawartości. Google oceniając grafiki na stronie, patrzy na jej najbliższe otoczenie. Otocz zdjęcie tekstem z opisującymi je cennymi słowami kluczowymi. Dzięki temu zdjęcie będzie miało większe szanse na pojawienie się w Google Grafika, natomiast artykuł – w zwykłych wynikach wyszukiwania.


4. Nazwa obrazu i adres url

Nazwa obrazu powinna:

  • w sposób jasny i zwięzły opisywać jego zawartość
  • nie wykorzystywać polskich znaków ani wielkich liter
  • poszczególne słowa mieć rozdzielone myślnikami
  • wykorzystywać wyłącznie litery i ewentualnie cyfry
  • możesz spróbować w sposób naturalny wpleść w nazwę obrazu ważne dla siebie słowo kluczowe.

 

Przykłady złych nazw obrazów:

  • Wdhfdjfksdkfdskflsdk34873843.jpg
  • obrazek.jpg
  • Żółć.png
  • bardzodluganazwaobrazka.png

 

Przykłady dobrych nazw obrazów:

  • akcesoria-do-samochodu.jpg
  • deweloper-nieruchomosci-zabrze.png
  • petsitter-katowice.jpg

A co z adresem url? Najczęściej po wrzuceniu zdjęcia na stronę będzie ono miało adres url stworzony na podstawie swojej nazwy. Jeśli jednak z jakiegoś powodu stanie się inaczej – po prostu poprawcie go zgodnie z powyższymi wytycznymi.


5. Atrybut alt i title obrazu

Kwestie nieco bardziej zaawansowane, lecz równie ważne. Przyjrzyjmy im się.

Atrybut alt pokazuje się zamiast obrazka, gdy ten z jakichkolwiek powodów nie może zostać wyświetlony w przeglądarce. Potencjalnych powodów jest wiele, np.:

  • osoba z niepełnosprawnością wzrokową używa specjalnego czytnika ekranowego
  • internauta używa przeglądarki, która nie wyświetla obrazów
  • użytkownik wyłączył pokazywanie obrazów, by przyspieszyć działanie witryny
  • podałeś niewłaściwą ścieżkę przy dodawaniu pliku.

W każdej z takich sytuacji internauta nie zobaczy niczego. Niedobrze. Chociaż częściowo można odratować sytuację dodając do obrazka atrybut alt. Pokaże on krótką informację tekstową, co tak właściwie powinno zostać wyświetlone na obrazie. Chociaż dla użytkowników może to nie być aż tak istotne, to jednak dla wyszukiwarek jest to niezwykle ważne.

 

Jak stworzyć dobry atrybut alt? Oto najważniejsze wskazówki:

  • zadbaj, by w sposób zwięzły i trafny opisywał zawartość obrazka
  • postaraj się w sposób naturalny umieścić w nim ważne dla siebie słowo kluczowe.

Atrybut title to z kolei tekst, który pojawi się po najechaniu myszką na obrazek. Zasady jego tworzenia są podobne jak w przypadku atrybutu alt. Warto jednak w miarę możliwości zadbać o to, by obydwa atrybuty nie były identyczne.

 

Jak dodać atrybut alt i title swojej grafice?

Jeżeli dodajecie grafikę przez system zarządzania treścią (np. Wordpress, Drupal czy Joomla), to powinniście mieć możliwość podania tych atrybutów przy dodawaniu lub edycji grafik na stronie.

Jeżeli jednak nie posiadacie wspomnianego systemu, to najłatwiej będzie poprosić o wsparcie informatyka.

Zastanawiacie się, jak wiele stron internetowych ma niezoptymalizowane opisy alternatywne obrazów? Koniecznie przeczytajcie nasz wpis "5 najczęstszych błędów na stronach internetowych".

6. Podpis pod grafiką

Warto również opisywać zawartość zdjęcie w podpisie pod (lub nad) nią. Dzięki temu pomocniczy tekst będzie wyświetlał się zawsze, a nie tylko wtedy, gdy grafika się nie załaduje. Doda to nieco porządku do waszej treści i rozwieje ewentualne wątpliwości odnośnie do tego, co przedstawia grafika. Po lekturze punktu 3 tego poradnika, wątpliwości te nie będą się już, rzecz jasna, pojawiać u waszych czytelników. To jednak nie wszystko.

Podpisanie zdjęcia to świetna okazja do zamieszczenia w jego pobliżu trafnych i wartościowych słów kluczowych. Warto wykorzystać każdą sposobność, by pomóc wujkowi Google w określeniu, o czym jest nasza treść oraz w jej ocenie. Uwaga! Podpis pod zdjęciem musi być napisany w sposób naturalny i z myślą przede wszystkim o użytkownikach. Za wszelką cenę unikajcie herezji w stylu "grabarz pogrzeby kremacje ostatnie pożegnanie śląsk katowice chorzów zabrze świętochłowice". To Wam tylko zaszkodzi. Słowo.


7. Mapa obrazów

Mapa obrazów to specjalny plik przygotowany z myślą o robotach Google. Zamieszczenie na swojej witrynie mapy obrazów może im ułatwić w trafieniu do wszystkich znajdujących się na niej grafik. Jak widzicie, nie bez powodu plik ten nazywa się "mapą". Najprościej mówiąc, mapa obrazów to lista linków do wszystkich najważniejszych plików graficznych na stronie.

Mapa obrazów
Tworzenie mapy obrazów strony internetowej

 

Jak wdrożyć i zoptymalizować mapę obrazów?

To już temat bardziej zaawansowany i wykraczający poza tematykę tego artykułu. Na wasze potrzeby powinno bez problemu wystarczyć wykorzystanie jednego z dostępnych w sieci darmowych generatorów map obrazów. Są one niezwykle proste w obsłudze. Najczęściej wystarczy podać adres strony głównej strony witryny, nacisnąć przycisk i... czekać.

Na sam koniec mapę obrazów trzeba będzie przesłać na konto swojej witryny w Narzędziach Google dla Webmasterów. W tym celu:

Dodawanie mapy obrazów w GSC: Krok 1

Krok 1: wejdźcie w zakładkę "Indeksowanie"

Dodawanie mapy obrazów w GSC: Krok 2

Krok 2: wybierzcie opcję "Mapy witryn"

Dodawanie mapy obrazów w GSC: Krok 3

Krok 3: kliknijcie przycisk "Dodaj/Testuj mapę witryny"

Dodawanie mapy obrazów w GSC: Krok 4

Krok 4: wklejcie w oknie końcówkę adresu mapy obrazów

Dodawanie mapy obrazów w GSC: Krok 5

Krok 5: kliknijcie "prześlij" i... gotowe!

Przykładowe narzędzie online do generowania map obrazów: http://www.angeldigital.marketing/image-sitemap/.


Co dalej?

Oddaliśmy do Waszej dyspozycji kompletne kompendium wiedzy o optymalizacji obrazów na potrzeby wyszukiwarek (i użytkowników). Przestrzegajcie wszystkich podanych tu wskazówek optymalizacyjnych! Dzięki zwiększycie szanse na to, że wasze obrazy pojawią się wysoko w wynikach wyszukiwania grafiki Google. Jest to szczególnie ważne w branżach, w których to nie słowo pisane, lecz właśnie ilustracje najlepiej trafiają do klientów. Architekt, artysta, designer... to tylko niektórzy ze specjalistów, dla których możliwość łatwego wyszukania ich zdjęć powinna być szczególnie ważna. A i wszystkim innym na pewno nie zaszkodzi dodatkowy ruch na stronie.

jak zoptymalizować grafikę na stronie internetowej
Jak zoptymalizować grafikę na stronie internetowej?j

Na koniec mała wskazówka, od czego zacząć. Bezwzględnie pamiętajcie o pierwszych trzech wskazówkach. Po pierwsze, są one najłatwiejsze do wdrożenia. Po drugie, ich efekty są najbardziej odczuwalne przez waszych potencjalnych klientów.

Jak już to opanujecie, to skupcie się dopracowaniu nazw i adresów url obrazów oraz ich atrybutów alt i title. Z punktu widzenia wyszukiwarek to właśnie one są najważniejsze. Ostatnie dwie wskazówki zostawcie sobie na koniec.

Zdajemy sobie sprawę z tego, że to spora dawka wiedzy. Wiedzę te najlepiej wyćwiczyć w praktyce. Jak to zrobić? Optymalizować, optymalizować i jeszcze raz – optymalizować. A z czasem sztuka dopracowywania obrazów wejdzie wam w krew.

I na sam koniec pamiętajcie o jednym: spełnienie wymagań Google jest bardzo ważne. Jeszcze ważniejsza jest jednak satysfakcja internautów. Bo to oni w pewnym sensie rządzą Google. Chcecie wyświetlać się wysoko w stronach z wynikami wyszukiwania Google? Chcecie, by wasza oferta była możliwa do wyszukiwania po grafice? Zadbajcie o wrażenia internautów, nie zaniedbując wymogów wyszukiwarek.

Dodaj komentarz

×

Zostaw numer, omówimy Twój projekt