Baner graficzny

Baner graficzny to obraz wyświetlany na górze publicznej MapKi zamiast standardowego nagłówka tekstowego. Dobrze sprawdza się, gdy marka ma silną identyfikację wizualną i chce wykorzystać ją od pierwszego wejrzenia.

Jak zachowuje się na różnych ekranach?

Przygotuj dwie osobne grafiki: jedną szeroką dla ekranów komputerów (zalecany rozmiar 1600×400 px) i drugą, bardziej pionową dla telefonów (zalecany rozmiar 800×600 px). MapKa automatycznie pokazuje właściwą wersję w zależności od urządzenia — nie musisz nic dodatkowo ustawiać.

Rozmiary, formaty i tekst alternatywny

• Obsługiwane formaty to PNG, JPG i WebP, zgodnie z limitem wielkości pliku widocznym w formularzu.
• Zawsze dodaj tekst alternatywny — krótki opis tego, co jest na grafice. Pomaga osobom korzystającym z czytników ekranu i pojawia się, gdy obraz się nie wczyta.
• Unikaj bardzo drobnego tekstu na grafice — na telefonie może stać się nieczytelny.

Przycisk czy klikalna grafika?

Jeśli dodasz etykietę przycisku razem z adresem CTA, na banerze pojawi się widoczny przycisk nałożony na grafikę. Jeśli podasz sam adres bez etykiety, cała grafika staje się klikalna — to dobre rozwiązanie, gdy sam obraz jasno komunikuje, dokąd prowadzi (np. plakat z napisem „Zobacz program”).

Przykład premiery lub sezonowej akcji

Marka „Pomidorki” przygotowuje baner graficzny na sezon letni: szeroką grafikę z koszykiem warzyw i hasłem „Lato z Pomidorkami” dla desktopu oraz pionową wersję tego samego motywu dla telefonów. Dodaje tekst alternatywny „Kolorowe pomidorki w drewnianej skrzynce, hasło Lato z Pomidorkami” i etykietę przycisku „Zobacz gdzie nas spotkasz”, prowadzącą do listy wydarzeń.

Dostępność i czytelność

• Zadbaj o wyraźny kontrast między tekstem na grafice a tłem — jasny tekst na jasnym zdjęciu łatwo znika.
• Nie umieszczaj najważniejszej informacji tylko w tekście grafiki bez tekstu alternatywnego — osoby niewidzące jej nie zobaczą.
• Sprawdź podgląd banera zarówno na komputerze, jak i na telefonie przed zapisaniem zmian.

Krok po kroku

1. 1Przygotuj grafikę szeroką (desktop) i pionową (telefon) w zalecanych rozmiarach.
2. 2Przejdź do Wygląd i przyciski → Baner graficzny i wgraj obie wersje.
3. 3Dodaj tekst alternatywny opisujący zawartość grafiki.
4. 4Opcjonalnie uzupełnij etykietę przycisku i adres CTA lub sam adres, jeśli cała grafika ma być klikalna.
5. 5Sprawdź podgląd na komputerze i telefonie, a następnie zapisz zmiany.

Praktyczne wskazówki

• Testuj obie wersje grafiki na realnych urządzeniach, zanim opublikujesz baner na stałe.
• Trzymaj najważniejszy komunikat blisko środka grafiki — brzegi bywają przycinane na różnych proporcjach ekranu.
• Aktualizuj baner sezonowo, żeby publiczna MapKa nie wyglądała na nieaktualną.
• Jeśli grafika ma niewielki kontrast, dodaj etykietę przycisku zamiast liczyć na to, że sam obraz wystarczy jako wezwanie do działania.