...

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

12 lis 2018 | design, strona internetowa, triki i narzędzia

Czy wiesz, jak sprawdzić czy Twoja strona internetowa śmiga jak czerwone Ferrari, czy też wlecze się jak stary Fiat? Dowiedz się jak sprawdzić czas ładowania strony i jak zadbać o odpowiednie kompresowanie zdjęć na www krok po kroku.

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.

zdjęcia na stronę internetową - prędkość GT metrix
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.

zdjęcia na stronę internetową

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.

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.

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 z przezroczystym tłem, by móc np. nasunąć taki element na inny w 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 gubią wyrazistość przy innych fromatach.
  • Format WeBP, stworzony przez Google jako odpowiedź na rosnącą potrzebę efektywniejszego przechowywania danych graficznych online. WeBP obsługuje przezroczystość i oferuje dużo lepszą kompresję plików niż format JPG i PNG.
  • I na koniec świeżynka, czyli format AVIF, który jeszcze ciągle się rozwija, ale umożliwia jeszcze większą kompresję niż WeBP. AVIF obsługuje większą gamę kolorów, a dodatkowo oferuje wsparcie zarówno dla przezroczystości, jak i animacji.

03

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.

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ą.

A jeśli wciąż zapominasz o podstawowym kompresowaniu zdjęć i grafik, zainstaluj na swojej WordPressowej stronie wtyczkę Imagify, która wykona kompresję za Ciebie!

Cheers!
Sylwia

identyfikacja wizualna co to paleta kolorów

zabierz się do pracy

pobierz materiały

BEZPŁATNY AUDYT

Sprawdź, czy Ty i Twoja strona gracie do jednej bramki, wykorzystując w pełni potencjał własnego miejsca w sieci.

Hello, Girl!

Jesteśmy Karla i Ania, czyli kreatywne duo graficzek i strategów komunikacji.

Od ponad 10 lat wspieramy kobiece biznesy i świadczymy szyte na miarę usługi projektowe. Tworzymy identyfikacje wizualne i strony internetowe dla dziewczyńskich biznesów z dobrą energią. Prowadzimy też kursy dla graficzek. Chcemy naszym doświadczeniem podzielić się także z Tobą, abyś mogła tworzyć firmę, z której będziesz dumna!

Sprawdź konsultacje graficzne kursy i warsztaty graficzne

Zobacz gotowe projekty w sklepie gotowe projekty graficzne

Opowiedz nam, czego potrzebujesz mailing branding

też kochasz Pinterest? Przypinaj z nami!Pinterest

0 komentarzy

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *