Come e perché dividere le immagini delle email

Se ti sei mai chiesto come marchi come Nike, Zara, o Glossier inviano e-mail con pixel-perfect disegni che sembrano identici in ogni client di posta elettronica — compreso Outlook — la risposta è immagine splitting immagine.

La divisione immagine e-mail è il processo di taglio di un disegno e-mail completo in sezioni orizzontali, ciascuna salvata come un file di immagine separato, quindi impilarli di nuovo insieme utilizzando semplice HTML. È stata una tecnica fondamentale nel marketing e-mail per oltre un decennio, e rimane uno dei modi più affidabili per inviare campagne visive-driven.

Che cosa è la divisione immagine e-mail?

Invece di inviare un'immagine massiccia come l'intera e-mail (che crea una singola area cliccabile), la divisione dell'immagine divide il vostro disegno in più strisce orizzontali — tipicamente 4 a 8 sezioni.

Ogni sezione diventa separata <img> tag in HTML della tua email, impilato verticalmente all'interno di una tabella. Quando l'email rende, le sezioni si allineano perfettamente per ricreare il design originale. Ma ora ogni sezione può collegare ad un URL diverso.

La struttura HTML è minima — solo una serie di righe di tabella contenenti immagini. Nessun CSS complesso, nessuna domanda di media reattiva, nessun hack di Outlook. Questa semplicità è proprio per questo che la tecnica funziona in modo affidabile.

Perché i marchi dividono le loro email

Image image splitting non è una soluzione di lavoro — è una strategia deliberata che risolve diverse principali sfide di email marketing:

Resa visiva nei client di posta

Le email codificate in HTML sembrano diverse in ogni client di posta elettronica. Outlook rompe i layout, Gmail strisce stili, e Yahoo rende le cose in modo diverso da Apple Mail. Con la divisione immagine basata sull'immagine, la tua email è una serie di immagini - e le immagini rendono identico ovunque. Quello che progetta è esattamente ciò che gli abbonati vedono.

Immunità di modalità oscura

La modalità oscura può invertire i colori degli elementi HTML — girando sfondi bianchi scuro, luce del testo scuro, e generalmente sprecando su schemi di colore accuratamente progettati. Ma la modalità oscura non può alterare i pixel all'interno di un'immagine. Le e-mail rilasciate guardano lo stesso in modalità luce e modalità oscura. Leggi tutto su dark mode email design.

Tipografia personalizzata

Le email HTML sono limitate ai font web-safe (Arial, Georgia, Verdana) nella maggior parte dei client di posta elettronica. I font web personalizzati funzionano in Apple Mail ma non riescono in Outlook e Gmail. Con le email basate sull'immagine, qualsiasi tipo di carattere che il tuo strumento di progettazione supporta rende perfettamente - perché il testo fa parte dell'immagine.

Sezioni cliccabili multiple

Ogni sezione può collegarsi a un URL diverso. L'intestazione può collegare alla vostra homepage, la sezione del prodotto alla pagina del prodotto, e il piè di pagina CTA alla vostra pagina di vendita. Questa è la ragione tecnica primaria per la divisione delle immagini piuttosto che inviare una grande immagine.

Come Decidere Dove Spalare

Il posizionamento dei tuoi tagli determina sia la funzionalità che l'affidabilità dell'e-mail finale. Seguire queste linee guida:

Regola 1: Tagliare tra le sezioni dei contenuti

Punti di divisione naturale nel vostro disegno — tra l'intestazione e l'eroe, tra le sezioni di prodotto, tra il corpo e il piè di pagina. Questi sono i luoghi più puliti a sezione perché di solito c'è un confine orizzontale chiaro.

Regola 2: Ogni obiettivo di collegamento ottiene il proprio Split

Se due parti del tuo link di progettazione a diversi URL, devono essere sezioni separate. Un banner eroe che collega una pagina di raccolta e un blocco di prodotto che collega una pagina di prodotto non può essere nella stessa sezione.

Regola 3: Non tagliare attraverso il contenuto di flusso

Evitare la divisione dell'immagine attraverso il mezzo di un paragrafo, un'immagine del prodotto, o un gradiente che abbraccia due sezioni. Se il limite della sezione cade nel mezzo del contenuto visivo, il disallineamento diventa visibile — soprattutto in Outlook.

Regola 4: Mantenere una zona Buffer

Lasciare almeno 5-10px di imbottitura sopra e sotto ogni limite di sezione. Questo impedisce problemi di allineamento in cui i clienti aggiungono piccoli spazi tra le immagini. Una zona tampone di colore solido rende qualsiasi micro-gap invisibile.

Numero ottimale di sezioni

Il punto dolce per la maggior parte delle email promozionali è 4-8 sezioni:

• 3-4 sezioni: layout semplice — intestazione, eroe, corpo, piè di pagina. Ogni link a una destinazione.
• 5-6 sezioni: Standard — intestazione promozionale, eroe, 2-3 sezioni di prodotto, piè di pagina CTA.
• 7-8 sezioni: Campagne complesse con più caratteristiche del prodotto e aree cliccabili.
• 8+ sezioni: Possibile ma raramente necessario. Più sezioni significano più HTML, più potenziale per le lacune e più file da gestire.

Una buona regola di pollice: sezione quante volte hai obiettivi di collegamento distinti, più uno per qualsiasi sezione non cliccabile intestazione / piedi.

Dimensioni compressione e file

Ogni sezione deve essere compressa singolarmente. Il peso totale di tutte le immagini combinate dovrebbe rimanere sotto 800KB per il caricamento rapido su reti mobili. Obiettivo 100-150KB per sezione per una tipica e-mail di 6 sezioni.

