Pozycjonowanie stron

6 sposobów na optymalizację obrazków na stronie

Prowadząc własną stronę internetową i starając się jak najlepiej zoptymalizować ją pod kątem wyszukiwarek bardzo często zapominamy o jednej z najważniejszych części składowych tejże strony – obrazkach. Jeżeli zatem kiedykolwiek zastanawialiście się nad tym, czemu podczas szukania w obrazach nie jesteśmy w stanie znaleźć naszej strony, bądź też jaką funkcję spełniają tak zwane „tagi alt” oraz jaka jest różnica pomiędzy formatami obrazów publikowanych na stronie, w tym miejscu znajdziecie odpowiedź na pytania.

1. Odpowiednia nazwa obrazka

Dodając obrazek do naszego posta na stronie czy wpisu na łamach bloga często liczą się dla nas walory czysto estetyczne – czyli po prostu jak on wygląda. W związku z tym często nasze obrazki występują w ich oryginalnych nazwach, nierzadko przypominających te domyślne z aparatów i telefonów -„DSC_190i204029” i tak dalej. To bardzo źle i powinniśmy pozbyć się nawyku umieszczania zdjęć z taką nazwą na stronie.

W SEO zasada jest prosta: musimy korzystać z właściwych słów kluczowych. Ma ona swoje odzwierciedlenie również w nazwach plików graficznych, które powinny być jak najbardziej opisowe. Roboty wyszukujące przeszukują również nazwy plików graficznych zamieszczanych na naszej stronie – koniecznie zatem weźmy to pod uwagę! Zobrazujmy to jednak na przykładzie. W newsie na stronie o tematyce gier zamieściliśmy tego typu obrazek:

Moglibyśmy użyć generycznej nazwy składającej się z numerów czy czegokolwiek innego – nie jest to jednak dobre rozwiązanie. Znacznie lepiej sprawdzi się nazwa w stylu Dishonored-Corvo-Attano-Tapeta.jpg – nie tylko dobrze odzwierciedla ona to, co przedstawia sam obrazek, ale też pozwala nam łatwiej trafić do użytkowników wpisujących takie hasła, jak „Dishonored Tapeta” czy „Corvo Attano Dishonored”.

Jeżeli bardzo chcemy, zawsze możemy zagłębić się w przyjrzenie się temu, czego szukają nasi użytkownicy, by w końcu trafić na naszą stronę. Stosując odpowiednie nazwy obrazów z pewnością dojdziemy do tego, że warto poświęcić te kilka sekund na właściwe ich dobranie.

2. Optymalizacja tagów „alt”

Teoretycznie rzecz ujmując, atrybut ALT w kodzie html obrazka służy, jak sama nazwa sugeruje, wskazaniu przeglądarce ALTernatywy dla obrazka, która pojawi się na jego miejscu, gdy nie będzie można go wczytać. Praktycznie – jest to miejsce, które możemy wykorzystać do SEO. Powinniśmy tutaj jednak trzymać się podstawowych zasad:

  • NIE MOŻEMY tutaj upychać słów kluczowych. Bazując na powyższym przykładowym obrazku, nie wstawiajmy tutaj słów „gry, darmowe gry, recenzje gier, poradniki do gier”. Alt nie służy do tego!
  • dokładnie jak w przypadku nazw obrazków, tak i tutaj stosujemy proste słowa, najczęściej mianowniki, jak najbardziej oddające charakter zdjęcia – często „alt” będzie się pokrywał z dobrze dobraną nazwą
  • atrybutu alt NIE UŻYWAMY dla elementów dekoracyjnych strony, a więc do teł, bullet-images i innych
  • KAŻDY pozostały obrazek powinien mieć atrybut alt opisujący go!

Tak powinien wyglądać dobry atrybut alt dla powyższego obrazka:

<img src="/Dishonored-Corvo-Attano-Tapeta.jpg" alt="Dishonored Corvo Attano Tapeta" />

3. Redukcja wagi naszych obrazków

Zanim przejdziemy do opisywania wagi obrazów, zwróćmy uwagę na fakt, że większość użytkowników komputerów i laptopów czeka maksymalnie 3 sekundy na załadowanie strony. Właściciele telefonów i tabletów są bardziej cierpliwi i czekają  mniej więcej 5 sekund. Jeżeli to nie przekonuje Was do tego, by jak najbardziej zminimalizować rozmiar strony, dodajmy, że szybkość ładowania się strony jest bardzo ważnym czynnikiem w algorytmie Google.

Jeżeli ładowanie naszej strony zajmuje 10 sekund, na pewno coś musimy zmienić, nie tylko dla wyszukiwarek, ale też dla użytkowników – unikniemy tym samym wychodzenia z naszej strony potencjalnych zrezygnowanych odbiorców.

W jaki sposób zmniejszyć rozmiar obrazków na naszej stronie? Możemy zmienić ich format, jeżeli obecnie używamy tego nieoptymalnego (patrz – punkt poniżej). Jeżeli to nie jest to, konieczne będzie odjęcie nieco jakości. Można to zrobić za pomocą większości dostępnych edytorów graficznych, nie tylko Photoshopa, ale też chociażby darmowego GIMP-a. To samo oferuje na przykład edytor online o nazwie Pixlr. Musimy kombinować i zrobić wszystko, by było tego nieco mniej.

