Your browser does not support JavaScript!

Zależy nam na tym, aby korzystanie z naszego serwisu było dla Państwa komfortowe. W związku z tym staramy się dostosować dostępne w nim treści do Państwa preferencji i zainteresowań. Jest to możliwe dzięki przechowywaniu w Państwa przeglądarkach plików cookies oraz przetwarzaniu przez PromoTraffic Sp.z.o.o. (administratora) danych osobowych w celach analitycznych i statystycznych. Korzystając nadal z naszego serwisu, bez zmian ustawień w zakresie prywatności, wyrażają Państwo zgodę na zapisywanie w przeglądarce plików cookies. Jednocześnie informujemy, że istnieje możliwość zmiany ustawień dotyczące plików cookies w swojej przeglądarce. W celu uzyskania dodatkowych informacji o zasadach przetwarzania danych osobowych oraz przysługujących Państwu w związku z tym prawach prosimy o zapoznanie się z treścią naszej Polityki prywatności

Poznaj szczegóły kampanii PPC dla Ekomaluch, która została uznana najlepszą w Europie w kategorii Best Low Budget Campaign (PPC)

SEO

Optymalizacja grafik - jak zrobić to dobrze?

3 min 326
Filip Świercz | 21.04.2022

Projektując swoją stronę www najczęściej sugerujemy się własnymi upodobaniami. W odpowiedni sposób projektujemy każdy etap, dbając o wszystkie szczegóły. Wiele firm zatrudnia profesjonalistów, którzy bazując na obecnych trendach odpowiednio dostosują stronę pod kątem UX/UI. Kolejnym etapem jest odpowiednie zaprogramowanie strony, ułożenie elementów oraz zadbanie o odpowiednie działanie. Po tym wszystkim dostajemy naszą idealną stronę, która pięknie wygląda, ale... działa bardzo wolno? Czy to wina projektanta? A może programistów? Problemem mogą być właśnie grafiki.

Optymalizacja grafik - od czego zacząć?

Zbyt duży rozmiar grafik może w znacznym stopniu spowolnić działanie naszej witryny internetowej. Co więcej, może nam zmniejszyć ruch organiczny z Google grafika. Od czego w takim razie powinniśmy zacząć optymalizację zdjęć na naszej stronie?

W pierwszej kolejności powinniśmy zwrócić uwagę na wagę naszych grafik. Przydatna w tym przypadku może okazać się wtyczka Image Size Info, która za pomocą kliknięcia prawym klawiszem myszy pokazuje nam jej wagę.

Optymalizacja grafiki - waga grafiki

Wtyczka ta także pokazuje nam takie dane jak jej rozszerzenie, nazwę czy wymiary plików graficznych.

Prędkość ładowania strony a optymalizacja grafiki

Niezwykle cennym, darmowym narzędziem, które wskazuje nam problemy z prędkością ładowania naszej strony, jest Page Speed Insight. Zanim przystąpimy do optymalizacji zdjęć warto sprawdzić, czy to właśnie w nich leży nasz problem.

Optymalizacja zdjęć

Jeśli wynik okaże się być poniżej naszych oczekiwań, a dodatkowo jako główną przyczynę narzędzie wskaże właśnie problemy z ładowaniem grafik - powinniśmy podjąć działania mające na celu obniżenie ich wagi i rozmiar.

Zmiana formatów grafik

Pierwszym etapem z pewnością powinna być zmiana formatów grafik na te, które uważa się za nowoczesne i przystosowane do szybkiego wczytywania, czyli np. .webP. Pozwalają one na oszczędność czasu ładowania strony, co przekłada się na ogólny odbiór strony przez użytkownika.

Uwaga! Musimy mieć na uwadze, że nie każdy format jest obsługiwany przez wszystkie przeglądarki. Wyżej wspomniany .webP nie jest odpowiednio odczytywany przez desktopową przeglądarkę Safari. Aby dokładnie sprawdzić, jakie formaty plików graficznych będą dla nas odpowiednie, zalecamy sprawdzenie ich na stronie https://caniuse.com/.

W przypadku, gdy mamy do czynienia grafikami powyżej 100kB powinniśmy rozważyć ich "odchudzenie". Tutaj nasuwa się pytanie - w jaki sposób to zrobić? Skąd wiedzieć, jakiego formatu powinniśmy użyć, jaka kompresja najkorzystniej wpłynie na czas ładowania strony? W tym celu warto posiłkować się narzędziem https://webspeedtest.cloudinary.com/, które wykonuje szczegółowy audyt strony oraz wskazuje, jak zmiana formatu danej grafiki może wpłynąć na jej całkowitą wagę.

