Inserire un logo nella firma di Outlook senza che si rompa

Il logo è l’elemento di una firma che si rompe più spesso, e per ragioni quasi sempre identiche. In Outlook in particolare, le differenze tra le versioni per Windows, Mac, Web e mobile amplificano ogni approssimazione nel file o nel codice. Ecco le quattro cause reali e cosa fare invece.

Causa n. 1: un’immagine incollata da un file locale

È la più frequente. Un dipendente apre il logo in Word o in Esplora file, lo copia e lo incolla nella finestra della firma. Outlook lo incorpora allora come allegato locale, con un riferimento di tipo cid: o un percorso file://.

Per il mittente sembra tutto normale. Per il destinatario l’immagine manca, sostituita da un riquadro vuoto o da una croce rossa, perché la risorsa a cui fa riferimento esiste solo sul computer d’origine. Lo stesso problema si presenta con un logo ospitato su un’unità di rete interna o su una intranet protetta da autenticazione.

La regola è semplice: il logo deve risiedere su un URL pubblico, in HTTPS, accessibile senza login. Un CDN, un bucket di storage oppure l’hosting fornito dal proprio strumento per le firme.

Causa n. 2: dimensioni definite in CSS anziché negli attributi HTML

Outlook per Windows usa il motore di rendering di Microsoft Word, che ignora buona parte del CSS, compresi molto spesso width e height dichiarati in un attributo style. L’immagine viene quindi mostrata alla sua dimensione nativa: un file largo 1200 px occupa tutta la larghezza del messaggio.

La soluzione consiste nell’indicare le dimensioni negli attributi HTML del tag, non solo in CSS:

<img src="https://cdn.esempio.it/logo.png"
     width="180" height="48"
     alt="Nome dell'azienda"
     style="display:block;border:0;width:180px;height:48px" />

Entrambi servono: gli attributi per Outlook, il CSS per i client moderni. Il display:block evita lo spazio indesiderato sotto l’immagine in alcuni client, e border:0 elimina il bordino blu quando il logo è cliccabile.

Causa n. 3: un file esportato alla dimensione di visualizzazione

Su uno schermo ad alta densità (Retina), cioè quasi tutti i portatili recenti e tutti i dispositivi mobili, un’immagine mostrata alla sua dimensione nativa appare sfocata. Il logo deve essere esportato al doppio della dimensione di visualizzazione, poi vincolato dagli attributi.

Per un logo mostrato a 180 × 48 px, esportate un file di 360 × 96 px. Il peso resta contenuto se il formato è scelto bene: PNG-24 con trasparenza per un logo a tinte piatte, oppure SVG convertito in PNG se lo strumento non gestisce la grafica vettoriale. Peso e formato sono trattati nell’articolo sulle dimensioni del logo nella firma.

Causa n. 4: una firma interamente in immagine

Alcune organizzazioni esportano l’intera firma (nome, ruolo, recapiti, logo) come un’unica immagine. È una cattiva idea per tre ragioni che si sommano.

Innanzitutto, Outlook blocca per impostazione predefinita il caricamento delle immagini remote per i mittenti sconosciuti: il destinatario vede un rettangolo vuoto al posto dei recapiti. In secondo luogo, nessun testo è selezionabile né copiabile: impossibile recuperare un numero di telefono. Infine, gli screen reader non hanno nulla da leggere, a parte l’attributo alt.

Nome, ruolo, telefono e indirizzo devono restare testo HTML. Solo il logo, le icone social e il banner della campagna sono immagini. I vincoli generali dell’HTML nelle email, da cui dipende questo comportamento, sono descritti in firma email in HTML.

Buono a sapersi: compilate sempre l’attributo alt del logo con il nome dell’azienda. Viene mostrato quando l’immagine è bloccata ed è letto dalle tecnologie assistive.

Il metodo che regge su larga scala

Su un singolo computer basta applicare le regole descritte sopra. Su diverse decine di caselle il problema non è più tecnico ma organizzativo: ogni dipendente che reincolla il logo a mano reintroduce i quattro errori.

È esattamente ciò che risolve un modello centralizzato. Il logo viene caricato una sola volta, ospitato su un URL stabile, dimensionato correttamente nel modello e bloccato: il dipendente non può né sostituirlo né ridimensionarlo. Quando l’immagine coordinata cambia, basta sostituire il file e tutte le firme si adeguano. È il compito dell’editor di firme di Signally, che genera un HTML già conforme ai vincoli di Outlook.

Prima di qualsiasi distribuzione, conviene testare la visualizzazione almeno su Outlook per Windows, Outlook Web e Outlook mobile: sono i tre ambienti in cui le differenze emergono per prime.