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ąć?
01
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ę.
preloader
Wracając do tematu nieciekawego ładowania się strony: kiedy różne elementy ładują się w różnym czasie, a Ty nie chcesz, żeby odbiorca oglądał efekt pośredni, możesz skorzystać z pomocy preloadera. To krótka animacja, która sygnalizuje, że strona wczytuje się w tle. Prawdopodobnie wczytując ten artykuł, zauważyłaś trzy podskakujące prostokąty. To właśnie preloader.
Ma on swoje zalety, ale też wady. Do korzyści z pewnością należy to, że strona ładuje się w tle i klient zobaczy od razu całość. Preloadery są jednak czasami z góry odbierane jako oznaka wolnego ładowania się strony.
Ciekawym pomysłem na zmniejszenie tego wrażenia jest rezygnacja z nudnego obracającego się kółka i stworzenie preloadera, który nawiązuje do wyglądu marki i zamiast nudzić, zaciekawia i intryguje. Jednak pamiętaj, że nawet najlepsza animacja na świecie nie przytrzyma uwagi Twojego odbiorcy, jeśli strona w tle ładuje się naprawdę długo.
Jeśli działasz na WordPressie, to preloader stworzysz za pomocą wtyczki Preloader. A jeśli do WP masz także DIVI, to fajne animacje znajdziesz we wtyczce DIVI Toolbox.
pro tip
Ze wsparciem spieszą też różne witryny, które zbadają naszą stronę bardziej precyzyjnie, pokazując jaki jest czas ładowania poszczególnych elementów i co można zrobić, aby go poprawić.
Polecam zajrzeć na Pingdom Tools, GT Metrix oraz PageSpeed Insights. Na tych stronach można sprawdzić m.in. prędkość ładowania, rozmiar, a także dowiedzieć się nad czym warto popracować, żeby nasza witryna była jeszcze bardziej optymalna.
Dzięki narzędziu Cloudinary określisz, które grafiki i zdjęcia najbardziej obciążają Twoją stronę. To właśnie nimi powinnaś się zająć w pierwszej kolejności.
02
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.
03
waga ma znaczenie
Najlepiej jeśli waga zdjęcia będzie wynosiła max. 300kB. Nie ma sensu wrzucać fotek większych niż 1MB. Jak zatem odchudzić zdjęcia na stronę internetową?
Na wagę pliku wpływa między innymi rozdzielczość, czyli jak gęsto upakowane są piksele na zdjęciu. Przygotowując zdjęcie lub plakat do druku, spotkasz się z rozdzielczością 300 dpi. Na stronie internetowej wystarczy, że plik będzie miał rozdzielczość 72 dpi. Dzięki temu będzie mniejszy i lżejszy.
Oprócz zmiany rozmiarów, o których była mowa w poprzednim punkcie, oraz rozdzielczości, ważny jest też format zapisywania, który należy dobrać do zdjęcia lub grafiki, biorąc pod uwagę jego zawartość oraz to jak ma się wyświetlać na stronie.
pro tip
Do wyboru masz kilka formatów:
- JPG sprawdzi się w przypadku zdjęć, a dodatkowo daje Ci możliwość ustawienia jakości zdjęcia. Jakość na poziomie 80% robi dobrą robotę – za niezbyt dużą stratę na jakości można zgubić sporo kilobajtów.
- Format PNG idealnie nadaje się do zapisywania plików, w których nie chcemy mieć widocznego tła, by móc np. nasunąć taki element na inny w naszym projekcie.
- Z kolei format SVG jest idealny do zapisywania drobnych elementów wektorowych, takich jak logo czy ikony. Format wektorowy gwarantuje wyraziste, gładkie linie ikon na wyświetlaczach retina, które przy formacie png gubią wyrazistość.
darmowe narzędzia do kompresowania zdjęć
Jeśli otrzymujesz od fotografa obrobione zdjęcia na stronę internetową, poproś o zapisanie ich w wersji przyjaznej dla witryny. Jeśli natomiast korzystasz z innych źródeł fotografii, to niezbędne zmiany do plików wprowadzisz np. za pomocą Adobe Photoshop czy bezpłatnego Adobe XD. Nie dysponujesz oprogramowaniem do obróbki zdjęć na komputerze? Nic nie szkodzi! Skorzystaj z darmowych narzędzi do kompresowania zdjęć dostępnych online. Najbardziej popularne z nich to Kraken, TinyJPG i Compressor. A do masowego kompresowania także Bulk Resize Photos.
04
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.
to co? Jesteś gotowa na to, żeby zamienić swoją stronę w czerwone Ferrari?
Koniec wymówek! Teraz już wiesz, co musisz zrobić krok po kroku, by zadbać odpowiednio o zdjęcia na stronę internetową.
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. A jeśli wciąż zapominasz o podstawowym kompresowaniu zdjęć i grafik, zainstaluj na swojej wordpressowej stronie wtyczkę Smush, która wykona kompresję za Ciebie!
Cheers!
Sylwia
przeczytaj podobne artykuły
pierwsza strona internetowa: jaką ją stworzyć, żeby szybko zdobyć klientów?
Pierwsza strona internetowa, którą musisz stworzyć, spędza Ci sen z powiek. Od czego zacząć, żeby szybko zdobyć pierwszych płacących klientów? Poznaj laserową strategię!
teksty na stronę internetową – jak je napisać? 4 praktyczne wskazówki
0 komentarzy