# Header email animati: GIF veloci da caricare e belle da vedere [Canonical HTML page](https://gradiently.design/it/guide/animated-email-header) Il movimento in cima a un’email si nota, ma le caselle di posta sono schizzinose. Un buon header animato è leggero, breve e ha senso compiuto anche se non si muove mai. ## The short version - Un header email animato è quasi sempre una GIF, perché la maggior parte dei client di posta mostra le GIF animate e pochissimi riproducono video. - Alcune versioni desktop di Outlook per Windows mostrano solo il primo frame di una GIF, quindi il primo frame deve funzionare come design completo. - Una dimensione comune per l’header è 1200×600 pixel, mostrata a 600 pixel di larghezza così resta nitida sugli schermi ad alta densità. - Tenere leggera la GIF conta perché le immagini pesanti si caricano lentamente con i dati mobili, e i loop brevi con poco movimento pesano meno. - Le parole importanti, come offerte, date e pulsanti, vanno in testo HTML vero sotto l’header, non solo dentro l’animazione. Un **header email animato** dovrebbe essere una GIF, di circa 1200×600 pixel mostrata a 600 di larghezza, con un loop breve, un peso contenuto e un primo frame che funziona da solo come design finito. È l’ultima regola quella che molti dimenticano: alcune versioni desktop di Outlook per Windows mostrano solo il primo frame di una GIF animata, e chi ha le immagini bloccate vede soltanto il tuo testo alternativo. Progetta prima per questi lettori, poi aggiungi il movimento come extra per tutti gli altri. ## Perché gli header email animati sono GIF Il supporto al video nelle email è raro e inaffidabile. La GIF animata, un formato immagine, si vede nella maggior parte dei client, da Apple Mail a Gmail. Formati più recenti come il WebP animato hanno un supporto più a macchia di leopardo. Così la GIF resta la scelta pratica, con tutti i suoi limiti: al massimo 256 colori per frame e file più grandi del video. Questi limiti plasmano il design. Il confronto completo è in [GIF o MP4](https://gradiently.design/it/guide/gif-vs-mp4). | Impostazione | Consiglio | Perché | | --- | --- | --- | | Formato | GIF | Si riproduce nella maggior parte dei client; il video quasi mai | | Dimensione di design | 1200×600 px | Il doppio della larghezza mostrata, per schermi nitidi e densi | | Larghezza mostrata | 600 px | La larghezza standard del corpo di un’email | | Durata del loop | Da 2 a 5 secondi | I loop brevi pesano meno e sembrano comunque vivi | | Frequenza dei frame | Da 10 a 15 fps | Abbastanza fluida per colori che scorrono e semplici comparse | | Peso del file | Il più leggero possibile | Gli header grandi si caricano lentamente con i dati mobili | Punti di partenza per un header che si carica in fretta e resta nitido. Se il peso conta più della nitidezza, esporta la GIF a 600 px di larghezza. ## Progetta il primo frame come ripiego Considera il primo frame come l’header dell’email e l’animazione come un extra. Se le tue parole compaiono dal nulla, chi legge in Outlook vede un blocco di colore vuoto. Se il prodotto compare al secondo due, non lo vede mai. Metti a schermo nel primo frame tutto ciò che conta, poi lascia che il movimento accada intorno. Header di newsletter con la scritta «Il numero di ottobre» e una piccola etichetta «Appunti dal campo» su un gradiente Primo frame: completo. Ogni parola è al suo posto, quindi chi vede solo questo frame non perde nulla. Lo stesso header di newsletter più avanti nel loop, con il colore del gradiente cambiato dietro parole ferme A metà loop: le parole restano ferme mentre il colore cambia dietro. Il movimento aggiunge atmosfera, non informazione. - **Parole ferme, sfondo in movimento.** Un colore che scorre dietro un titolo fisso è l’header animato più affidabile che esista. - **Un solo piccolo movimento.** Una parola che cambia, una riga che si sottolinea da sola, un morbido spostamento di luce. Un’idea per header. - **Finisci dove hai iniziato.** Un loop che salta all’inizio sembra rotto. Fai in modo che l’ultimo frame conduca al primo, come in [video in loop senza giunture](https://gradiently.design/it/guide/seamless-loop-video). - **Niente lampeggi.** Tieni lente le variazioni di luminosità. I lampi rapidi sono fastidiosi e possono essere dannosi. ## Come tenere leggera la GIF La maggior parte del peso di una GIF viene dai pixel che cambiano tra un frame e l’altro. Un header in cui si muove tutto il frame è pesante; uno in cui un gradiente lento scorre dietro parole ferme è molto più leggero, perché l’encoder può salvare solo ciò che è cambiato. Dimezzare la larghezza divide i pixel all’incirca per quattro, quindi decidi presto se questo header deve essere largo 1200 px o se bastano 600 px. 1. **Progetta a 1200×600** Imposta l’header con tutte le parole già al loro posto nel primo frame. 2. **Tieni breve il loop** Da due a cinque secondi, con ogni movimento che completa un ciclo intero. 3. **Esporta in GIF a 10-15 fps** Usa una tavolozza costruita sull’animazione stessa, non una generica. 4. **Controlla il peso** Se è pesante, prova 600 px di larghezza, meno frame o meno movimento prima di abbassare la qualità. 5. **Controlla il primo frame da solo** Apri la GIF in un visualizzatore che mostra solo il primo frame, oppure invia una prova a Outlook su Windows. I comandi di esportazione dettagliati, la tavolozza e le impostazioni di dithering sono in [GIF animate](https://gradiently.design/it/guide/gif-maker-tips). ## HTML per un header email animato Scrivi l’header come una normale immagine dentro una cella di tabella. Imposta la larghezza mostrata sia nell’attributo sia nello stile, così ogni client la dimensiona correttamente, dai all’immagine un testo alternativo descrittivo e dai alla cella un colore di sfondo uguale al primo frame della GIF. Quando le immagini sono bloccate, chi legge vede il tuo colore e le tue parole, non un riquadro vuoto. ```html
The October issue: new work, three reads and a studio update
``` Una GIF 1200×600 mostrata a 600×300. Il colore della cella corrisponde al primo frame, e il testo alternativo stilizzato si legge bene a immagini disattivate. > **Testo vero sotto l’header** Metti offerta, data e pulsante in testo HTML vero sotto l’immagine. Si vede con le immagini disattivate, può essere letto dagli screen reader e cercato nella casella di posta, e resta nitido a qualsiasi dimensione. ## Modalità scura e immagini bloccate La modalità scura può cambiare i colori intorno al tuo header ma di solito lascia in pace l’immagine. Un header con un proprio colore di sfondo pieno regge in entrambe le modalità; uno con un bordo trasparente o bianco può finire per essere un riquadro luminoso su uno schermo scuro. I gradienti CSS dietro l’immagine non sono affidabili tra i client, quindi incorpora il gradiente nella GIF e usa un colore pieno come ripiego. [I gradienti nelle email](https://gradiently.design/it/guide/gradients-in-email) spiegano le opzioni. ### Evita - Parole che compaiono solo dopo il primo frame - Una GIF pesante in cui si muove tutto il frame - Bordi trasparenti che stonano in modalità scura - Testo alternativo vuoto o generico come «header» - Offerta e pulsante solo dentro l’immagine ### Fai - Un primo frame che è un design completo - Parole ferme su un colore che si muove piano - Un colore di sfondo pieno nell’immagine - Un testo alternativo che dice ciò che dice l’header - Testo HTML vero per tutto ciò su cui si agisce In Gradiently puoi progettare l’header nella dimensione degli header email su un Mark in movimento, tenere ferme le parole mentre il Mark scorre dietro e esportarlo come GIF con Pro. Poiché lo sfondo è un Mark unico che possiedi, l’header somiglia al tuo brand e non a un modello condiviso con altre newsletter. Per header statici e impaginazione, vedi [il design degli header email](https://gradiently.design/it/guide/email-header-design). ## FAQ ### Le GIF animate funzionano nelle email? Nella maggior parte dei client di posta sì. Alcune versioni desktop di Outlook per Windows mostrano solo il primo frame, quindi progetta quel frame perché funzioni da solo. ### Che dimensioni deve avere un header email animato? Progettalo a 1200×600 pixel e mostralo a 600 pixel di larghezza. Se il peso del file conta più della nitidezza sugli schermi densi, esporta invece la GIF a 600×300. ### Posso usare un video in un header email? Il video si riproduce in pochissimi client di posta, quindi non è una scelta affidabile. Usa una GIF animata, oppure un’immagine statica che rimanda al video. ### Perché la mia GIF email non si anima in Outlook? Alcune versioni di Outlook per Windows mostrano solo il primo frame delle GIF animate. È un limite del client, non del tuo file, ed è per questo che il primo frame deve portare tutto il messaggio. ### Come rendo più piccola una GIF per email? Accorcia il loop, abbassa la frequenza dei frame a circa 10-15 fps, tieni ferma la maggior parte del frame e valuta di esportare a 600 px di larghezza.