Dlaczego optymalizacja obrazków na stronie jest ważna?

Spędziłem do tej pory dużo czasu na audytach stron internetowych, które nie działają, tak jak oczekiwano w wyszukiwarkach.

Jaki jest powszechny problem, który spotykam w prawie każdym audycie? Optymalizacja obrazków lub jej brak. Często dostaję pytania, dlaczego optymalizowanie zdjęć jest, aż tak ważna? Ponieważ większość sklepów internetowych czy stron z usługami takie obrazki prezentuje – jest to standard – dlatego liczba zaniedbań w tym obszarze jest duża. Gdyby nikt nie prezentował

Wydaje się to błahym problem w kontekście grupy innych rzeczy, które trzeba wykonać na stronie www, ale często czas poświęcony na optymalizację obrazków szybko i znacznie wpłynie na czas ładowania strony.
Zdarzają się sytuacje, gdy tylko ten zabieg wystarczy żeby zbliżyć się do granicy 1-2 sekund czasu ładowania.

Strona na której jesteś ładuje się w mniej jak 1s, ale tu zastosowałem inne rozwiązanie o którym będzie osobny wpis 🙂

Kiedy używam sformułowania “optymalizacja obrazków” możesz myśleć o tym na trzy sposoby:

• sprawić by zdjęcia wyglądały dobrze, były w dobrych pozycjach, elementy tekstu były widoczne (edycja css lub bezpośrednio grafiki),
• szybko się ładowały – redukcja rozmiaru/wielkości, wykorzystanie lazy load, picture lub @media queries,
• sprawić by roboty wyszukiwarek nie miały problemu z indeksowaniem.

Nie ważne czy posiadasz sklep, blog czy prostą stronę internetową – skoro czytasz ten artykuł chcesz, żeby wyglądała profesjonalnie, szybko się ładowała oraz przynosiła konwersje – dlatego opłaca się zoptymalizować każdy używany obraz. Warto też nie zaniedbywać kwestii SEO. O tym będzie ten artykuł, dlatego zapraszam do dalszej części.

Wpływ wykorzystania zdjęć na odbiór strony www

Większość z nas przeglądając strony internetowe spotkała się z sytuacją, w której obraz powoli zaczyna pojawiać się na ekranie wcześniej tworząc białą plamę.
Jest to znany fakt – ludzie nie będą czekać wiecznie na załadowanie się strony.
W czasach kiedy większość rzeczy jest na wyciągniecie ręki cierpliwość i wymagania użytkowników są bardzo duże. Trzeba to zaakceptować i dostosować się do sytuacji. Dlaczego?

Jeśli Twoja strona ładuje się więcej jak 5 sekund to możesz stracić ogromną ilość ruchu.
W dobrze przeprowadzonej optymalizacji należy dążyć do 1-2-sekundowego czasu ładowania strony. Oczywiście osiągalny jest też czas poniżej 1s.

Zadania, które można podjąć dzielą się na prostrze, mniej czasochłonne i te trudniejsze wymagające większego zaangażowania lub pomocy specjalisty.

W pierwszej kolejności warto zająć się zadaniami takimi jak zredukowanie rozmiaru px obrazka, zmiana na lżejszą grafikę lub skorzystać z CDN – już te trzy kroki mogą znacznie poprawić wygodę korzystania z Twojej strony.

Z bardziej technicznych implementacji ciekawym rozwiązaniem jest metoda lazy load, która doładowuje obrazki w locie tzn. ukrywa elementy które nie są na ekranie w momencie wczytywanie strony na ekranie.

Dzięki czemu nie jest marnowany transfer na ładowanie elementów, które nie są widoczne dla użytkownika na ekranie w danym momencie. Wyobraż sobie, że gdzieś w okolicy stopki strony masz obraz projektu domu który sprzedajesz więć musi być w dużej rozdzielczości, żeby widać było dokładne szczegóły – waży 10MB. Jeśli nie użyjesz lazy load będzie on ładowany zawsze. Jeśli użyjesz, to doładuje się on w raz scrolowaniem strony przez użytkownika. Poradnik jak wdrożyć lazy load na stronie.

Optymalizacja obrazków, a konwersja na stronie

Konwersja sklepu: 1%
Odwiedzająych: 1000
Zamówienie: 200 PLN