4. Wybór odpowiedniego formatu obrazka

W chwili obecnej tak naprawdę istnieją trzy królujące formaty obrazków, które wykorzystuje się przy tworzeniu stron www: JPG, PNG oraz GIF. Który z nich jest jednak najlepszy i na który powinniśmy postawić, tworząc większość elementów naszej strony?

Obrazy z końcówką .JPG ważą zdecydowanie najmniej. Jest to format najbardziej popularny w Internecie, jak również najstarszy – z uwagi na fakt, że pliki JPG są kompresowane, ich jakość maleje wraz z kolejnymi zapisami. Mimo wszystko pliki JPG ważą bardzo mało, a oddają kolory w sposób wyśmienity.

Obrazy o rozszerzeniu .GIF są najczęściej kojarzone z animacjami – w przypadku statycznych obrazów oferują jednak gorszą jakość, niż JPG-i, w związku z czym są wykorzystywane przede wszystkim do mniejszych elementów szablonowych. Dla większych obrazów GIF-y się nie sprawdzają, gdyż zazwyczaj ważą znacznie więcej, niż konkurencyjne formaty.

PNG to format obrazów, który szybko zdobywa na popularności. Jest alternatywą dla GIF-a – i to dobrą, bo wspiera znacznie więcej kolorów, a wraz z kolejnymi zapisami nie traci na jakości, w przeciwieństwie do konkurencyjnego JPG-a. Podczas gdy jednak PNG-8 z mniejszą ilością kolorów oferuje pliki o zadowalającym rozmiarze, odstają jednak jakościowo od tych zapisywanych w JPG. PNG-24 jest niemal idealny – z jedyną i dyskwalifikującą go wadą, którą jest ogromny rozmiar.

Przedstawmy więc kilka zasad, których najlepiej przestrzegać celem lepszej optymalizacji pod kątem obrazów:

  • JPG sprawdzi się w większości przypadków – stosujmy ten format jak najczęściej, oszczędzając tym samym na rozmiarze plików
  • PNG doskonale się sprawdza w mniejszych obrazach, w tym tych typowo „dekoracyjnych” – stosujmy ten format, jeżeli potrzebujemy przezroczystości i cenimy sobie ilość detali mniejszych elementów
  • GIF-a powinniśmy unikać przy jakichkolwiek większych obrazach – może być dobry do miniaturek, aczkolwiek wciąż uważamy, że jest to format, którego nie powinniśmy wykorzystywać ze względu na dość słabą jakość, jaką oferuje.

5. Korzystanie z map obrazków

Nie każdy o tym wie, ale oprócz samych adresów stron w Google Webmaster Tools można przesłać również adresy obrazków – jest to bardzo przydatne, jeżeli chcemy, by te pojawiały się w „obrazkowych” wynikach wyszukiwania. Co prawda roboty wyłapują normalnie zamieszczone na stronie obrazy, jednak często do ich wyświetlania używamy różnego rodzaju skryptów, które ukrywają url obrazka (nieświadomie czy świadomie). Wtedy właśnie z pomocą przynosi mapa obrazków.

Dodanie mapy obrazków nie gwarantuje tego, że znajdą się one w indeksie Google – w znaczącym stopniu jednak pomoże w ich optymalizacji i przyczyni się do możliwości zostania zaindeksowanymi. Mapa obrazków może być załączona do mapy całej strony, albo też stanowić osobny plik. Tutaj z kolei można przeczytać, jak powinien wyglądać poprawnie przygotowany plik z mapą.

6. Optymalizacja miniaturek obrazów

Nie zawsze jest tak, że od razu jesteśmy w stanie wyświetlić docelowy obrazek – jest on albo za duży, albo też waży za dużo, żeby od razu go wyświetlać. W tym celu powstały miniaturki, które są zbawieniem dla szybkiego działania strony. Problem w tym, że również i one mogą się okazać zabójcze dla szybkości ładowania naszej strony. Zwłaszcza, gdy jest ich za dużo.

Po pierwsze zadbajmy zatem, żeby miniaturki ważyły jak najmniej tylko można. Często warto poświęcić nieco jakości na rzecz mniejszego rozmiaru pamiętając, że nawet jeśli jedna miniaturka nie waży zbyt dużo, większe ich ilości mogą jednak zajmować sporo więcej.

Po drugie, zadbajmy o to, żeby atrybut alternatywny (alt) miniatury nie był taki sam, jak ten należący do większej wersji obrazka. Tak właściwie warto sprawić, by był zupełnie inny.

Pamiętajmy zatem, że w dzisiejszych czasach aby skutecznie pozycjonować stronę nie należy dbać jedynie o to, by tekst na niej był interesujący dla czytelników i równie atrakcyjny dla wyszukiwarek internetowych. Ogromne znaczenie mają obrazki, których właściwa optymalizacja pozwoli nam efektywniej działać i pozycjonować nasz serwis, jak również po prostu zachęcać użytkowników do przeglądania go.

0 polubień