Dzisiaj kolejna bardzo ważna rzecz dotycząca strony internetowej – jak przygotować zdjęcia i obrazek wyróżniający na blog.

Nie tylko „jemy” oczami, ale również „kupujemy” oczami. Grafika odgrywa szczególnie ważną rolę w zatrzymaniu uwagi osoby wchodzącej na stronę internetową. I o tym uchwyceniu uwagi powinnaś myśleć tworząc grafikę na Twoją stronę.

Z tego wpisu dowiesz się:

  1. jak zoptymalizować zdjęcia na stronę
  2. jak przygotować obrazek wyróżniający

Jak przygotować zdjęcia na stronę

Zdjęcia na stronę internetową MUSZĄ być odpowiednio przygotowane, zanim wrzucisz je do biblioteki WordPressa. Dlaczego? Ponieważ właściwie zoptymalizowane zdjęcie ma spory wpływ na pozycjonowanie strony w Google.

PRO TIP

Najczęstszy maksymalny wymiar zdjęć wyświetlany przez strony www

1920 x 1080 px – poziom

1300 × 900 px – pion

Zanim wrzucisz zdjęcie na stronę:

  • zmień jego nazwę automatycznie zapisaną przez aparat fotograficzny np.: z DSC_123 czy IMGL0123 na opis tego, co znajduje się na zdjęciu bez polskich znaków, a najlepiej będzie jeśli zawrzesz w nazwie słowo kluczowe, ale nie rób tego na siłę 😉
  • odchudź zdjęcie używając darmowych programów dostępnych online (polecam: TinyJPG lub Image Resizer) zmniejszają wagę zdjęcia bez utraty jakości – a o to przecież chodzi, prawda? Zdjęcie powinno być mniejsze niż 1 MB, optymalna waga zdjęcia to wartość około 300 KB,
  • najlepszym formatem jest JPG, gdyż zapewnia on najwyższą jakość w stosunku do rozmiaru zdjęcia,

Gdy już dodasz zdjęcie na stronę:

  • dodaj tekst alternatywny do zdjęć, czyli atrybut ALT. Jest on bardzo istotny z dwóch powodów. W momencie, gdy z jakiegoś powodu przeglądarka nie może wyświetlić grafiki – wtedy pojawia się atrybut ALT, czyli opis tego, co znajduje się na zdjęciu. Po drugie – zdecydowanie ważniejsze – specjalne programy odczytują tekst atrybutu ALT i osoby z dysfunkcją wzroku mogą się dowiedzieć co jest na zdjęciu.
tekst alternatywny

Jak przygotować obrazek wyróżniający

Gdy kończę pracę nad stroną zawsze przekazuję klientce rozmiar obrazka wyróżniającego – czyli zdjęcia, które jest zwiastunem, zajawką, przedstawicielem wpisu blogowego.

Gdy zdjęcia są równe, nic się nie rozjeżdża to wszystko jest dopracowane i wygląda estetycznie. Dlaczego podaję klientce rozmiar zdjęcia? Właśnie po to, aby zadbała o spójny, dopracowany wygląd strony głównej, z której pochodzi powyższy zrzut ekranu, oraz strony blogowej – zrzut poniżej:

Jak przygotować obrazek wyróżniający według określonych rozmiarów?

Najprostszy sposób to wykorzystanie aplikacji np. Canva – nawet darmowa wersja daje taką możliwość.

Krok 1 – logujesz się do Canvy i w prawym górnym rogu znajdziesz przycisk z napisem: Rozmiar niestandardowy – kliknij go

Krok 2 – wpisz rozmiary, których potrzebujesz i kliknij – Utwórz nowy projekt

Krok 3 – wstaw zdjęcie, którego chcesz użyć jako obrazek wyróżniający

I pobierz 🙂 Proste, prawda?

Jeśli pomogłam Ci tym króciutkim poradnikiem, to jestem przeszczęśliwa. Będzie mi bardzo miło gdy dasz mi znać w komentarzu.

A jeśli potrzebujesz wsparcia w innych obszarach, sprawdź moją ofertę, z przyjemnością pomogę Ci rozwiązać Twój problem.