Optymalizacja grafik na stronie internetowej – jak zrobić to samemu

Strona internetowa jest najistotniejszą wizytówką każdego e-commerce, a zarazem odzwierciedleniem, jakiego poziomu usług jest w stanie spodziewać się klient, będący blisko skorzystania z Twojej oferty. Tworząc witrynę i chcąc przejść do kwestii satysfakcjonującego poziomu User Experience, należy zacząć od tego, co jako pierwsze rzuca się w oczy, czyli grafik. O ile wybór książki zależy przede wszystkim od jej treści, a nie obrazków, tak w przypadku strony internetowej, grafiki na niej zawarte odgrywają niezwykle istotną rolę.   

Jak samodzielnie zoptymalizować grafiki na stronie internetowej? 

Publikując zdjęcia i jakiekolwiek inne pliki graficzne na swojej stronie internetowej, warto zwrócić uwagę na ich odpowiednią optymalizację. Jeśli Twoja konkurencja o tym zapomni, będziesz nie krok, a kilka kroków SEO przed nimi. 

Rozmiar i waga grafiki na stronie

Zaczynając od podstaw, zadbajmy o to, aby rozmiar i waga grafiki były przystępne dla Twojej strony internetowej. Zmniejszmy wymiary dużej grafiki, która po załączeniu, tak czy inaczej, zostanie pomniejszona w siatce witryny. Rozmiar grafiki możemy zmienić w dowolnym programie graficznym lub na jednej ze stron internetowych, udostępniających taką opcję.  

Dobrym przykładem jest dostępny online darmowy Image Resizer od Adobe, który dodatkowo proponuje użytkownikowi popularne proporcje, zgodne z optymalnym rozmiarem grafik w konkretnym medium.  
 
Warto również poznać możliwości oferowane przez stronę tinypng.com/

Jak działa TinyPNG? 

TinyPNG wykorzystuje inteligentne techniki kompresji stratnej, aby zmniejszyć wagę plików WEBP, JPEG i PNG. Dzięki selektywnemu zmniejszaniu liczby kolorów w obrazie do przechowywania danych potrzeba mniej bajtów. Efekt jest prawie niewidoczny, ale powoduje bardzo dużą różnicę w wielkości pliku!

Użyj TinyPNG, aby zmniejszyć obrazy w swoich aplikacjach i witrynach. Będzie zużywać mniej przepustowości i ładować się szybciej. Na poniższym przykładzie pokazaliśmy, że możliwe jest zmniejszenie rozmiaru pliku nawet o ponad 90% - z 511KB do 56KB.

Z kolei jeśli chodzi o format zapisu, postaraj się zachować jak najmniejszą wagę pliku. W przypadku dobrze znanych rozszerzeń plików, do większych zdjęć najlepiej sprawdzi się używanie formatów nowej generacji WebP i AVIF (dla nowszych CMS) oraz PNG, natomiast do mniejszych zaleca się stosować podstawowe JPG. Waga obrazów ma przede wszystkim wpływ na czas ładowania strony. Chcąc zadbać o wysoki poziom UX, powinien być on jak najkrótszy (do około 3 sekund). 
 
Alternatywnym formatem zapisu jest WebP, stworzony przez Google w celu zastąpienia starych plików wersjami o mniejszym rozmiarze, jednocześnie utrzymując ich pierwotną jakość. Choć format nie jest dostępny jeszcze w każdej przeglądarce (jedynie w Chrome i Operze), aktualnie jest dużo korzystniejszym rozwiązaniem dla udostępnianych na stronie internetowej plików graficznych. Oferując mniejszy rozmiar pliku, a tym samym szybsze ładowanie się, skutecznie zastąpi stare rozszerzenia. 

Jaka nazwa pliku graficznego?

Jeśli chcesz, aby obraz z Twojej strony trafił do Google Grafika, dzięki czemu użytkownik mógłby w szybki sposób po zdjęciu trafić na stronę internetową, pozwól wyszukiwarce dowiedzieć się, co na tej grafice się znajduje. W tym celu należy pamiętać o odpowiednim nazwaniu pliku. Dlatego jeśli na grafice znajduje się np. piłka do koszykówki, lepiej, aby nic niewnoszącą nazwę pliku jak np. „PIC_454255.png”, zamienić na „pilka_do_koszykowki.png”, gdzie Google otrzyma dokładny komunikat, czego się może na niej spodziewać. 

Zawartość obrazu 

Kolejna rzecz dotyczy samego wyboru grafiki. Może wydawać się to dość oczywiste, jednak w internecie jest przesyt powtarzających się lub nieadekwatnych do treści obrazów. Największą wartość będą miały oryginalne fotografie lub grafiki, które odpowiadając na potrzeby użytkowników, po dobrym zoptymalizowaniu mogą zająć wysokie miejsce wśród grafik Google. Jeśli nie mamy własnych fotografii, możemy skorzystać z internetowych baz zdjęć, jak np. Shutterstock.  
Warto wtedy jednak brać pod uwagę częstotliwość wykorzystywania danego obrazu i starać się korzystać z tych jak najrzadziej używanych.  

Atrybut ALT 

Tak samo jak w kontekście nazywania pliku, ważny będzie tekst alternatywny grafiki, towarzyszący jej już po opublikowaniu na stronie. Jest to opis, który wyświetla się w przypadku, gdy występuje problem z załadowaniem się obrazu na stronie. Dodatkowo to kolejna okazja, żeby podpowiedzieć sztucznej inteligencji, co zawiera twoja ilustracja i co najważniejsze – kolejny element SEOwej układanki. Atrybut ALT można zoptymalizować podczas dodawania grafiki w WordPressie, poprzez wpisania w pole „tekst alternatywny” prostego, krótkiego opisu, obrazującego plik graficzny. Ponadto można dodać również tytuł zdjęcia, który w zależności od ustawień, może wyświetlać się po najechaniu na nie kursorem. Dodatkowo alternatywny opis obrazka jest ważny dla robotów, bo rozumieją, co przedstawia zdjęcie, można zawrzeć tam frazy kluczowe i budować organiczną widoczność. Jest to również istotne dla użytkowników niedowidzących korzystających z czytników ekranowych. 

  

Widoczność Twojej strony internetowej zależy od wielu powiązanych ze sobą czynników, dlatego nie można lekceważyć jednych, względem drugich. Nie zapomnij więc o tym, że udostępniane w sieci grafiki również mogą być treścią, którą również można poddać działaniom SEO. Zastosowanie w praktyce wymienionych kroków, pozwoli na poprawne zoptymalizowanie grafik tak, by mogły odpowiadać za więcej odwiedzin użytkowników, którzy trafili na odpowiedni dla nich obraz w wyszukiwarce. Jest to bardzo ważne pod kątem szybkości wczytywania strony, ponieważ często duże grafiki mają ogromny wpływ na powolne ładowanie serwisu. Wydajność serwisu jest istotna pod kątem user experiecne, ale również jest oceniana przez wyszukiwarkę podczas ustalania rankingu.  
 
Nie zapomnij o tym, publikując kolejne zdjęcie.