Jaki rozmiar powinno mieć logo w stopce mailowej?

Od 140 do 200 px szerokości wyświetlania dla logo poziomego, 40–60 px wysokości dla logo kwadratowego lub monogramu. Sam plik należy wyeksportować w dwukrotności tych wymiarów.

Czy SVG działa w podpisie e-mail?

Nie w sposób niezawodny. Większość klientów poczty go nie wyświetla, a niektóre blokują go ze względów bezpieczeństwa. Przed użyciem przekonwertuj logo wektorowe do PNG.

Jaka jest maksymalna waga obrazów w podpisie?

Zmieść się poniżej 30 KB dla logo i poniżej 100 KB dla wszystkich obrazów łącznie, razem z banerem. To nie ograniczenie przepustowości, lecz odbioru: podpis, który długo się ładuje, wygląda na zepsuty.

Czy potrzebne jest osobne logo dla trybu ciemnego?

To wskazane, jeśli Twoje logo jest czarne na przezroczystym tle: na ciemnym tle staje się niewidoczne. Najprostszym i najpewniejszym rozwiązaniem pozostaje logo na białym, lekko zaokrąglonym tle zamiast przezroczystości.

Rozmiar, waga i format logo w stopce mailowej

Wymiary, waga i format pliku logo w podpisie e-mail: eksport w podwójnej rozdzielczości dla ekranów o wysokiej gęstości, PNG czy JPEG oraz realistyczny budżet wagi obrazów.

Logo to jedyny obowiązkowy element graficzny firmowego podpisu e-mail – i ten, którego parametry techniczne najczęściej pozostawia się przypadkowi. O efekcie decydują trzy parametry: wymiary, gęstość i format pliku.

Wymiary wyświetlania

Punktem wyjścia jest całkowita szerokość podpisu, która powinna mieścić się w przedziale 500–600 px, aby dobrze wyglądać na telefonie. Logo nie może więc przekraczać jednej trzeciej tej szerokości, nie przytłaczając reszty.

W praktyce:

Typ logo	Szerokość wyświetlania	Wysokość wyświetlania
Logo poziome (nazwa + symbol)	140–200 px	32–56 px
Logo kwadratowe lub monogram	48–64 px	48–64 px
Podpis grupy (dwa logo)	po 120 px	32–40 px

Większe logo nie wzmacnia marki: zaburza równowagę bloku i wypycha dane kontaktowe poza pierwszy rzut oka.

Gęstość: eksportuj w podwójnym rozmiarze

To najczęściej pomijany punkt techniczny. Niemal wszystkie nowsze ekrany – laptopy, tablety, telefony – wyświetlają dwa lub więcej fizycznych pikseli na jeden piksel logiczny. Obraz wyeksportowany w rozmiarze wyświetlania wygląda na nich na rozmyty.

Zasada brzmi więc: eksportuj w dwukrotności, wyświetlaj w połowie.

Dla logo wyświetlanego w rozmiarze 180 × 48 px przygotuj plik 360 × 96 px, a następnie ogranicz wymiary w HTML:

<img src="logo@2x.png" width="180" height="48" alt="Firma"
     style="display:block;border:0;width:180px;height:48px" />

Atrybuty HTML są niezbędne: Outlook często ignoruje wymiary zadeklarowane wyłącznie w CSS i wyświetliłby obraz w natywnych 360 px. Mechanizm opisuje artykuł stopka mailowa w HTML, a inne przyczyny zepsutego logo – artykuł jak wstawić logo do podpisu w Outlooku.

Format pliku

PNG-24 dla logo z jednolitymi kolorami i przezroczystością. To wybór domyślny: ostre krawędzie, czysta przezroczystość i uniwersalna obsługa.

PNG-8, jeśli logo ma niewiele kolorów. Plik jest znacznie lżejszy, ale gradienty i wygładzane krawędzie tracą na jakości.

JPEG wyłącznie dla zdjęć – na przykład portretu. Nigdy dla logo z jednolitymi kolorami: kompresja tworzy widoczne artefakty wokół ostrych krawędzi.

Bez SVG. Grafika wektorowa byłaby teoretycznie idealna – ostra przy każdej gęstości i bardzo lekka – ale większość klientów poczty jej nie wyświetla, a niektóre blokują ją ze względów bezpieczeństwa. Przekonwertuj źródło wektorowe do PNG.

GIF wyłącznie dla animowanego banera, nigdy dla logo. Paleta ograniczona do 256 kolorów psuje gradienty.

Budżet wagi

Zmieść się poniżej 30 KB dla logo i poniżej 100 KB dla wszystkich obrazów w podpisie, razem z banerem.

Nie chodzi o przepustowość: 200 KB nikogo dziś nie martwi. Chodzi o odbiór. Obrazy w podpisie ładują się po treści wiadomości; jeśli się spóźniają, odbiorca widzi najpierw rozsypany blok z pustymi ramkami, które stopniowo się wypełniają. Wrażenie jest takie, jakby wiadomość była uszkodzona.

Jedna runda bezstratnej kompresji zwykle wystarcza, by zmniejszyć wagę PNG o połowę bez widocznej różnicy.

Dobrze wiedzieć: sprawdzaj wagę pliku faktycznie serwowanego, a nie tego z eksportu. Zdarza się, że logo ważące 8 KB zostaje przy odświeżeniu identyfikacji wizualnej zastąpione wersją 1200 px ważącą 400 KB – i nikt tego nie zauważa.

Tryb ciemny

Coraz więcej klientów poczty oferuje ciemny motyw, który odwraca tło wiadomości. Czarne logo na przezroczystym tle staje się w nim niewidoczne.

Trzy podejścia, w kolejności niezawodności:

Logo na białym tle. Plik zawiera białe, lekko zaokrąglone tło. W teorii nieładne, w praktyce solidne – i działa wszędzie.

Dwukolorowe logo, które sprawdza się na obu tłach. Jeśli pozwala na to identyfikacja wizualna – logo z kolorem akcentu o wystarczającym kontraście zarówno na jasnym, jak i na ciemnym tle – to najlepsze rozwiązanie.

Przełączanie przez media query. prefers-color-scheme działa tylko w niektórych klientach, a w Outlooku dla Windows nie. Traktuj to jako stopniowe ulepszenie, nigdy jako główne rozwiązanie.

Prawdziwe wyzwanie: właściwy plik używany wszędzie

Wszystkich tych zasad łatwo przestrzegać raz. Problem pojawia się, gdy czterdzieści osób wkleja każda własną wersję logo: jedna bierze plik z drukowanej ulotki, druga zrzut ekranu ze strony, a trzecia logo ze starej identyfikacji wizualnej.

Scentralizowany szablon rozwiązuje ten problem: logo jest wgrywane raz, hostowane pod stałym adresem URL, poprawnie zwymiarowane i zablokowane. Gdy identyfikacja wizualna się zmienia, podmieniasz plik, a wszystkie podpisy podążają za zmianą. Do tego służy edytor Signally.