Wyobraźmy sobie, że przyciągasz 1000 odwiedzających w ciągu dnia – do tej pory na każdych 100 odwiedzający byłą jedna konwersja o wartości 200 PLN.
W ramach tego przykładu zakładamy, że Twoja strona ładuje się 7 sekund, więc z 1000 odwiedzających tylko 10% zostaje – reszta wychodzi. Bounce Rate rośnie. Potencjalnie 100 osób poczeka na załadowanie więc… zdobędziesz 1 sprzedaż +200 PLN przychodu.

Po jakimś czasie zdiagnozowałeś problem przeładowanych obrazków i ich wpływu na szybkość ładowania strony i udało Ci się zmniejszyć czas ładowania do 2 sekund – 80% osób zostaje na stronie. To 8 sprzedaży i 1200 przychodu.

Optymalizacja SEO

tagi ALT – dlaczego warto dodawać?

Rozpoznawanie obrazków przez Google działa coraz lepiej, ale wciąż rekomendowane jest uzupełniać tagi alt obrazków. Tagi te nie będą widoczne dla przeciętnego użytkownika, ale dają wyszukiwarce podstawowa pojęcie o tym czego dotyczy każdy obraz. Nie zapominajmy o osobach niedowidzących – w poruszaniu się w po witrynie używają oprogramowania opartego o dźwięk.

W skrócie – jeśli mamy obrazek psa warto dodać znacznik w stylu

alt="zdjęcie psa na spacerze"

Ułatwi to również wyszukiwarkom rozpoznanie czego dotyczy Twoja strona ogółem.

Ważne: nie próbuj “upychać” słów kluczowych – podchodzi to pod keyword stuffing

Kiedy dodać Sitemap XML?

Nie ma sztywnej regułu, ale kiedy Twój serwis posiada znaczną ilość zdjęć warto zastanowić się nad przygotowaniu odrębnej sitemapy w której znajdą się adresu url dla obrazków. Dzięki temu zwiększy się szansa na udany proces indeksowania w wyszukiwarce grafiki.

Wybierz zdjęcie odpowiednie do kontekstu

Jeśli tekst czy artykuł na blogu dotyczy siatkówki nie warto dodawać zdjęć związanych z grami internetowymi. Zdjęcie, które otoczone będzie odpowiadającemu jego tematyce warstwie tekstu będą lepiej odpierane przez czytających i dodadzą wiarygodności. Może wpłynąć to na obniżenie bounce rate i zwiększenie czasu sesji.

Odpowiednio nazwij pliki obrazków

Większość osób, która samodzielnie prowadzi strony internetowe często nie ma czasu na bawienie się w zmianę adresów obrazków. Jednak warto. Dlaczego?

Zarządzanie zdjęciami będzie prostsze, a odpowiednia nazwa grafiki wraz z tagami alt może dać Ci pozytywny efekt w SEO.
Dla spójności nie warto używać interpunkcji i spacji. Warto unikać polskich znaków. Najlepiej odstępy tworzyć za pomocą “-”. Do użytej nazwy opisz obrazek jak najbardziej zwięźle.

Szybkość ładowania strony vs optymalizacja obrazków

Zmień rozmiar obrazów, aby zoptymalizować szybkość i wygląd strony

Z obrazami na stronach internetowych kluczem jest, aby znaleźć odpowiednią równowagę między rozmiarem a rozdzielczością.

Im wyższa rozdzielczość tym większy rozmiar pliku. Duże obrazy i wolny czas ładowania strony są szczególnie denerwujące dla użytkowników mobilnych. Jak więc osiągnąć równowagę pomiędzy rozdzielczością i rozmiarem?

• optymalny rozmiar pliku, dla dużych obrazków rozsądne są wielkość rzędy 150 KB,
• jeśli mamy element na stronie który wiemy, że zajmie całą szerokość, warto wrzucać obrazki maksymalnie np. do 1600px szerokości, a za pomocą CSS wypełnić cały obszar,
• jeśli ściągamy zdjęcia z stocków często są one zbyt duże w oryginalne. Dlatego przed wrzuceniem ich na serwer trzeba zrobić odpowiednie korekty w rozmiarze korzystając z programu graficznego,
• jeśli zdjęcie mamy przycięte do porządanego przez nas rozmiaru, warto dokonać ich konwersji korzystając z bezpłatnych serwisów takich jak mój ulubiony imagecompressor.com

