Optymalizacja grafiki na potrzeby www w WordPress

Grafiki mają istotny wpływ na odbiór i ocenę jakości strony przez użytkownika. Wpływają również na widoczność strony w Google. Nieprawidłowo zoptymalizowane obrazki wydłużają czas ładowania się witryny i zwiększają współczynnik odrzuceń. A wystarczy tylko parę kroków, aby temu zapobiec. Dziś o optymalizacji grafiki na potrzeby www na przykładzie WordPressa.

Pokażę Ci jak przygotować obrazek do wrzucenia na stronę lub bloga, tak aby nie narobił Ci na nim bałaganu.

Wybór odpowiednich zdjęć

Obrazki na stronie lub blogu powinny być spójne z ich tematyką. Oczywiście wrzucaj zdjęcia w wysokiej jakości, unikalne, a jeszcze lepiej własnoręcznie zrobione. Jeśli masz talent albo znasz kogoś, kto taki ma, możesz wykorzystać ilustracje – jeszcze bardziej podkręcisz wyjątkowość witryny.

Ilustracja ptak - jak wyróżnić wpis na blogu

Oryginalne ilustracje wyróżniają witrynę internetową

W pozostałych przypadkach (czyli tak naprawdę w większości) skorzystaj z płatnych lub darmowych banków zdjęć.

Przed pobraniem każdej grafiki w sieci sprawdź częstość jej występowania na innych stronach. Możesz to zrobić sprawnie przy pomocy narzędzia tineye.

Optymalizacja grafiki na potrzeby www, czyli zmniejszanie rozmiarów zdjęć

Nie ma potrzeby wrzucania na stronę grafik o dużych rozmiarach. Takie obrazki tylko obciążą witrynę i wpłyną negatywnie na jej pozycję w wyszukiwarce. Zdenerwują również użytkowników, którzy uciekną ze strony, zanim grafiki się załadują.

Istnieją narzędzia, które błyskawicznie zmniejszają wymiary zdjęć, jednocześnie praktycznie nie wpływając na ich jakość. Z nimi optymalizacja dowolnej grafiki na potrzeby strony www lub bloga stanie się prostsza i przyjemna.

Korzystam z dwóch takich narzędzi:

Najpierw wrzucam obrazek do pierwszego z nich, a potem kończę robotę w drugim.

W Bulkresize możesz zmniejszyć zdjęcia skalując je do procentowej wartości oryginalnego obrazu, poprzez określenie rozmiaru pliku, jego jakości czy konkretnych wymiarów. Zwykle ustawiam „Wymiary grafiki” na 86 kB i 75% oryginalnej jakości. Sprawdzam potem, jak obrazek wygląda na stronie.

Bulkresize ustawienia konwersji grafik przykład

TinyPNG pozwala jeszcze bardziej zmniejszyć rozmiary grafik, zarówno w formacie jpg jak i png. Konwertuje również animowane grafiki png-owe. A cały ich interfejs wygląda bardzo przyjaźnie.

Zmniejszanie obrazka tinypng optymalizacja grafik

Dobranie tytułów i meta tagów do grafik

Google czyta obrazki po ich opisach tekstowych i na tej podstawie może je wyświetlać, np. w Google grafika. Oznaczenia obrazków przydają się również przy optymalizacji stron www, zwłaszcza gdy umieścisz w nich odpowiednie słowa kluczowe.

Dość teorii, teraz praktyka. Spójrz, jak wygląda optymalizacja grafiki na potrzeby www pod kątem opisów w WordPressie.

Najlepiej uzupełniać:

  • Opis alt obrazka, czyli opis grafiki, który wyświetla się w sytuacji, gdy sam obrazek nie pokazuje się na stronie;
  •  Meta Title, opis obrazka, który powinien wyświetlać się po najechaniu na grafikę.

Możesz również wprowadzić etykietę wrzuconego obrazka. Etykieta to po prostu opis, który będzie znajdował się tuż pod grafiką. To też dobre miejsce na umieszczenie słów kluczowych.

Im lepiej otoczymy obrazek odpowiednimi frazami, tym lepiej dla nas. Google zrozumie, co znajduje się na ilustracji i tym samym zwiększy się szansa pojawienia się grafiki w obrazach Google.

Jak dodać powyższe opisy do grafik?

Na początku dodaj obrazek. Możesz to zrobić w oknie dodawania wpisu w WordPress przez dodaj medium lub obrazek wyróżniający.

Albo też wchodząc w zakładkę Media na WordPress (na pasku po lewej stronie). Gdy dodasz zdjęcie i w nie wejdziesz, pojawi się poniższe okienko.

Optymalizacja grafiki w WordPressie

Tekst alternatywny to wskazany powyżej opis alt grafiki. Musi być spójny z tym, co znajduje się na zdjęciu, dobrze jak zawiera w sobie słowa kluczowe.

Tytuł to Meta Title i tam również warto wrzucić frazy kluczowe, na które chcesz się wyświetlać. Zadbaj, aby oba opisy – opis alt i meta title – były od siebie różne.

Etykieta to po prostu opis pod obrazkiem. Możesz pozostawić to pole puste, jeśli chcesz. Do niektórych grafik jednak warto dodać coś od siebie.

W polu opis zaś znajduje się dodatkowe miejsce na dopisanie czegoś o obrazku. W większości przypadków pole to możesz zostawić puste lub wypełnić słowem kluczowym.

Ważna jest także nazwa pliku. Powinna być czytelna dla odbiorcy, a poszczególne wyrazy najlepiej oddzielić od siebie myślnikami.

A, obrazek wrzuciłam tylko na chwilę, więc nie zmieniałam jego rozmiarów. Po wrzuceniu go do obu programów do zmniejszania grafik, jego rozmiar spadł z 810 kB (zmniejszony automatycznie przez WordPress z 3,35 MB) do 63,7 kB.

Dlaczego warto to wszystko robić?

Optymalizacja grafiki – zdjęć czy ilustracji – na potrzeby www to konieczność z 3 powodów.

1. Strona ładuje się szybciej

Małe grafiki przyspieszają proces ładowania się strony. A jest to czynnik, który Google bierze pod uwagę w trakcie pozycjonowania Twojej witryny internetowej. Ponadto im szybciej pokażesz odbiorcy swoją stronę, tym mniejsze ryzyko, że z niej ucieknie. Ludzie są niecierpliwi, chcą błyskawicznie otrzymywać informacje – szczególnie na urządzeniach mobilnych.

2. Wyróżniasz się (a więc zostajesz zapamiętany)

Oryginalne zdjęcia czy ilustracje sprawiają, że Twoja strona zaczyna wyróżniać się wśród innych witryn. To zaś powoduje, że zostajesz zapamiętany – niezależnie od tego, czy prowadzisz firmę czy własnego bloga. A jak zapamiętany, to ludzie będą wracać i opowiadać o Twojej stronie innym.

3. Ludzie chcą przeglądać i czytać Twoją stronę lub bloga

Ściany tekstu w sieci są niebezpieczne. Odstraszają czytelników. Dzieląc treści na mniejsze części (zgodnie z zasadami Webwritingu), a jednocześnie wrzucając między nimi tematycznie powiązane obrazki, sprawiasz, że chce się u Ciebie przebywać. Ludzie czytają, oglądają i przechodzą na kolejne podstrony. A w konsekwencji stają się Twoimi lojalnymi fanami i od Ciebie kupują.

 

Przeczytaj również: