Zadbaj o optymalne działanie swojej strony www

Jeżeli zależy Ci na tym, by strona www była wydajna, szybka i znajdowała się wysoko w wynikach Google – nie masz wyjścia, musisz odpowiednio zadbać o optymalizację zdjęć.

Optymalizacja zdjęć – co to takiego?

Optymalizacja to w skrócie nic innego jak uzyskanie jak najmniejszej wagi zdjęć czy grafiki przy jednoczesnym zachowaniu jak najlepszej jakości. Kluczowy jest również dobór odpowiedniego formatu i rozmiaru pliku oraz nazewnictwo, które okazuje się szczególnie ważne jeśli chodzi o SEO.

Mniejsze (lżejsze) grafiki to szybszy czas ładowania strony, a tym samym sprawniejsze dotarcie do użytkownika. Jak dowodzą badania Google, wydłużony czas ładowania np. 5s zamiast 1s to o 90% większe prawdopodobieństwo, że przeglądający opuści stronę zanim ta w ogóle zostanie wyświetlona. Nie tylko użytkownicy, ale i samo Google nie wspiera stron posiadających niezoptymalizowane zdjęcia – strona znajdzie się dalej na liście wyszukiwania jeśli obrazy czy grafiki na niej umieszczone mają sporą wagę. 

Problem jednak polega na tym, że im mniejszy plik (waga) tym gorsza jakość. Dlatego umiejętność optymalizacji jest tak ważna – szukamy tzw. “sweet spot’u”, czyli złotego środka pomiędzy wagą a jakością.

Jak skutecznie optymalizować zdjęcia? Dowiesz się poniżej.

Krok 1

OKREŚLENIE WYMIARU

Ogólnie przyjętą zasadą jest przygotowywanie zdjęć w wymiarach jakie w rzeczywistości będą wyświetlane na stronie. Jeżeli wiemy, że obrazki mają rozdzielczość np. 800x800px, nie ma wówczas sensu umieszczanie zdjęć w rozdzielczości FullHD. Zostaną one i tak przycięte przez stronę, jednak waga obrazu w oryginalnej rozdzielczości znacznie spowolni proces ładowania.
Zbyt małe zdjęcia to ogromny minus wizualny – po przeskalowaniu do pożądanego rozmiaru na stronie zdjęcia będą zwyczajnie rozmazane i nieatrakcyjne, natomiast zbyt duże wpłynie negatywnie na ładowanie i indeksowanie.

Krok 2

WYBÓR FORMATU

Najczęściej stosowane są trzy formaty plików – .jpg, .png oraz .gif. Każdy z nich ma swoje wady i zalety, oraz każde będzie trochę lepiej lub gorzej sprawować się w zależności od tego, co przedstawia grafika. 

• PNG (Portable Network Graphics)
  Posiada bezstratną (lossless) kompresję, co oznacza, że oryginalny wygląd pliku może zostać zachowany bez uszczerbku na jakości. Jest to dobry wybór jeżeli zależy nam na dużej jakości i ostrości grafiki. Szczególnie polecany format jeśli chodzi o ilustracje, infografiki czy wykresy, a także elementy bez tła, ponieważ PNG to właśnie format obsługujący przezroczystość.
  
• JPEG (Joint Photographic Experts Group)
  To najczęściej stosowane rozszerzenie pliku, wykorzystujące stratną kompresję. Pliki w tym formacie można dowolnie skompresować, by uzyskać satysfakcjonującą jakość i jednocześnie niską wagę pliku. Polecany do wszelkiego rodzaju zdjęć, również tych mocno skomplikowanych.
  
• GIF  (Graphics Interchange Format)
  Format do bezstratnej kompresji, najczęściej wykorzystywany do animacji i prostych obrazów wykorzystujących zaledwie kilka kolorów, ze względu na fakt, że format ten używa tylko 256 kolorów i przy zapisywaniu grafik z większą ich ilością, będzie je znacznie upraszczać.

• WEBP
  To stosunkowo nowy format oferujący zarówno stratną, jak i bezstratną kompresję. Używa przezroczystości, obsługuje animacje i ma dobry stosunek jakości do poziomu kompresji. Używany jest powszechnie przez Google, którego aspiracją jest by stał się standardem. Niestety wiele programów nie oferuje zapisu do webp jako standard.

Krok 3

KOMPRESJA – WAGA

Kompresja zdjęć to obniżanie wagi zdjęcia/grafiki przy jednoczesnym obniżaniu jakości. To obniżanie jakości może być mniejsze lub większe w zależności od tego jak bardzo chcemy “obciąć” wagę zdjęcia. Oczywiście najlepszym formatem do kompresji jest JPEG – możemy dowolnie zmniejszać wagę zdjęć w tym formacie, jednak im mocniejsza kompresja, tym zdjęcia tracą na jakości. Mogą pojawić się artefakty, ziarno i rozmycie, dlatego zwykle stosuje się zasadę kompresji na poziomie jakości 80%.
Waga całości strony internetowej nie powinna przekraczać 1-2MB, dlatego zdjęcia powinny być możliwie jak najlżejsze, by nie obciążać strony 

Krok 4

NAZWA PLIKU

Mając już idealne grafiki pod kątem wagi, wymiaru i formatu nie można zapomnieć o odpowiednim nazewnictwie, które jest szczególnie ważne pod kątem wyszukiwania w Google grafika. Należy unikać nazw niezwiązanych w żaden sposób z jego zawartością, np. dat czy losowych nazw z rolki aparatu jak np DSC12345.jpg czy 2021_09_30.jpg. W samej nazwie powinny być zawarte frazy kluczowe, a całość powinna być maksymalnie zwięzła np. projekt-domu-nowoczesnego-01.jpg Musimy pamiętać o oddzieleniu słów myślnikiem, dzięki czemu roboty Google oraz sami użytkownicy (jeśli już dotrą do nazwy zdjęcia na stronie) będą w stanie poprawnie sklasyfikować zdjęcie. Nie używa się polskich znaków, spacji oraz spacji dolnej, bowiem ten znak dla botów Google nie działa jako oddzielenie wyrazów. 

Oprócz nazwy samego pliku, w indeksowaniu w Google pomaga również tekst alternatywny czyl “alt”. Jest to opis pomagający na dokładniejsze zidentyfikowanie zawartości zdjęcia. Również on powinien zawierać frazy kluczowe i być możliwie krótki. Gdyby wystąpiły problemy z ładowaniem grafiki na stronie, na jej miejscu pojawi się właśnie to, co wcześniej zostało ustalone pod atrybutem “alt”.