Jak przygotować zdjęcia na stronę internetową, czyli co zrobić kiedy strona się wlecze

Wyobraź sobie, że wchodzisz do sklepu, a tam puste półki, na których pracownicy na Twój widok niespiesznie zaczynają wykładać towar. Pojedynczo, produkt za produktem. Czas leci, a Ty zaczynasz się niecierpliwić. Miałaś ochotę zrobić zakupy w tym sklepie, no ale ile można czekać? W końcu masz dość i wychodzisz.

Podobna sytuacja zachodzi na naszych stronach internetowych, które przez zbyt duży ciężar zdjęć i złą optymalizację mogą się bardzo długo ładować. A przecież każda sekunda jest tutaj na wagę złota! Jak sprawdzić czy dobrze przygotowałaś zdjęcia na stronę internetową, czy Twoja witryna śmiga jak czerwone Ferrari, czy też wlecze się jak stary Fiat i co z tym fantem począć?

Szybkość ma znaczenie

Jak szybko znaczy szybko? Po prostu, im szybciej tym lepiej. Według badań przeprowadzonych przez Google, zwiększenie czasu ładowania strony na urządzeniach mobilnych z 1s do 3s zwiększa współczynnik odrzucenia o 32%. Każda sekunda może kosztować również spadek konwersji aż do 20%. Badania przeprowadzone przez Kissmetrics pokazują, że 47% osób oczekuje, że czas ładowania strony będzie wynosił maksymalnie 2 sekundy (sic!). Jest o co zawalczyć. Z drugiej strony pamiętaj o zachowaniu zdrowego rozsądku. Jeśli Twoja strona jest rozbudowana – jest to np. bardzo długa strona sprzedażowa – to prędkość ładowania na poziomie 4s też jest ok.

Jak sprawdzić czas ładowania strony?

Szybkość ładowania strony można sprawdzić na różne sposoby. Najszybszą opcją będzie po prostu wejście na stronę i sprawdzenie tego empirycznie – możemy zobaczyć jak strona się ładuje i jak wygląda podczas ładowania.

Żeby test był jak najbardziej miarodajny, warto przed testowym wczytaniem strony wyczyścić tzw. cookies przeglądarki. Cookies to przechowywane w pamięci przeglądarki elementy strony, takie jak np. obrazy. Jeśli nie wyczyścisz tych danych, przeglądarka sięgnie sobie po nie do swojej pamięci i wtedy wynik testu będzie zaburzony. Dobry wynik otrzymasz również wtedy, kiedy stronę załadujesz przez przeglądarkę w trybie przeglądania prywatnego (na Safari wybierz z menu Plik komendę „nowe okno prywatne”, na Chrome – polecenie „nowe okno incognito” w menu Plik, itp.)

Zdarza się, że pewne części strony ładują się szybciej niż inne i mamy wtedy wrażenie skakania elementów. Co z tym zrobić? O tym powiem za chwilę. Samodzielne sprawdzenie procesu ładowania strony jest ważne, ponieważ dzięki temu możemy zobaczyć, jak potencjalny klient będzie postrzegał naszą stronę.

Rozmiar ma znaczenie

Zdjęcia w dużej rozdzielczości na pewno pięknie wyglądają jako plakaty na ścianie, ale są zupełnie niepotrzebne na stronie internetowej, ponieważ przeglądarka i tak przeskaluje je do odpowiednich wymiarów. Uważa się, że maksymalną i wciąż sensowną rozdzielczością zdjęć jest FullHD, czyli 1920 x 1080px. Dla większych ekranów albo retiny, weź pod uwagę rozmiar 2560 x 1440px.

Warto przemyśleć w jakim miejscu dane zdjęcie się pojawi i jaką ma pełnić funkcję. Jeśli zawsze ma się wyświetlać na obszarze o określonych rozmiarach, to najkorzystniej będzie dopasować wielkość zdjęcia do właśnie takich rozmiarów. Mniejszy rozmiar pozwala łatwiej zapanować nad wagą pliku, a o to właśnie się rozchodzi.

Zdjęcia na stronę internetową a responsywność

Wiadomo, że w dzisiejszych czasach bez responsywności, czyli dopasowywania się strony do wielkości ekranu, ani rusz. Najlepiej dostosować zdjęcie do maksymalnej rozdzielczości, z jaką będzie wyświetlało się na stronie (czyli tak jak będzie się wyświetlać na dużych ekranach). Przeglądarka przeskaluje je automatycznie na mniejsze rozmiary na tabletach i komórkach. Innym wyjściem jest przygotowanie zdjęć w kilku rozdzielczościach i odpowiednie zakodowanie tego, które zdjęcie ma się wyświetlać na jakich ekranach, ale to wyższa szkoła jazdy.

Poniżej znajdziesz uproszczony schemat rozmiarów na zdjęć na Twoją stronę www. Budując witrynę, możesz posiłkować się sugerowanymi rozmiarami obrazów, w zależności od layoutu, jaki planujesz.

Nazwa ma znaczenie

Zadbaj też o nazwę zdjęć wstawianych na stronę. Żadnych img_520_20, zdjecie8, to-juz-na-pewno-ostatnia-wersja-baneru albo innych tego typu kwiatków! W nazwie pliku wpisz to, co przedstawia dane zdjęcie. Wszystkim ułatwi to pracę, a wujek Google będzie zadowolony z panującego porządku, co wpłynie dodatkowo na pozycjonowanie strony. Pamiętaj, żeby w nazwie pliku nie używać polskich znaków.

Pamiętaj, że tutaj ważna jest konsekwencja! Wdrożenie powyższych kroków na wszystkich podstronach chwilę Ci zajmie, ale naprawdę warto! Dzięki nim Twoja strona będzie wczytywać się gładko i sprawnie, co będzie miało również wpływ na pozycjonowanie.