Jaki rozmiar powinien mieć baner w stopce mailowej?

Od 500 do 600 px szerokości przy wyświetlaniu i od 80 do 120 px wysokości. Plik należy wyeksportować w dwukrotności tych wymiarów, żeby pozostał ostry na ekranach o wysokiej gęstości pikseli.

Ile maksymalnie może ważyć baner?

Mniej niż 60 KB w przypadku banera statycznego i mniej niż 150 KB w przypadku animowanego GIF-a. Powyżej tej granicy obraz ładuje się z opóźnieniem, a w chwili otwarcia e-maila wiadomość wygląda na uszkodzoną.

Czy w banerze warto umieścić przycisk?

Element graficzny przypominający przycisk pomaga zasygnalizować, że baner jest klikalny, ale nie jest prawdziwym przyciskiem – to fragment obrazu. Klikalny musi być cały baner, a nie tylko obszar udawanego przycisku.

Ile tekstu może zawierać baner?

Nagłówek z pięciu do ośmiu słów, jedną linię doprecyzowania i etykietę akcji. Więcej tekstu staje się nieczytelne w rzeczywistym rozmiarze wyświetlania w e-mailu.

Baner w stopce mailowej: formaty, waga pliku i dobre praktyki

Wymiary, waga pliku i zasady projektowania banera w stopce mailowej: szerokość użytkowa, gęstość pikseli ekranu, czytelność w małym rozmiarze i obszar klikalny.

Baner to element podpisu e-mail, który niesie komunikat tymczasowy: wydarzenie, rekrutację, nowość. Jego ograniczenia techniczne przypominają ograniczenia logo, ale zasady projektowania są takie jak w przypadku reklamy oglądanej przez sekundę.

Wymiary

Szerokość banera wyznacza szerokość podpisu, a tę z kolei – ekrany telefonów.

Parametr	Zalecana wartość
Szerokość wyświetlania	500–600 px
Wysokość wyświetlania	80–120 px
Proporcje	ok. 5:1
Eksportowany plik	dwukrotność wymiarów wyświetlania

Wyższy baner wchodzi w treść wiadomości i sprawia wrażenie wstawki reklamowej. Baner węższy niż podpis tworzy nieestetyczne przesunięcie: wyrównaj jego szerokość do szerokości całego bloku.

Tak jak w przypadku logo eksportujesz go w dwukrotności – 1200 × 200 px przy wyświetlaniu w rozmiarze 600 × 100 – a wymiary podajesz w atrybutach HTML width i height, w przeciwnym razie Outlook wyświetli obraz w rozmiarze natywnym. Szczegóły znajdziesz w artykule stopka mailowa w HTML.

Waga pliku

Nie przekraczaj 60 KB dla banera statycznego i 150 KB dla animowanego GIF-a.

Nie chodzi o przepustowość, lecz o odbiór. Obrazy w e-mailu ładują się po tekście: ciężki baner pojawia się z opóźnieniem, a odbiorca najpierw widzi pustą ramkę pod podpisem. Wrażenie jest takie, jakby wiadomość była źle przygotowana.

Bezstratna kompresja PNG zwykle zmniejsza wagę o połowę bez widocznej różnicy. W przypadku grafiki fotograficznej dobrym kompromisem jest JPEG w jakości 80.

Zasady projektowania

Jeden komunikat. To zasada łamana najczęściej. Baner, który zapowiada targi i e-book i rekrutację, nie przekazuje niczego. Jeśli masz trzy komunikaty, przygotuj trzy kolejne kampanie.

Krótki nagłówek. Pięć do ośmiu słów. W rzeczywistym rozmiarze wyświetlania – często pomniejszonym przez klienta poczty – długi nagłówek staje się nieczytelny.

Wyraźna akcja. „Zapisz się”, „Zobacz oferty”, „Pobierz raport”. Etykieta musi mówić, co się stanie po kliknięciu.

Wystarczający kontrast. Baner ogląda się przez sekundę, czasem na ekranie telefonu w plenerze. Ciemny tekst na jasnym tle albo odwrotnie, ale nigdy szary na szarym.

Oddech wokół tekstu. Margines wewnętrzny co najmniej 16 px. Tekst przyklejony do krawędzi wygląda na przypadkowy.

Obszar klikalny

Klikalny musi być cały baner, a nie tylko fragment przypominający przycisk. To obraz opakowany w link:

<a href="https://przyklad.pl/targi" style="display:block;text-decoration:none">
  <img src="https://cdn.przyklad.pl/baner@2x.png"
       width="600" height="100"
       alt="Targi branżowe – hala 2, stoisko B34. Umów spotkanie."
       style="display:block;border:0;width:600px;height:100px" />
</a>

Liczą się dwa szczegóły. Atrybut alt musi opisywać komunikat i akcję: to właśnie zobaczy odbiorca, którego klient poczty blokuje obrazy, i to odczyta czytnik ekranu. Z kolei border:0 usuwa niebieską obwódkę, którą niektóre klienty dodają wokół obrazu z linkiem.

Dobrze wiedzieć: używaj śledzonego adresu docelowego, innego dla każdej kampanii. Bez tego nie przypiszesz ruchu do właściwego banera – zobacz jak mierzyć ROI.

Animacja

Animowany GIF bardziej przyciąga wzrok, ale niektóre wersje Outlooka wyświetlają tylko jego pierwszą klatkę. Wynika z tego bezwzględna zasada: najważniejszy komunikat musi być na pierwszej klatce, a animacja ma go tylko wzbogacać.

Temat – łącznie z wagą pliku i liczbą powtórzeń – omawiamy w artykule animowany baner w podpisie.

Czym dobry baner różni się od dobrej reklamy

Warto podkreślić różnicę w tonie. Baner pojawia się pod podpisem konkretnej osoby, w służbowej wiadomości do kogoś, kto ją zna. Nachalny, reklamowy ton razi tam i odbija się na nadawcy.

Najlepiej działają banery, które mniej przypominają reklamę, a bardziej użyteczną informację: termin targów, otwartą rekrutację, dostępny raport. Katalog formatów sezonowych znajdziesz w artykule 12 pomysłów na kampanie, a ogólne ramy tego kanału – w poradniku marketing w stopce mailowej.

Na koniec sprawdź wygląd przed wysyłką. Baner idealny w narzędziu graficznym może zostać przycięty lub przeskalowany w kliencie poczty: podgląd w wielu klientach w edytorze oszczędza przykrej niespodzianki po wysłaniu wiadomości do trzystu osób.