Logo w podpisie Outlook: jak je wstawić, żeby się nie psuło

Logo to element podpisu e-mail, który psuje się najczęściej – i niemal zawsze z tych samych powodów. Szczególnie w Outlooku różnice między wersjami dla Windows, Mac, przeglądarki i telefonu wzmacniają każdą niedokładność w pliku lub w kodzie. Oto cztery prawdziwe przyczyny i to, co zrobić zamiast tego.

Przyczyna nr 1: obraz wklejony z lokalnego pliku

To najczęstszy przypadek. Pracownik otwiera logo w Wordzie lub w Eksploratorze plików, kopiuje je i wkleja w oknie edycji podpisu. Outlook osadza je wtedy jako lokalny załącznik, z odwołaniem typu cid: albo ścieżką file://.

U nadawcy wszystko wygląda normalnie. U odbiorcy obrazu brak – zamiast niego jest pusta ramka lub czerwony krzyżyk – bo wskazany zasób istnieje tylko na komputerze, z którego wysłano wiadomość. Ten sam problem pojawia się, gdy logo znajduje się na wewnętrznym dysku sieciowym albo w intranecie chronionym uwierzytelnianiem.

Zasada jest prosta: logo musi znajdować się pod publicznym adresem URL, z HTTPS, dostępnym bez logowania. Może to być CDN, zasobnik w chmurze (bucket) albo hosting zapewniany przez Twoje narzędzie do podpisów.

Przyczyna nr 2: rozmiar określony w CSS, a nie w atrybutach HTML

Outlook dla Windows korzysta z silnika renderującego Microsoft Word, który ignoruje znaczną część CSS – w tym bardzo często width i height zadeklarowane w atrybucie style. Obraz wyświetla się wtedy w natywnym rozmiarze: plik o szerokości 1200 px zajmuje całą szerokość wiadomości.

Rozwiązaniem jest podanie wymiarów w atrybutach HTML znacznika, a nie tylko w CSS:

<img src="https://cdn.przyklad.pl/logo.png"
     width="180" height="48"
     alt="Nazwa firmy"
     style="display:block;border:0;width:180px;height:48px" />

Przydają się jedno i drugie: atrybuty dla Outlooka, CSS dla nowoczesnych klientów poczty. display:block zapobiega zbędnemu odstępowi pod obrazem w niektórych klientach, a border:0 usuwa niebieską obwódkę, gdy logo jest klikalne. W atrybucie alt wpisz oczywiście nazwę swojej firmy.

Przyczyna nr 3: plik wyeksportowany w rozmiarze wyświetlania

Na ekranie o wysokiej gęstości pikseli – czyli w niemal wszystkich nowych laptopach i we wszystkich telefonach – obraz wyświetlany w natywnym rozmiarze wygląda na rozmyty. Logo należy wyeksportować w rozmiarze dwukrotnie większym od wyświetlanego, a następnie ograniczyć je atrybutami.

Dla logo wyświetlanego w wymiarach 180 × 48 px wyeksportuj plik 360 × 96 px. Waga pozostaje niewielka, jeśli format jest dobrze dobrany: PNG-24 z przezroczystością dla logo z jednolitymi wypełnieniami albo SVG przekonwertowany na PNG, jeśli Twoje narzędzie nie obsługuje grafiki wektorowej. Kwestie wagi i formatu omawiamy w artykule o rozmiarze logo w podpisie e-mail.

Przyczyna nr 4: podpis w całości jako obraz

Niektóre organizacje eksportują cały podpis – imię i nazwisko, stanowisko, dane kontaktowe, logo – jako jeden obraz. To zły pomysł z trzech powodów naraz.

Po pierwsze, Outlook domyślnie blokuje ładowanie obrazów zewnętrznych od nieznanych nadawców: odbiorca widzi pusty prostokąt zamiast Twoich danych kontaktowych. Po drugie, żadnego tekstu nie da się zaznaczyć ani skopiować: nie można przepisać numeru telefonu. Po trzecie, czytniki ekranu nie mają czego odczytać, poza atrybutem alt.

Imię i nazwisko, stanowisko, telefon i adres muszą pozostać tekstem HTML. Obrazami są wyłącznie logo, ikony mediów społecznościowych i baner kampanii. Ogólne ograniczenia HTML w e-mailach, od których zależy to zachowanie, omawiamy w artykule podpis e-mail w HTML.

Dobrze wiedzieć: zawsze uzupełniaj atrybut alt logo nazwą firmy. Wyświetla się, gdy obraz jest zablokowany, i jest odczytywany przez technologie wspomagające.

Metoda, która sprawdza się na dużą skalę

Na pojedynczym komputerze wystarczy zastosować powyższe zasady. W firmie z kilkudziesięcioma skrzynkami problem przestaje być techniczny, a staje się organizacyjny: każdy pracownik, który ręcznie wkleja logo od nowa, wprowadza z powrotem wszystkie cztery błędy.

Właśnie to rozwiązuje centralny szablon. Logo wgrywa się raz, jest przechowywane pod stałym adresem URL, ma prawidłowe wymiary w szablonie i jest zablokowane: pracownik nie może go ani podmienić, ani przeskalować. Gdy zmienia się identyfikacja wizualna, podmieniasz plik, a wszystkie podpisy się aktualizują. To zadanie edytora podpisów Signally, który generuje kod HTML od razu zgodny z ograniczeniami Outlooka.

Przed każdym wdrożeniem przetestuj wygląd co najmniej w Outlooku dla Windows, Outlooku w przeglądarce i Outlooku na telefonie: to trzy środowiska, w których różnice pojawiają się najwcześniej.