Jak dodać Lazy Load na stronie?

Jest kilka dostępnych bibliotek – ja mam doświadczenie z lozad.js ponieważ jest lekka i nie ma zależności od Jquery. Wspiera <img>, <picture>, iframe, video, audio, obrazki ładowane przez background-images w css.

Udało mi się wdrożyć Lazy Load bez wtyczki w Woocomerce jak i dedykowanym szablonie. Nie będę w tym artykule przechodził przez dokładny poradnik, ale generalna zasada jest bardzo prosta.

Przykład dla obrazków:

1. Musisz dodać skrypt w <head> strony,
2. Dodaj klasę “lozad” do obrazków które chcesz, aby były ładowane w locie,

3. Dodaj JS. Biblioteka, której używam nie ma zależności od Jquery.

   const observer = lozad(); // lazy loads elements with default selector as '.lozad'
   observer.observe();
   

Jeśli poprawnie udało Ci się wykonać opisane wyżej kroki po załadowaniu strony w elemencie <img> powinieneś widzieć:

data-loaded="true"

Różne obrazki w zależności od wielkości urządzenia wykorzystując CSS

Metoda jest bardzo prosta. Jeśli mamy dla przykładu sekcję w której używamy obrazka ładowanego przez CSS to możemy za pomocą media queries wybrać inny obrazek w zależności od rozdzielczości. Poniżej przykładowy kod:

.section-class {
  background-image: url("../images/768x250.jpg");
  background-size: cover;
  background-position: top;
  position: relative; 
}
@media (min-width: 768px) {
 .section-class {
  background-image: url("../images/1200x400.jpg");
} 

Innymi słowy domyślnie ładujemy obrazek w rozmiarze 768×250, a od szerokości 768px będzie ładował się obrazek 1200x400px. Można dzięki temu oszczędzić kilkanaście KB danych potrzebnych do załadowanie strony.

Wykorzystaj możliwości HTML

Picture jest nowym elementem, który wchodzi w skład HTML5. Pozwala na umieszczenie wielu znaczników z których każdy określał będzie różne obrazki wraz z warunkami ich ładowania. Dzięki temu możemy załadować obrazek o odpowiednim rozmiarze najlepiej wykorzystując przepustowość. Rozwiązanie to działa w praktyce podobnie jak z wykorzystwaniem @media-queries, ale tym razem wszystko wykonuje sie w html.

Jak działa tag picture ?

1. Stwórz element <picture></picture>,
2. W obrębie tego elementu dodaj tagi <source> dla każdego elementu który chcesz użyć,
3. Dodać określenie media zawierające instrukcję jak mają ładować się obrazki,
4. Dodaj atrybuty srcset wraz z nazwą obrazka jaki ma się ładować,
5. Dodaj element <img> jako “fallback” w razie gdyby coś poszło nie tak.

Finalnie kod html, który będzie sprawdzał czy szerokość jest mniejsza od 768px – wtedy załaduje mniejszy obrazek:

<picture>
    <source srcset="768x250.jpg" media="(max-width: 768px)">
    <source srcset="1200x400.jpg ">
    <img srcset="1200x400.jpg " alt="My default image">
</picture>

Aktualnie <picture> jest wspierany przez przeglądarki w 92% .

Podsumowanie

Jeśli zastanawiasz się jaki wpływ ma optymalizacja obrazków na czas ładowania strony po przeczytaniu tego artykułu powinieneś wiedzieć, że znaczący.

Zlecając taką prace specjaliście czy wykonując samemu weź pod uwagę to, że może być to konkretny wzrost Twojej sprzedaży np. w sklepie internetowym ponieważ istenieje korelacja pomiędzy czasem ładowania strony, a konwersją.

PS. Warto wspomnieć, że nie zawsze same obrazki spowalniają stronę (choć często są jednym z głównych winowajców) – kod strony, technologia wykonania czy CMS którym zarządzana jest strona może mieć dużo do czynienia.

Jeśli obawiasz się jak szybko ładuje się Twoja strona i jak można to poprawić, a sam nie masz czasu się tym zająć polecam przeprowadzić audyt strony internetowej.