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

12 Lis 2018 | biznes, design

skuteczny landing page

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 Twoja strona internetowa ś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!).

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. Zdarza się, że pewne części ł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ę.

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 oraz PageSpeedInsights. 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.

Wracając do tematu nieciekawego ładowania się strony, kiedy różne elementy ładują się w różnym czasie. Można tutaj skorzystać z pomocy preloadera. Ma on jednak 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.

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 1920x1080px. Warto jednak przemyśleć w jakim miejscu dane zdjęcie się pojawi i jaką ma pełnić funkcję. Jeśli zawsze ma się wyświetlać w kontenerze o określonych rozmiarach to najkorzystniej będzie dopasować wielkość zdjęcia do właśnie takich rozmiarów.

zdjęcia w dużej rozdzielczości pięknie wyglądają na ścianie, ale na stronie www są niepotrzebne. Przeglądarka i tak przeskaluje je do odpowiednich wymiarów. Zastanów się, w jakim ma pojawić się dane zdjęcie i jaką funkcję będzie pełnić.

co z responsywnością?

Wiadomo, że w dzisiejszych czasach bez responsywności 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.

03

waga ma znaczenie

Na wagę zdjęcia wpływa między innymi rozdzielczość. Najlepiej jeśli waga zdjęcia będzie wynosiła ok. 300kB. Nie ma sensu wrzucać fotek większych niż 1MB. Jak zatem odchudzić zdjęcia? Oprócz zmiany rozmiarów, 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.

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.

darmowe narzędzia do kompresowania zdjęć

Nie dysponujesz oprogramowaniem do obróbki zdjęć na komputerze? Nic nie szkodzi! Skorzystaj w takim razie z darmowych narzędzi do kompresowania zdjęć dostępnych online. Najbardziej popularne z nich to Kraken, TinyJPG i Compressor.

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 lepsze pozycjonowanie strony. Pamiętaj jednak, ż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ć o odpowiednie kompresowanie zdjęć na stronę www.

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.

Masz jakieś pytania na ten lub inny temat? Napisz do nas tutaj. Pozdrawiam!

XOXO

Sylwia

Sylwia Pawlak

Poskromicielka kodów, która o technicznych zagadnieniach potrafi mówić w ludzkim języku. Sylwia to programistka, która doskonale rozumie kobiecą naturę i istotę detalu w naszych projektach. Zna WordPress od podszewki i sprawnie posługuje się językami HTML, CSS i JavaScript.

Sylwia działa także pod własną marką Pixel Witches.

Tożsamość marki, czyli Ekspercki czerwiec z Kasią Kuczyńską

Wizerunek nie jest czymś, co bierze się z powietrza. Design Twojej marki powinien wyrastać z jej tożsamości. Nie wiesz, czym jest tożsamość marki i czym różni się od jej wizerunku? Doskonale się składa! Dzisiaj o tożsamości marki opowie graficzka Kasia Kuczyńska, założycielka studio Przepis na Dizajn.

Jak zdobyć wymarzone rekomendacje w 3 prostych krokach?

Nie trzeba nikogo przekonywać, jak wielka jest siła rekomendacji. Zadowolony klient poleca Twoje usługi znajomym i zaprzyjaźnionym współpracownikom, którzy z kolei polecają Cię swoim znajomym, a oni swoim. I w ten sposób sieć Twoich klientów rozszerza się o kolejne osoby. Czy wiesz jak pozyskać rekomendacje, które działają na Twoją korzyść?

0 komentarzy

Wyślij komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

copyright 2018 SHABLON

NIESZABLONOWY

magazyn

Zostaw nam swój adres, a będziemy regularnie podsyłać Ci dawkę nieszablonowych inspiracji.

copyright 2018 SHABLON

NIESZABLONOWY

magazyn

Zostaw nam swój adres, a będziemy regularnie podsyłać Ci dawkę nieszablonowych inspiracji.

Pin It on Pinterest

PODZIEL SIĘ

Podoba Ci się ten artykuł? Pomóż mu dotrzeć do tych, którym może posłużyć!