Kursy pozycjonowania

Jak zoptymalizować grafikę na stronie internetowej dla potrzeb SEO?

Jak zoptymalizować grafikę na stronie internetowej dla potrzeb SEO?

Strony internetowe różnią się technologią, treścią i wyglądem. Dobrze zoptymalizowana strona internetowa, zapewniająca szybki dostęp do swojej zawartości, to klucz do sukcesu. W dobie szybkiego Internetu dostęp do strony powinien być dla użytkownika jak najłatwiejszy, dlatego istotnym elementem jest optymalizacja plików graficznych, które ładowane są na stronie internetowej. 

Jak zatem przygotować grafikę, aby była ona dostosowana do standardów dobrze zoptymalizowanych stron internetowych? Jest na to szereg sposobów.

Selekcja zdjęć

Proces optymalizacji grafik należy zacząć od podstaw. Wykonane przez nas zdjęcia powinny najpierw trafić na dysk komputera, gdzie trzeba dokonać selekcji plików, pozostawiając te, które wykonane zostały najlepiej. Chodzi tutaj głównie o odrzucenie zdjęć z niedoskonałościami, aby bezsensownie nie zapychać nimi miejsca na hostingu lub aby uniknąć dublujących się zdjęć, różniących się niewielkimi szczegółami.

Zmiana nazw plików: słowa kluczowe dla wyszukiwarki

Po dokonaniu selekcji zdjęć, które trafią na naszą stronę internetową, powinniśmy przystąpić do zmiany nazw plików. Wyszukiwarka Google potrafi odczytywać zwykły tekst ze strony internetowej oraz szukać słów kluczowych w nazwach zdjęć. Domyślnie zdjęcia otrzymują nazwy generowane przez aparat, np. IMG-2012.jpg  lub DSC-2100.jpeg. Nowa nazwa zdjęcia powinna być zwięzła i konkretnie opisywać to, co przedstawia dane zdjęcie. Poniżej przykład zastosowania tego w praktyce.

Duży rozmiar plików graficznych to wolno wczytująca się strona

Gdy użytkownik pierwszy raz odwiedzi Twoją witrynę, czas oczekiwania na załadowanie się strony może być czynnikiem decydującym o tym, czy zechce on odwiedzić ją po raz kolejny. Im większa waga zdjęć na stronie internetowej, tym dłużej strona będzie się ładować. Jak zatem zoptymalizować grafikę, aby przyspieszyć ładowanie się strony?
Priorytetowym zabiegiem dla grafik mających trafić na naszą stronę internetową jest optymalizacja ich rozmiarów. Zdjęcia wykonywane przez różne urządzenia oferują różną wagę i stopień kompresji plików. Warto zadbać o to, aby duże pliki graficzne, których waga wyrażona jest w megabajtach (MB), zostały skompresowane do rozmiarów kilkudziesięciu lub kilkuset kilobajtów (kB).
Edycji zdjęć dokonać można przy użyciu darmowych narzędzi, takich jak np. tinypng.com, tinyjpg.com, lub za pomocą zaawansowanych programów graficznych typu Photoshop.
Weryfikacji szybkości ładowania się strony możemy dokonać poprzez narzędzie PageSpeed Insights.

Skalowanie i rozmiar zdjęć

Nowoczesna technologia responsywnych stron internetowych zapewnia dostosowywanie się elementów strony oraz grafik do urządzeń o różnych rozdzielczościach ekranów. Niezależnie od technologii zastosowanej do budowy Twojej strony internetowej, sklepu czy bloga, rozróżniane są  tam sekcje, w których niezbędne jest załadowanie się zdjęć, np. zdjęcia na potrzeby banera, widgetów etc. Grafiki ładowane do poszczególnych sekcji powinny idealnie pasować do ustalonego rozmiaru ekranu opisanego w pliku kaskadowych arkuszy stylów (CSS).
Chodzi tutaj o to, aby nie ładować zdjęć o bardzo dużych rozdzielczościach do sekcji, w której wymagane są kilkukrotnie mniejsze pliki. Działanie takie nosi nazwę skalowania, tzn. duże pliki zostają poprzez kod strony pomniejszone logicznie do rozmiaru danej sekcji. Operacja ta negatywnie wpływa na optymalizację strony internetowej.
Rozwiązanie tego problemu polega na przygotowanie kilku rozmiarów tych samych zdjęć, dostosowanych do wielkości poszczególnych sekcji i modyfikacji pliku CSS w taki sposób, aby poszczególne zdjęcia ładowane były w zależności od wykrytego urządzenia czy też rozmiaru ekranu, z którego przeglądana jest nasza strona internetowa.

Ustawienia parametru ALT

Atrybut ALT to alternatywny tekst dla zdjęć, wyświetlany wówczas, gdy występują problemy z załadowaniem się plików graficznych. Dla optymalizacji SEO opisanie atrybutów ALT ma duże znaczenie. Opisanie atrybutów ALT za pomocą słów kluczowych pozwala robotom wyszukiwarki zrozumieć, co na tym zdjęciu się znajduje. Ważne jest, aby w opisywaniu atrybutów ALT dla obrazków stosować kilka zasad:

  • opisuj jasno i prosto każde zdjęcie,
  • nie używaj na siłę słów kluczowych do opisu grafik (nie twórz z opisu reklamy),
  • weryfikuj, czy wszystkie grafiki na stronie mają opisane atrybuty ALT.

Odpowiednie formaty plików graficznych

Biorąc pod uwagę ich format, pliki graficzne ładowane na stronę internetową możemy podzielić na trzy grupy. Są nimi JPG, PNG oraz GIF.
Pliki JPG oraz JPEG są obok formatów PNG i GIF najczęściej wykorzystywanymi plikami na stronach internetowych. Obrazy w formacie JPG mogą być kompresowane, wiąże się to jednak z utratą ich jakości, natomiast plusem jest to, że waga plików po kompresji jest zadowalająca. W większości przypadków grafiki publikowane na stronach internetowych posiadają format JPG. Zapewnia on najlepszy stosunek wagi zdjęcia do jego jakości.
Pliki GIF będą miały gorszą jakość obrazu niż JPG. Format tego typu wykorzystywany jest do prostych obrazów, ikon lub animacji. Pliki zapisane w tym formacie nie nadają się do publikacji na stronach internetowych w formie złożonych zdjęć ze względu na małą paletę kolorów.
Pliki PNG są alternatywą dla formatu GIF. Obsługują większą liczbę kolorów, a także nie pogarszają jakości podczas stosowania kompresji, tak jak to robią pliki zapisane w formacie JPG. Poprawa jakości pociąga za sobą wadę w postaci zwiększenia wagi plików w stosunku do formatu JPG.

Optymalizacja grafiki na stronie internetowej przynosi same korzyści. Kompresując grafiki, zyskujemy krótszy czas ładowania się strony internetowej, co dla przeciętnego Kowalskiego eliminuje problem wolnego łącza i znacznie poprawia komfort przeglądania strony internetowej.

Tomasz Czechowski Tomasz Czechowski
Wróć do listy

Dodaj komentarz