Esportazione Risoluzione 2x (1200px largo per una e-mail 600px) per la nitidezza del display retina, quindi comprimere a 75-85% qualità JPEG. Il risultato: immagini nitide a dimensioni di file ragionevoli. Guarda la nostra guida di compressione completa per le raccomandazioni dettagliate degli strumenti e le impostazioni di qualità.

Problemi e correzioni comuni

Gaps Tra le sezioni in Outlook

Questo è il più noto problema di divisione immagine-immagine. Outlook aggiunge piccole lacune (2-5px) sotto le immagini a causa del suo motore di rendering. La correzione è una combinazione di proprietà CSS sull'immagine e la sua cella di tabella contenente:

• display: block su tutto <img> tags
• font-size: 0 e line-height: 0 su <td> elementi
• Esplicito larghezza e altezza attributi su ogni immagine
• ♪ e cellpadding="0" cellpacing="0" sul tavolo

Scala mobile

Impostare tutte le immagini per max-width: 100% con height: auto così scalano proporzionalmente su schermi più piccoli. Poiché le e-mail tagliate sono intrinsecamente monocolonna e full-width, la scala mobile è semplice — ogni sezione si estende semplicemente alla larghezza del viewport.

Accessibilità

Le email basate sull'immagine hanno una reale limitazione dell'accessibilità: i lettori dello schermo possono solo leggere il testo alternativo, non il testo all'interno delle immagini. Per ogni sezione, scrivere conciso, testo alternativo descrittivo (sotto 125 caratteri) che comunica le informazioni chiave. Per i contenuti critici di conformità come il link disiscrizione, prendere in considerazione l'utilizzo di un live HTML footer di testo sotto le sezioni dell'immagine.

Il flusso di lavoro di divisione immagine: Manuale vs. Strumenti

Flusso di lavoro manuale (Photoshop / Figma)

1. Progetta la tua email a 1200px wide (2x per retina)
2. Posizionare le guide orizzontali in ogni limite di sezione
3. Esporta ogni sezione come immagine separata (JPEG o PNG)
4. Comprime ogni immagine con TinyPNG o Squoosh
5. Costruire la struttura della tabella HTML manualmente o con un modello
6. Aggiungi link a ogni immagine
7. Carica a Klaviyo e prova

Questo processo richiede 30-60 minuti per e-mail una volta che sei esperto. I passaggi manuali di codifica HTML e di compressione individuale sono i più grandi lavandini di tempo.

Flusso di lavoro assisato

Strumenti come EmailSlicer automatizzano le parti ripetitive: caricare il tuo disegno completo, definire dove alla sezione (o lasciare che lo strumento suggerisca tagli), comprimere ogni sezione automaticamente, ed esportare direttamente a Klaviyo. Ciò che richiede 30-60 minuti manualmente può essere fatto in 5-10 minuti.

Quando NON Split

La divisione immagine è la scelta giusta per la maggior parte delle campagne di marketing, ma ci sono casi chiari in cui non è appropriato:

• E-mail transazionali: Le conferme d'ordine, le notifiche di spedizione e le reimpostazioni di password hanno bisogno di dati dinamici (informazioni di ordine, numeri di tracciamento) che non possono essere cotti in immagini. Usa l'HTML.
• Raccomandazioni di prodotto personalizzate: I blocchi di prodotti dinamici di Klaviyo tirano diversi prodotti per ogni abbonato. Questo richiede il rendering HTML.
• Contenuto di testo a lunga forma: Newsletter e email educative dove il testo stesso è il valore. Il testo dal vivo è ricercabile, traducibile e accessibile.
• Campagne critiche per l'accessibilità: Se una parte significativa del pubblico utilizza i lettori di schermo o ha le immagini disabilitate per impostazione predefinita, le email HTML comunicano meglio.

L'approccio migliore è spesso un ibrido: sezioni basate sull'immagine per contenuti visivi di marca, combinate con sezioni HTML per dati dinamici. Leggi il nostro confronto completo delle email basate su immagini e HTML.

Domande frequenti

Quante sezioni dovrebbero avere una email?

4-8 sezioni per una email promozionale standard. Il numero dipende da quante aree cliccabili distinte è necessario — ogni sezione che collega ad un URL diverso ottiene la sua sezione.

Le email suddivise funzionano sul cellulare?

Si'. A larghezza 600px, le immagini suddivise scalano proporzionalmente sugli schermi mobili. Ogni sezione si estende alla larghezza del viewport e impila verticalmente. Set max-width: 100% su tutte le immagini per un corretto scaling.

Perché le lacune appaiono tra le sezioni in Outlook?

Il motore di rendering di Outlook aggiunge la spaziatura predefinita sotto le immagini. Risolvere con display: block su immagini, font-size: 0 su celle di tabella e attributi espliciti di larghezza/altezza su ogni tag di immagine.

Posso usare le email suddivise a Klaviyo?

Si'. Caricare ogni sezione come blocco immagine nell'editor drag-and-drop di Klaviyo, impilarli verticalmente e aggiungere collegamenti singolarmente. È possibile mixare sezioni basate sull'immagine con blocchi di contenuti codificati in HTML.

L'immagine si divide come mappe immagine?

No. Le mappe delle immagini utilizzano un'immagine singola con hotspot di coordinate cliccabili. immagine diviso divide l'immagine in file separati, ciascuno con il proprio link. la divisione delle immagini è molto più affidabile tra i client di posta elettronica — le mappe delle immagini hanno un supporto inconsistente, soprattutto sul mobile.