Grafiki na landing page’u

Aby Twój landing page, pop-up lub lightbox zainteresował odwiedzających, ważne jest, aby umieszczone na nim grafiki i obrazy były nie tylko dobrej jakości, ale były też odpowiednio dopasowane do przeglądarek rozmiarem, wielkością czy formatem. W tym wpisie podpowiemy Ci, jakie grafiki będą najlepiej prezentować się na landing page’u w Landingi.

Jeżeli szukasz dobrej jakości zdjęć, skorzystaj z darmowej galerii obrazów Unsplash i wyszukaj grafiki od razu w edytorze.

Więcej o opcjach obrazów w Landingi znajdziesz w naszym Centrum Pomocy.

PAMIĘTAJ: Zebrane tu wskazówki wynikają z naszego doświadczenia, jako dające najbardziej optymalne efekty, lecz nic nie stoi na przeszkodzie, by Twoje grafiki wyglądały inaczej.

Zalecane grafiki na landing page’u

Rozmiary i rozdzielczość grafik

Zalecane wymiary grafik:

• Favikona: 192×192 px
• Obraz w tle landing page’a/sekcji: szerokość 1920 px, wysokość – zależnie od potrzeb, choć zalecamy max. 860 px, dzięki czemu cała sekcja zmieści się w jednym widoku
• Obraz w tle sekcji z paralaksą: szerokość 1920 px, wysokość 1080 px
• Logo: wymiary logotypów oczywiście się różnią, pamiętaj jednak, by były one stosunkowo nieduże (zwłaszcza w pierwszej sekcji), np. 150×50 px

Pozostałe grafiki i obrazy, które chcesz umieścić na landing page’u, dodawaj do edytora w rozmiarach docelowych, tzn. takich, w jakich mają być wyświetlane.

Zalecana rozdzielczość grafik:

Rozdzielczość większości ekranów komputerowych wynosi 72dpi lub 90dpi. Podczas zapisu obrazu w programie graficznym nie musisz więc eksportować pliku o większej rozdzielczości.

Do edytora możesz wgrać grafikę maksymalnie o wymiarach 8000×8000 px oraz wielkości 25 MB.

Formaty grafik

Zalecane formaty grafik:

• Ikony: najlepiej .svg, ewentualnie .png
• Pozostałe grafiki: .png lub .jpg

Optymalizacja obrazów

Odpowiedni rozmiar, rozdzielczość i format są ważne, warto jednak zadbać też o dodatkową optymalizację obrazów. Dzięki temu ładowanie strony będzie szybsze, co wpłynie na pozytywną ocenę Twojego landing page’a zarówno przez wyszukiwarki, takie jak Google, jak i odwiedzających.

Zoptymalizujesz obrazy dla Internetu, dbając o trzy aspekty:

1. Wygląd
2. Szybkie ładowanie
3. Indeksowanie przez wyszukiwarki

Działania, które możesz podjąć:

• Wykorzystaj obrazy o wysokiej jakości, następnie nadaj im docelowe wymiary i zapisz w odpowiednim formacie.
• Zapisuj obrazy w średniej jakości, ok. 60-70% (nie dotyczy obrazów, które np. stanowią Twoje portfolio). Nie eksportuj grafik w dużej rozdzielczości; sugeruj się liczbą pikseli nie wartością dpi.
• Zmniejsz wagę obrazów programem do kompresji, np. TinyPNG (nieduże grafiki nie powinny mieć więcej niż 200 KB).
• Nadaj grafikom nazwę, która będzie przyjazna dla SEO.

Opcje edycji obrazów w edytorze

Obrazy w edytorze Landingi możesz obrabiać i dopracowywać na kilka sposobów. Poniżej znajdziesz listę opcji, które pokażą Ci więcej możliwości i pomogą w efektywniejszym tworzeniu grafik.

Edycja w toolbarze

Kliknij w widget Obraz i przejdź do edycji w prawym panelu bocznym.

Znajdziesz tam trzy zakładki, które pozwolą Ci na edycję obrazu: (1) Obramowanie, (2) Zaokrąglone rogi, (3) Cień.

W galerii obrazów lub po kliknięciu Edytuj obraz w panelu bocznym możesz przejść do dodatkowej edycji obrazów – narzędzia Uploadcare.

Uploadcare to narzędzie do edycji i ładowania obrazów z poziomu galerii widgetu obrazek. Możesz dzięki niemu m.in. przycinać, obracać i wyostrzać wszystkie swoje obrazy w galerii oraz załadować je z innych platform, np. Google Drive czy Dropbox.

Edycja innymi widgetami

Warto wykorzystywać możliwości innych widgetów, by tworzyć bardziej złożone grafiki w samym edytorze.

Dzięki widgetowi Box możesz m.in. stworzyć efekt filtra na obrazie.

W edytorze znajdź widget Box i przeciągnij go w wybrane miejsce w obszarze aktywnym landing page’a.

Dostosuj jego wielkość i położenie. Przejdź do toolbaru po prawej stronie i włącz zakładkę Tło (1). Kliknij w pole wyboru koloru. Następnie wybierz kolor i zmień jego transparentność (2).

W widgecie Box również możesz dostosować obramowanie, rogi oraz cień.

Inne wskazówki

Kilka mniejszych grafik o tych samych wymiarach

Gdy chcesz stworzyć kilka boxów/obrazów i zależy Ci na tym, by każdy z nich był taki sam, stwórz najpierw jeden, a następnie przejdź do widoku mobilnego i dostosuj go tam.

Wróć do widoku desktopowego i skopiuj tyle razy, ile potrzebujesz. W ten sposób nie musisz powtarzać edycji kilka razy i każda grafika będzie jednakowa, również na widoku mobilnym.

Gradient na obrazie w tle sekcji

Jeżeli chcesz dodać do obrazu w tle sekcji filtr gradientowy, dodaj obraz w tle strony, a następnie w opcjach sekcji wybierz Gradient jako styl tła.

Linki i rozmiary obrazów opublikowanych na landing page'u

Jeżeli potrzebujesz link lub rozmiar oryginalnego obrazu znajdującego się na landing page'u (np. do stworzenia slajdera), znajdziesz je na opublikowanym landing page'u lub w galerii.

1. Otwórz opublikowany landing page lub galerię obrazów i kliknij prawym przyciskiem myszy obok obrazu. Wybierz Zbadaj.

2. Zobaczysz okno z kodem HTML strony. Kliknij na narzędzie zaznaczenia (1) i najedź kursorem na obraz (2), aby podświetlić część kodu (3), która za niego odpowiada.

3a. Jeżeli pobierasz link z landing page'a, najedź kursorem na link src (1). W wyskakującym okienku (2) zobaczysz link (bieżące źródło) oraz rozmiar oryginalnego (pierwotnego) obrazu, a także jego pozostałą charakterystykę.

W ten sposób możesz znaleźć linki dla wszystkich obrazów na landing page'u, także tych znajdujących się w galerii.

3b. Jeżeli pobierasz link z Twojej galerii, skopiuj link po parametrze data-url. Drugi link (z końcówką _thumbnail) to link do miniaturki obrazu.