Optymalizacja wagi grafik

To narzędzie skanuje pliki graficzne, które znajdują się na stronie oraz pokazuje potencjalne oszczędności. W przypadku zdjęć, zmiana formatu połączona z kompresją, np. za pomocą narzędzia https://tinypng.com/, pozwala na znaczną oszczędność miejsca oraz przyśpieszenie ładowania strony.

Optymalizacja zdjęć, a pozycjonowanie stron

Obecnie prędkość ładowania strony jest jednym z czynników rankingowych. W niedawnej aktualizacji algorytmów szczególny nacisk był kładziony na desktopy. Jest to o tyle zaskakujące, że od dłuższego czasu główne aktualizacje były kierowane na urządzenia mobilne. Pokazuje to, że Google dąży do jak najlepszych odczuć użytkownika związanych z przeglądaniem strony internetowej. Należy pamiętać, że wciąż, mimo dominacji użytkowników mobilnych w Internecie, ok. 40% ruchu nadal pochodzi z desktopów. Dlatego prędkość ładowania również powinna być możliwie najlepsza.

Ruch w Internecie na urządzeniach mobilnych, desktopach i tabletach

Atrybut alt

Atrybut alt to alternatywny podpis grafiki, która wyświetla się, gdy wystąpił błąd podczas ładowania strony. Wyświetlany jest wtedy właśnie tekst alternatywny, czyli zawartość atrybutu alt. Jest on również niezwykle ważny dla osób niewidomych lub niedowidzących, które korzystają z czytników ekranowych. Używając funkcji czytania tekstu czytnik opisze naszą grafikę właśnie za pomocą zawartości atrybutu alt.

Wypełniony atrybut alt w kodzie strony

Warto szczegółowo opisać grafiki, wiele osób umieszcza w nich także słowa kluczowe, co według danych wpływa korzystnie na pozycjonowanie strony.

Inne zabiegi optymalizacji zdjęć

Skupiając się na optymalizacji pliku graficznego powinniśmy także zadbać o jego prawidłowy adres URL. W większości CMSów nazwa pliku graficznego warunkuje jego adres URL. Najczęściej jednak grafika jest już dodana na stronie i pojawia się w wynikach wyszukiwania. Czy powinniśmy ją wtedy wgrywać ponownie na stronę, ale już ze zmienioną nazwą pliku? Zdecydowanie nie! Jeśli na naszej stronie internetowej pojawia się ruch z grafiki - nie powinniśmy ich usuwać i wgrywać na nowo. Pamiętajmy na przyszłość, aby prawidłowo nazywać pliki graficzne oraz warto w ich nazwie przemycić kilka słów kluczowych. Warto także zadbać, aby w nazwach nie było polskich znaków, ponieważ nie będą wyświetlały się w adresach URL. Może to doprowadzić do powstawania nieprzyjaznych adresów URL.

Grafiki w sitemapie

Kolejnym etapem optymalizacji grafik jest dodanie ich do mapy strony. Jest to kolejny, opcjonalny krok, który może pozwolić nam na lepsze zrozumienie i odczytanie zdjęć na stronie. Dodatkowo może zwiększać szansę na pojawianie się grafik w wynikach wyszukiwania oraz Google grafika.

Grafiki w wynikach wyszukiwania

Podsumowanie

Optymalizacja grafik to często najprostsza, a zarazem przynosząca duże korzyści operacja, wpływająca nie tylko na prędkość ładowania strony, ale także na ogólne odczucia użytkownika związane ze stroną. Powinniśmy dodatkowo zadbać o wypełnienie atrybutów alt, zmienić rozmiar obrazów oraz pamiętać o prawidłowej nazwie pliku graficznego. Można powiedzieć, że w przypadku optymalizacji grafik małe zmiany przynoszą duże efekty.

Filip Świercz

SEO Executive Specialist

Pochodzi z małego miasteczka w centralnej Polsce zwanego Przysuchą. Inżynier górnictwa z wykształcenia, specjalista od SEO z zawodu i zamiłowania. W wolnych chwilach stara się odespać godziny pracy, obejrzeć film czy pograć w gry video. Fan piłki nożnej, głównie ligi angielskiej.

Zobacz wszystkie artykuły tego autora
ebook image

Pobierz bezpłatny e-book

Zapisz się do naszego newslettera, a my podeślemy Ci e-booka "Digital marketing dla e-commerce " bezpośrednio na Twoją skrzynkę.