Gestione delle immagini nei client email

Molti client bloccano le immagini per impostazione predefinita, finché l'utente non fa clic su "mostra immagini". Outlook, Gmail (per i mittenti sconosciuti) e la maggior parte dei client mobili con una connessione a consumo mostrano invece un segnaposto. Progetti dando per scontato che le immagini possano non essere visualizzate.

Non inserisca mai contenuti importanti (titoli, etichette delle CTA, prezzi) direttamente nelle immagini. Utilizzi testo HTML con stili CSS inline, così il messaggio rimane comprensibile anche quando le immagini sono bloccate, gli screen reader possono leggerlo e la modalità scura può adattarlo correttamente.

Ogni <img> deve avere un attributo alt descrittivo. Quando le immagini sono bloccate, il testo alternativo appare nel riquadro del segnaposto: un testo alt ben scritto colma il vuoto visivo con il messaggio che l'immagine avrebbe trasmesso.

Senza dimensioni esplicite, il segnaposto si riduce e il layout cambia quando l'immagine viene caricata. Imposti entrambi gli attributi (insieme al relativo stile inline), così la cella riserva spazio indipendentemente dal fatto che l'immagine venga caricata o meno.

Outlook inserisce un piccolo spazio sotto le immagini inline. Applichi style="display:block" a ogni <img> per eliminare questo spazio e garantire una spaziatura verticale coerente in tutti i client.

I client meno recenti aggiungono un bordo blu intorno a <a><img></a>. Imposti border="0" nell'attributo dell'immagine e style="border:0" inline, così le immagini racchiuse nei link vengono visualizzate correttamente all'interno delle call to action.

I client email non hanno il concetto di "questa pagina". Ogni src di un'immagine deve essere un URL https:// assoluto che punti a una CDN pubblicamente accessibile. I percorsi locali, relativi e gli URL http:// (contenuto misto) non vengono caricati e spesso l'errore passa inosservato.

Utilizzi un host per immagini veloce e distribuito geograficamente. Alcuni client recuperano le immagini tramite proxy (Gmail), aggiungendo il proprio livello di caching; le CDN proprietarie evitano di caricare le immagini da un'origine lenta e garantiscono un caricamento coerente in tutte le regioni.

Per gli sfondi hero, associ la proprietà CSS background-image a un bgcolor che corrisponda al tono dominante. Se l'immagine viene bloccata, la cella mostra comunque un colore appropriato e il testo sovrapposto al bgcolor rimane leggibile, evitando il disastro del testo bianco su uno sfondo bianco.

Visualizzi le immagini a 2x e le riduca tramite l'attributo width, così appariranno nitide sui display ad alta densità: una sorgente 600x600 visualizzata con width="300" height="300" risulta nitida su Retina. Il compromesso è il consumo di banda, quindi mantenga ridotte le dimensioni dei file utilizzando una compressione equivalente a WebP.

Le GIF animate funzionano nella maggior parte dei client, tranne Outlook, che mostra solo il primo fotogramma. Progetti il primo fotogramma in modo che abbia senso anche come immagine statica: il titolo, la CTA o il valore principale devono essere leggibili anche senza il resto dell'animazione.

Perché i contenuti importanti (titoli, etichette delle CTA, prezzi) non dovrebbero mai essere inseriti direttamente nelle immagini di un'email HTML?

Consideri le immagini un miglioramento, non il messaggio. Utilizzi URL https assoluti, imposti width/height/display:block/border:0, scriva un testo alt significativo, ospiti le immagini su una CDN veloce, associ gli sfondi a fallback bgcolor, progetti a 2x per Retina e ricordi che Outlook blocca le GIF sul primo fotogramma.