Optymalizacja obrazków na stronie www

Kategoria: Baza wiedzy, Google, SEO Autor: lbielawski 26 lipca, 2017

Jest co najmniej kilka powodów, dla jakich warto jest włożyć nieco trudu w zoptymalizowanie zdjęć zanim umieści się je na stronie internetowej. Pierwszym jest wygoda i komfort użytkownika, który trafi na naszą witrynę – nie każmy mu czekać i tracić czasu na załadowanie zdjęć, ponieważ najprawdopodobniej i tak nie doceni ich jakości. Drugi powód, to podniesienie swoich szans na to, że znajdzie nas potencjalny klient w grafikach Google. Trzeci, to łaskawsze spojrzenie wyszukiwarki na naszą stronę.

Prędkość ładowania treści na stronie już od jakiegoś czasu przestała być elementem marginalnym. Wiadomo, że zbyt długie oczekiwanie na załadowanie strony skutecznie może odstraszyć klientów i spowodować nawet drastycznie spadki sprzedaży – dlatego jest bardzo istotnym czynnikiem zwłaszcza dla pozycjonowanych sklepów internetowych. Niestety, mając już kilka tysięcy produktów w sklepie, stajemy w obliczu karkołomnego zadania – jak zoptymalizować kilka tysięcy zdjęć?

Dlatego podpowiadamy, jak przygotować zdjęcie zanim trafi na stronę internetową. Stosowanie tych kilku zasad może uchronić Cię od kłopotów w przyszłości, a jednocześnie pozytywnie wpłynie na statystyki Twojej witryny w wyszukiwarce.
1. Format zdjęć i obrazków
Nie każdy format będzie odpowiedni do każdego zdjęcia, jakie chcesz umieścić w witrynie. Jaki masz wybór? Najpopularniejsze 3 formaty to:
– JPEG
– PNG
– GIF

Najkrócej opisując cechujące je różnice, można powiedzieć, że JPEG daje możliwość zapisu zdjęcia w najlepszej jakości przy zachowaniu tego samego rozmiaru zdjęcia. Tj. dla 3 zdjęć w rozmiarze 100 KB JPEG będzie miał najlepszą jakość.
Dlatego to właśnie ten format zaleca się jako docelowy dla zdjęć w Internecie.
Pliki PNG i Gif stosowane są z kolei do grafik o niezbyt skomplikowanej kolorystyce i wielkości.
Przykładowe dwa pliki zamieszczamy poniżej – jest to ten sam zrzut z ekranu pandy z aplikacji TinyPNG i TinyJPG (o których poniżej). Jeden został zapisany w formacie JPEG, drugi jako PNG.

Panda na obrazku po prawej stronie, w formacie JPEG, „waży” 24 KB. Panda z lewej strony w formacie PNG „waży” 114 KB.

Zamianę formatu zdjęcia czy obrazka możesz wykonać w używanym programie graficznym lub korzystając z narzędzi online. Aplikacją, którą możemy Ci polecić jest PNGtoJPG, która pozwoli na zamianę formatu PNG na JPEG nawet dla kilku zdjęć jednocześnie.

2. Kompresuj zdjęcia i obrazki

Już po samej zamianie formatów z GIF i PNG na JPEG wielkość zdjęć i obrazków się zmniejszy. Nic jednak taka zamiana nam nie pomoże, jeśli waga zdjęć nadal będzie się wahać w granicach 1000-2000 KB. Dlatego kompresja to kolejny krok, równie prosty i nieskomplikowany jak zapisanie odpowiedniego formatu grafiki.
Do wyboru masz całą masę narzędzi online, jak również opcje do wyboru przy zapisywaniu grafiki w swoim programie graficznym, my możemy Ci polecić TinyPNG, TinyJPG oraz Optimizillę. Wszystkie pozwalają na załadowanie kilku plików jednocześnie.

Weźmy za przykład pandę, która w pliku PNG „ważyła” 114 KB.

Obrazek po lewej stronie to punkt wyjściowy, tj. PNG w rozmiarze 114 KB. Po kompresji za pomocą TinyPNG ten sam obrazek zmniejszył swe rozmiary do 35 KB. Mamy więc oszczędność rzędu 79 KB (lub 90 KB, jeśli zdecydujemy się na plik JPEG).

3. Odpowiednio nazywaj pliki
To właśnie dzięki odpowiedniej nazwie pliku Twoja grafika ma szansę się wyświetlić w wynikach wyszukiwania grafiki. Google na chwilę obecną nie jest jeszcze tak daleko rozwinięty, aby móc rozpoznawać treść zdjęć i jedyne, co mu pozostaje, to warstwa tekstowa.
Staraj się stosować nazwy zawierające interesujące Cię słowa kluczowe.

4. Nie zapomnij o atrybutach ALT
Atrybuty ALT to tekst alternatywny, który zostanie wyświetlony w sytuacji, gdy przeglądarka z jakichś względów nie będzie mogła wyświetlić obrazka. Jest to drugi element obok nazwy pliku, który mówi robotom Google co przedstawia grafika. Atrybuty ALT to element bardzo ściśle związany z pozycjonowaniem stron internetowych i jeśli zależy Ci na dobrych wynikach w Google, traktuj je poważnie.
Jeśli nie masz pewności, czy grafiki na Twojej stronie zostały zaopatrzone w ALT-y, czy nie, możesz skorzystać z ułatwienia w postaci dodatków do przeglądarki, które pozwolą Ci na wyświetlenie atrybutów przy każdym zdjęciu w danej podstronie:

Podsumowanie
Wato jest poświęcić chwilę na przygotowanie zdjęcia zanim umieścimy je w naszej witrynie, zwłaszcza, jeśli prowadzimy sklep internetowy. Pamiętajmy, że nasza strona internetowa ma służyć użytkownikom i to ich dobrem głównie kieruje się Google ulepszając swoje algorytmy. Cena o 50% niższa niż u konkurencji nie pomoże nam w sprzedaży, jeśli nasz klient już na etapie wyszukiwania produktu w sklepie straci cierpliwość i sklep opuści.