Peso, dimensioni e formato del logo in una firma email

Il logo è l’unico elemento grafico obbligatorio di una firma email aziendale, e quello le cui caratteristiche tecniche vengono più spesso lasciate al caso. Tre parametri determinano il risultato: le dimensioni, la densità e il formato del file.

Le dimensioni di visualizzazione

Il vincolo di partenza è la larghezza totale della firma, che deve restare tra 500 e 600 px per funzionare su smartphone. Il logo non può quindi superare un terzo di questa larghezza senza schiacciare il resto.

In pratica:

Un logo più grande non rafforza il brand: sbilancia il blocco e spinge i recapiti fuori dal primo colpo d’occhio.

La densità: esportare al doppio

È il punto tecnico più spesso trascurato. Quasi tutti gli schermi recenti — portatili, tablet, telefoni — visualizzano due o più pixel fisici per ogni pixel logico. Un’immagine esportata alle sue dimensioni di visualizzazione appare sfocata.

La regola è quindi: esportare al doppio, visualizzare alla metà.

Per un logo visualizzato a 180 × 48 px, si produce un file da 360 × 96 px e si vincolano poi le dimensioni nell’HTML:

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

Gli attributi HTML sono indispensabili: Outlook ignora spesso le dimensioni dichiarate solo nel CSS e visualizzerebbe quindi l’immagine ai suoi 360 px nativi. Il meccanismo è descritto in dettaglio in firma email in HTML, e le altre cause di un logo rotto in inserire un logo in una firma Outlook.

Il formato del file

PNG-24 per un logo a tinte piatte, con trasparenza. È la scelta predefinita: contorni nitidi, trasparenza pulita e supporto universale.

PNG-8 se il logo ha pochi colori. Il file è decisamente più leggero, ma sfumature e bordi con anti-aliasing si degradano.

JPEG solo per una fotografia — un ritratto, per esempio. Mai per un logo a tinte piatte: la compressione produce artefatti visibili attorno ai contorni netti.

Niente SVG. Il vettoriale sarebbe ideale in teoria — nitido a qualsiasi densità, leggerissimo — ma la maggior parte dei client di posta non lo visualizza e alcuni lo bloccano per motivi di sicurezza. Conviene convertire il file vettoriale di origine in PNG.

GIF solo per un banner animato, mai per un logo. La sua palette limitata a 256 colori degrada le sfumature.

Il budget di peso

Conviene restare sotto i 30 KB per il logo e sotto i 100 KB per l’insieme delle immagini della firma, banner compreso.

Non è una questione di banda: oggi nessuno si preoccupa di 200 KB. È una questione di percezione. Le immagini di una firma vengono caricate dopo il corpo del messaggio; se tardano, il destinatario vede prima un blocco scomposto, con riquadri vuoti che si riempiono progressivamente. L’impressione è quella di un messaggio rotto.

Un passaggio di compressione senza perdita basta in genere a dimezzare il peso di un PNG, senza differenze visibili.

Da sapere: verificate il peso del file effettivamente servito, non quello dell’esportazione. Può capitare che un logo da 8 KB venga sostituito da una versione da 1.200 px e 400 KB durante un aggiornamento delle linee guida del brand, senza che nessuno se ne accorga.

Il caso della modalità scura

Sempre più client di posta offrono un tema scuro, che inverte lo sfondo del messaggio. Un logo nero su sfondo trasparente diventa invisibile.

Tre approcci, in ordine di affidabilità:

Il logo su riquadro bianco. Il file include uno sfondo bianco leggermente arrotondato. Brutto in teoria, robusto in pratica, e funziona ovunque.

Un logo bicolore che regge su entrambi gli sfondi. Se le linee guida del brand lo consentono — un logo con un colore d’accento sufficientemente contrastato sia sul chiaro sia sullo scuro — è la soluzione migliore.

Il cambio tramite media query. prefers-color-scheme funziona solo in alcuni client, e non in Outlook per Windows. Va considerato un miglioramento progressivo, mai la soluzione principale.

La vera sfida: che il file giusto venga usato ovunque

Tutte queste regole sono facili da rispettare una volta. Il problema nasce quando quaranta persone incollano ciascuna la propria versione del logo: una prende il file della brochure stampata, un’altra uno screenshot del sito, una terza quello delle vecchie linee guida.

Un modello centralizzato risolve la questione: il logo viene caricato una sola volta, ospitato su un URL stabile, dimensionato correttamente e bloccato. Quando l’identità visiva cambia, si sostituisce il file e tutte le firme si adeguano. È il compito dell’editor di Signally.