Probabilmente avete trascorso ore a progettare la firma e-mail perfetta: avete scelto i colori, i caratteri, forse avete anche aggiunto un firma calligrafica per dare un tocco personale. Poi si preme invio e tutto sembra... sbagliato. Il logo è schiacciato, il banner è tagliato, le immagini ci mettono una vita a caricarsi.
Le dimensioni sono importanti. Non per qualche principio astratto di design, ma perché la firma viaggia attraverso decine di client di posta elettronica, ognuno con le proprie stranezze. Ciò che sembra perfetto in Gmail potrebbe rompersi in Outlook. Ciò che si carica istantaneamente su desktop potrebbe bloccarsi su mobile.
Risolviamo questo problema.
Indice dei contenuti
Ottimizzazione delle dimensioni delle immagini delle firme e-mail
La giusta dimensione delle immagini non è una questione di regole, ma di capire cosa succede quando qualcuno apre la vostra e-mail.
Perché le dimensioni sono importanti nelle firme e-mail
Ecco cosa sfugge alla maggior parte delle persone: i client di posta elettronica non si limitano a visualizzare la firma. La ridimensionano, la comprimono, a volte la rifiutano del tutto.
Un'immagine della testa da 2 MB? Outlook la eliminerà. Un logo di 50x50px? Illeggibile sui display retina. Un banner di 800px? Si dimezza su mobile.
Ogni client di posta elettronica ha dei limiti. Gmail limita le immagini a 10 MB in totale, ma è bene caricarle su una connessione 4G. Apple Mail gestisce meglio i file di grandi dimensioni, ma li comprime in modo aggressivo. Outlook, il peggiore, a volte mostra solo una X rossa.
Le dimensioni influiscono su tre aspetti: deliverability, tempo di caricamento e aspetto professionale. Se sbagliate, la vostra firma diventa un peso.
Impatto delle dimensioni dei file sul caricamento delle e-mail
Si inviano 50 e-mail al giorno. Ognuna ha una firma di 500 KB. Si tratta di 25 MB di larghezza di banda, solo per le firme. Moltiplicate per tutti i dipendenti della vostra azienda.
I destinatari notano i carichi lenti. Non pensano a "file grandi", ma a "le e-mail di questa persona sono lente". Quindi iniziano a ignorarle.
Il punto di forza? Meno di 50KB per l'intera firma. Meno di 20KB è meglio.
Le immagini pesanti fanno qualcosa di peggio che rallentare il caricamento: attivano i filtri antispam. I provider di e-mail guardano alle dimensioni del messaggio. Un'e-mail di testo di 5KB con una firma di 1MB? Sospetto. Direttamente nella cartella spam.
Le dimensioni dei file aumentano rapidamente. Un logo PNG di 300x100px può essere di 80KB. Se si aggiungono un banner, le icone dei social, magari un'immagine della testa, improvvisamente si arriva a 200KB. Questo prima della compressione.
Come le dimensioni influiscono sulla percezione del marchio
La vostra firma funziona con il pilota automatico. Ad ogni e-mail, ad ogni risposta, ad ogni inoltro, essa vi rappresenta.
Un logo pixelato fa capire che non si bada ai dettagli. Un banner sovradimensionato urla "non so cosa sto facendo". Immagini che non si caricano? Sembrate poco professionali.
La coerenza del marchio vive nelle dimensioni. Il logo deve essere riconoscibile ma non opprimente. I banner devono essere complementari, non dominanti. Tutto deve essere scalato correttamente su tutti i dispositivi.
Pensate all'ultima firma che vi ha colpito. Probabilmente è pulita, compatta, leggibile. Niente che lotti per attirare l'attenzione. Si tratta di un dimensionamento intenzionale.
Dimensioni del logo consigliate
I loghi sono complicati. Troppo piccoli, e nessuno li vede. Se sono troppo grandi, dominano tutto il resto.
Dimensioni ideali del logo
Iniziare con un massimo di 300x100px. Si tratta di larghezza per altezza. La maggior parte dei loghi si adatta comodamente a questo spazio.
Loghi orizzontali? 300x80px vanno bene. Loghi quadrati? Provate con 100x100px. I loghi verticali sono difficili: 80x120px al massimo, altrimenti spingono tutto verso il basso.
Le dimensioni effettive del file dovrebbero essere doppie rispetto a quelle di visualizzazione: 600x200px salvato, visualizzato a 300x100px. In questo modo si gestiscono le visualizzazioni retina senza rendere i file enormi.
Perché questi numeri? I client di posta elettronica visualizzano le firme in una colonna stretta, solitamente larga 500-600px. Il vostro logo dovrebbe occupare circa la metà, al massimo. Lasciate spazio per il testo, le informazioni di contatto e altri elementi.
Diversi orientamenti del logo richiedono approcci diversi. I loghi larghi si scalano meglio. I loghi alti devono essere limitati in altezza, altrimenti dominano gli schermi dei cellulari.
Ridimensionamento dei loghi senza perdita di qualità
Mai allungare un logo. Mai. Se il file sorgente è 400x200px, non visualizzatelo a 300x150px: le proporzioni cambiano.
Utilizzare il rapporto d'aspetto originale. Un logo 2:1 rimane 2:1 sia che sia 300x150px o 200x100px. I client di posta elettronica manterranno questo rapporto se si imposta la larghezza O l'altezza, non entrambe.
Lavorare da file vettoriali, quando possibile. Esportate a una dimensione di visualizzazione 2x. Un logo che viene visualizzato a 250px di larghezza? Esportate il PNG a 500px di larghezza. In questo modo si ottengono immagini pronte per la retina, senza dimensioni massicce dei file.
Effettuare test a diverse dimensioni prima di impegnarsi. Ciò che sembra buono a 300px potrebbe perdere dettagli a 150px. I dettagli più fini scompaiono per primi: linee sottili, testi piccoli, forme intricate.
Scelta dei formati dei file del logo
PNG con trasparenza: è l'impostazione predefinita. Il PNG a 24 bit gestisce bene i colori, la trasparenza è perfetta e si comprime in modo ragionevole.
JPEG per foto o gradienti complessi. Ma i loghi con testo? PNG vince. I JPEG creano artefatti intorno ai bordi taglienti. Il testo diventa sfocato.
SVG è allettante: file infinitamente scalabili e minuscoli. Ma i client di posta elettronica li bloccano. Outlook non visualizza affatto gli SVG. Gmail li elimina. Rimanete su PNG.
Per quanto riguarda le dimensioni dei file, sottoporre i PNG a compressione. Strumenti come TinyPNG o ImageOptim tagliano 60-70% senza perdita di qualità visibile. Un logo da 80KB diventa 25KB. Stesso aspetto, caricamento più rapido.
Salvate con la giusta profondità di colore. La maggior parte dei loghi non ha bisogno di milioni di colori. PNG-8 con 256 colori ha spesso un aspetto identico a PNG-24, ma con dimensioni dimezzate.
- Dite addio agli scarabocchi disordinati
- Ottenere una firma elegante e sicura in pochi giorni
Dimensioni ottimali di banner ed elementi
I banner sono spazi promozionali nella firma. Se li usate male, sono spam. Se li usate bene, vi porteranno a fare clic.
Dimensioni dei banner per migliorare i tassi di clic
Banner standard: 600x100px al massimo. È la larghezza che la maggior parte dei client di posta elettronica assegna prima di avvolgere o tagliare il contenuto.
I banner stretti funzionano meglio: 600x70px o 600x80px. Non sovraccaricano la firma. I destinatari possono vedere le vostre informazioni di contatto senza dover scorrere un cartellone pubblicitario.
Il mobile cambia tutto. Quei 600px? Diventano 320-375px sugli schermi dei telefoni. Progettate prima per quella larghezza. Il testo deve essere leggibile a 320px. Le call-to-action devono poter essere toccate.
La posizione del banner è importante quanto le dimensioni. La posizione migliore è quella in fondo alla firma: prima le informazioni di contatto, poi la promozione. Il posizionamento in alto compete con il vostro nome e titolo.
Le aree cliccabili hanno bisogno di spazio. Un pulsante nel vostro banner dovrebbe essere di almeno 44x44px - l'obiettivo minimo di Apple per il touch. Se è più piccolo, non si vede su mobile.
Creazione di banner all'interno di vincoli e-mail
I client di posta elettronica non hanno bisogno di codice. Niente effetti hover, niente animazioni, niente layout complessi. Il vostro banner è solo un'immagine e un link.
Mantenere il testo di grandi dimensioni: minimo 14px, 16px è più sicuro. Il testo piccolo diventa illeggibile quando viene ridimensionato.
Il contrasto è più importante nelle e-mail che nei siti web. Il testo chiaro su sfondi chiari scompare nei riquadri di anteprima. Un contrasto elevato garantisce la leggibilità in tutti i client di posta elettronica.
Attenetevi a colori sicuri per il web. I client di posta elettronica rendono i colori in modo diverso. Il verde del marchio perfetto? Potrebbe sembrare blu in Outlook, verde in Apple Mail. Fate dei test su tutti i client.
I limiti di dimensione dei file colpiscono duramente i banner. Un banner di 600x100px non dovrebbe superare i 30KB. Utilizzate colori solidi anziché gradienti, ove possibile. Comprimete in modo aggressivo. Ogni kilobyte conta.
Aspetti tecnici della risoluzione delle firme e-mail
La risoluzione determina l'aspetto nitido o sfocato della firma. Se la sbagliate, anche le dimensioni perfette non vi salveranno.
Impatto della risoluzione dell'immagine
Le firme e-mail vengono visualizzate a 72 DPI (punti per pollice), la risoluzione standard dello schermo. La stampa utilizza 300 DPI, ma questo è irrilevante.
Ciò che conta sono le dimensioni dei pixel e la loro resa su schermi diversi.
I display retina mostrano il doppio dei pixel. Un logo di 300px su uno schermo normale diventa 600 pixel logici su Retina. Se l'immagine di origine è di soli 300px, appare sfocata.
Soluzione: creare le immagini a dimensioni 2x, visualizzarle a 1x. Un logo visualizzato a 200x80px dovrebbe essere salvato a 400x160px. L'HTML o il CSS lo ridimensionano, offrendo una visualizzazione retina nitida.
La maggior parte dei client di posta elettronica lo gestisce automaticamente se si impostano correttamente le dimensioni di visualizzazione. Alcuni non lo fanno. Testate su dispositivi reali: Mac, iPhone, macchine Windows ad alta risoluzione.
I migliori formati di file immagine
PNG per qualsiasi cosa con trasparenza o testo. Loghi, icone, pulsanti: PNG li gestisce senza artefatti.
JPEG solo per le fotografie. Un'immagine della testa, una foto di un prodotto: il JPEG li comprime meglio del PNG. Ma mantenete la qualità a 80-85%. Se è inferiore, i volti appaiono strani.
La GIF funziona per la grafica semplice e supporta le animazioni, ma le GIF animate nelle firme? Distraggono e spesso vengono bloccate. Rimanete su immagini statiche.
WebP offre una compressione migliore, ma il supporto dei client di posta elettronica è discontinuo. Outlook ignora completamente WebP. Gmail lo gestisce. Non vale la pena rischiare, a meno che non ci si rivolga solo agli utenti di Gmail.
Non utilizzare mai BMP, TIFF o altri formati esotici. Sono troppo grandi o non supportati.
Riduzione delle dimensioni dei file senza perdita di qualità
La compressione non è negoziabile. Le esportazioni originali sono sempre più grandi del necessario.
Per i PNG: utilizzare strumenti come TinyPNG, ImageOptim o Squoosh. Ottimizzano la struttura del file senza modificare i pixel. Un logo di 100KB diventa di 30KB senza alcuna differenza visibile.
Per JPEG: esportare con qualità 80-85%. La differenza tra 100% e 80% è invisibile alla maggior parte delle persone, ma dimezza le dimensioni del file.
Riduzione della tavolozza dei colori per i PNG. Se il vostro logo utilizza 10 colori, perché salvarlo con milioni di colori? PNG-8 con una tavolozza limitata è decisamente più piccolo.
Ritagliare lo spazio inutilizzato. Quel logo di 800x200px con spazio bianco su entrambi i lati? Ritagliatelo a 600x150px. Meno pixel = file più piccolo.
Rimuovere i metadati. I file immagine contengono dati EXIF, profili di colore e altre informazioni non necessarie. Spogliateli di tutto. Strumenti come ImageOptim lo fanno automaticamente.
"Ge-Sign ha creato la mia nuova firma e-mail, che ha un aspetto professionale e si carica immediatamente".
Kevin F., agente immobiliare
Verifica e adattamento delle firme e-mail
La vostra firma funziona nel vostro client di posta elettronica. Ottimo. Ma che dire delle altre decine di client utilizzati dai vostri destinatari?
L'importanza di testare le firme e-mail
Outlook Web contro Outlook Desktop contro Outlook Mobile: tre motori di rendering diversi, tre risultati diversi.
Gmail su Chrome, Gmail su Safari, l'app Gmail su iOS: tutti leggermente diversi.
Apple Mail, Thunderbird, Yahoo Mail, Proton Mail: ognuno di essi ha delle peculiarità.
I test non sono facoltativi. Inviate e-mail di prova ad account su piattaforme diverse. Controllate il desktop e il mobile. Cercate:
- Immagini caricate correttamente
- Dimensioni stabili
- Nessuna spaziatura o vuoto strano
- Collegamenti funzionanti
- Il testo rimane leggibile
Errori comuni: immagini allungate in Outlook, banner tagliati in Apple Mail mobile, problemi di spaziatura nell'app Gmail.
Utilizzate strumenti di test come Litmus o Email on Acid se state inviando firme a livello aziendale. Questi strumenti mostrano le anteprime su decine di clienti contemporaneamente.
Anche il test manuale funziona, ma richiede molto tempo. Create account gratuiti sui principali provider. Inviatevi delle e-mail di prova. Verificate sul vostro telefono.
Adattare le firme ai dispositivi mobili
Più di 50% delle e-mail si aprono da mobile. La vostra firma deve funzionare prima di tutto lì.
Gli schermi mobili hanno una larghezza di 320-428px. Quel banner da 600px? Si ridimensiona per adattarsi. Il testo diventa minuscolo. Le immagini perdono dettagli.
Progettare con una mentalità mobile-first:
- Mantenere la larghezza totale della firma sotto i 500px
- Utilizzare caratteri di dimensioni maggiori (minimo 16px)
- Gli elementi cliccabili devono avere almeno 44x44px.
- Impilare gli elementi in verticale, quando possibile
- Test su telefoni reali, non solo ridimensionamento del browser
Le immagini devono essere scalate in modo proporzionale. Impostate la larghezza massima a 100% in HTML. Questo consente ai client di posta elettronica di ridurre le immagini per adattarle agli schermi senza interrompere il layout.
Considerate la velocità dei dati mobili. Quella firma da 200 KB? Ci vogliono secondi per caricarla su connessioni lente. I destinatari la scorrono prima che appaia.
Alcune aziende creano firme mobili separate - più semplici, più piccole, più veloci. Il doppio del lavoro, ma garantisce un'ottima esperienza mobile.
Evitare i problemi di visualizzazione
I client di posta elettronica rompono le firme in modi prevedibili. Ecco cosa va storto e come evitarlo:
Tabelle, non div. L'HTML delle e-mail è fermo al 2005. Utilizzate layout di tabelle per la struttura. I div e i CSS moderni spesso falliscono.
Solo stili in linea. I fogli di stile esterni vengono eliminati. vengono ignorati. Inserite gli stili direttamente sugli elementi: <td style="padding: 10px;">.
URL assoluti delle immagini. Link a immagini ospitate su un server, non a file allegati. Le immagini allegate potrebbero non essere visualizzate nelle risposte o negli inoltri.
Testo alternativo per ogni cosa. Quando le immagini non vengono caricate (bloccate dal client o da una connessione lenta), viene visualizzato il testo alt. Rende le firme leggibili senza immagini.
Nessuna immagine di sfondo. Outlook li ignora. Utilizzate invece colori solidi o immagini regolari.
Verifica della formattazione dei link. Alcuni clienti formattano automaticamente gli URL, interrompendo i collegamenti di testo in stile. Controllate sempre che il testo collegato appaia correttamente.
Evitare i caratteri esotici. I font web non funzionano. Attenetevi ai font di sistema: Arial, Helvetica, Georgia, Times. Vengono visualizzati ovunque.
Osservare l'altezza e la spaziatura delle linee. Ciò che appare bene nell'editor potrebbe essere visualizzato con spazi vuoti in Outlook. Utilizzate valori specifici di pixel per la spaziatura.
La vostra firma e-mail non è statica: è un codice che viaggia in un territorio ostile. Ogni cliente la interpreta in modo diverso. Dimensioni e dimensioni corrette dei file vi danno la migliore possibilità di apparire professionali ovunque.
Iniziate con queste specifiche:
- Loghi: 300x100px max, meno di 20KB
- Banner: 600x80px max, sotto i 30KB
- Totale firma: meno di 50KB
- Tutte le immagini: Densità pixel 2x per retina
Testate ovunque. Regolatevi in base a ciò che si rompe. La vostra firma vi rappresenta in centinaia di e-mail. Fate in modo che conti.
Scritto dal team editoriale di Ge-Sign.
