Immagini per email marketing: misure, peso e dark mode

L'oggetto conquista l'apertura. L'immagine del prodotto conquista il clic — ammesso che venga visualizzata. L'email è l'ambiente di design più ostile del marketing: decine di client, ognuno con il proprio motore di rendering, le proprie impostazioni predefinite per il blocco delle immagini e, sempre più spesso, le proprie idee molto precise sul dark mode.

Le foto prodotto che nel tuo strumento di design sembrano impeccabili arrivano regolarmente storpiate: allargate oltre il layout, troppo pesanti per una connessione ballerina, sostituite da un riquadro grigio vuoto o — il classico moderno — un PNG trasparente che si dissolve silenziosamente in uno sfondo scuro.

Ecco come far funzionare le immagini nell'email marketing: lo standard di larghezza, la disciplina sul peso dei file, un alt text che fa il suo dovere e un rimedio vero per la trappola del dark mode.

Quanto devono essere larghe le immagini prodotto nelle email?

La larghezza standard del contenuto nelle email di marketing è di 600 pixel, con alcuni template moderni che arrivano a 640. Il numero è sopravvissuto grazie ai riquadri di anteprima e ai vecchi client desktop che il memo sul responsive non l'hanno mai ricevuto. Progetta su quella misura.

• Scatti prodotto a tutta larghezza — esporta a 1200px, mostrali a 600. L'esportazione a 2x mantiene i bordi nitidi sugli schermi ad alta densità senza cambiare il layout.
• Griglie a più colonne — dividi l'area di contenuto da 600px, poi esporta ogni immagine al doppio della larghezza con cui viene mostrata.
• Imposta attributi width espliciti — alcuni client desktop ignorano il dimensionamento via CSS e mostrano le immagini alle loro dimensioni naturali: è così che un'esportazione da 2400px dimenticata fa esplodere un intero layout.

Qui più larga non vuol dire migliore. Un'immagine da 600px che si vede ovunque batte un capolavoro da 1400px che non si vede da nessuna parte.

Tieni leggeri i file immagine

Ogni kilobyte è una tassa che il tuo iscritto paga sulla connessione mobile, e le immagini di apertura lente vengono superate con lo scroll prima ancora di comparire.

• Punta a meno di 200 KB per immagine, e sii ancora più tirchio con tutto ciò che sta above the fold. I ritagli prodotto puliti su sfondi piatti si comprimono benissimo.
• JPEG per le fotografie, PNG per colori piatti e scontorni. Il WebP comprime meglio di entrambi — remover.bg lo esporta — ma il supporto nei client email è ancora incostante, quindi per le campagne tieni master in JPEG e PNG.
• Occhio al taglio di Gmail. Gmail tronca le email il cui HTML supera all'incirca i 102 KB. Le immagini ospitate esternamente non rientrano in quel limite, ma un'email tagliata nasconde tutto ciò che sta sotto — quindi tieni leggero anche il codice.

Scrivi l'alt text per le immagini bloccate

Le installazioni aziendali di Outlook e gli iscritti attenti alla privacy bloccano ancora le immagini per impostazione predefinita. Quando succede, l'alt text è tutto il tuo livello visivo.

• Descrivi il prodotto e il punto — "Set per pour-over in ceramica Terra, verde salvia" batte "image1.png" più o meno della distanza che separa una vendita da un cestino.
• Dagli uno stile — molti client rendono l'alt text come testo vero e proprio, che puoi formattare inline: imposta font, corpo e colore, così un'immagine bloccata degrada in qualcosa di intenzionale.
• Non intrappolare mai le informazioni critiche nei pixel — prezzo, scadenza e call to action vanno in testo reale. Se l'immagine viene bloccata, l'offerta deve funzionare lo stesso.

La trappola del dark mode: PNG trasparenti nei client email scuri

Ecco la trappola. Esporti un ritaglio prodotto pulito come PNG trasparente — la scelta giusta per quasi ogni altro canale, come spiega la nostra guida ai PNG trasparenti — e lo inserisci in un'email progettata sul bianco. Poi il client ribalta quello sfondo su un quasi-nero per gli utenti in dark mode. Le tue cuffie antracite diventano un contorno appena visibile. Il testo nero del tuo logo sparisce. E i bordi con anti-aliasing, fusi su un bianco dato per scontato, si accendono di un alone pallido.

Peggio ancora, i client non sono nemmeno d'accordo su cosa significhi dark mode: alcuni lasciano stare i tuoi colori, alcuni invertono solo gli sfondi, altri ridipingono quasi tutto. Non puoi controllare quale client usa un iscritto, quindi costruisci scontorni che sopravvivano a tutti.

• Incorpora uno sfondo pieno coerente — appiattisci il ritaglio su un colore di marca scelto apposta, invece di spedire trasparenza. Posalo su un colore pieno nell'editor di remover.bg e il client non avrà nulla da invertire. La nostra guida ai colori di sfondo per le foto prodotto ti aiuta a scegliere un tono che regga in entrambe le modalità.
• Aggiungi contorni e margini — un bordo sottile o un'ombra morbida attorno ai prodotti dai bordi scuri li mantiene leggibili anche se la tela viene ridipinta. Margini generosi evitano che i ritagli troppo stretti si scontrino con quello che il client combina intorno.
• Testa nei client reali — prima di ogni campagna invia email di prova vere ad Apple Mail, Gmail e Outlook con il dark mode attivo. Quello che un client rispetta, un altro lo ridipinge allegramente.

Mantieni coerenti gli scontorni prodotto in tutta la campagna

Una campagna raramente è una sola email. Lancio, approfondimento, promemoria ultima chiamata — lo stesso prodotto compare quattro o cinque volte, e se il trattamento cambia da un invio all'altro (sfondo bianco qui, grigio là, ombra sì, ombra no), la sequenza sembra cucita insieme con pezzi di recupero.

Fissa un solo trattamento e applicalo ovunque: un colore di sfondo, una regola di scala su quanta parte dell'inquadratura occupa il prodotto, uno stile di ombra — l'editor di remover.bg aggiunge ombre realistiche, così i ritagli stanno dentro l'inquadratura invece di fluttuare. Per i cataloghi ampi, l'API HTTP applica automaticamente la stessa elaborazione a ogni scatto: la stessa logica di automazione che sta silenziosamente ridisegnando l'AI nell'e-commerce.

In sintesi

Le immagini nelle email vivono o muoiono per quattro decisioni prese prima di premere invia:

1. Larghezza — progetta su 600px, esporta a 2x.
2. Peso — meno di 200 KB per immagine, JPEG o PNG per il massimo supporto.
3. Alt text — descrittivo, formattato, mai a nascondere l'offerta.
4. Dark mode — incorpora uno sfondo, contorna i bordi scuri, testa nei client reali.

Fai bene queste quattro cose e i tuoi prodotti sembreranno curati in ogni casella di posta — modalità chiara, modalità scura, immagini bloccate o no. È più di quanto possa dire la maggior parte delle campagne.