Immagini nelle newsletter: guida pratica

Dai a ogni immagine una funzione precisa

Una foto di prodotto può presentare un nuovo articolo. Una foto di un evento aiuta a immaginare il luogo o l’attività. Un diagramma può spiegare un cambiamento meglio di un paragrafo. Scegli l’immagine in base a ciò che aiuta il lettore a capire in questa specifica email.

Chiediti cosa si perderebbe eliminandola. Se è solo decorativa, un’immagine più piccola o nessuna immagine può lasciare più spazio al messaggio. Se mostra un dettaglio importante del prodotto, scegli una vista in cui quel dettaglio si distingua anche sul telefono.

Questa guida riguarda le immagini visualizzate nel contenuto di una newsletter. Per le fotografie inviate come allegati scaricabili, consulta la nostra guida alla compressione delle immagini per email.

Scrivi le informazioni essenziali anche fuori dall’immagine

Scrivi il titolo, i dettagli importanti e il link principale come testo nell’editor della newsletter, per esempio in Moosend. Per una promozione, indica sconto, condizioni e scadenza; per un evento, data, luogo e link di prenotazione. Un’immagine promozionale può accompagnare queste informazioni, ma non dovrebbe essere l’unico posto in cui compaiono.

Scegli il testo alternativo secondo la funzione dell’immagine:

• Una foto che aggiunge informazioni utili: descrivi il dettaglio necessario al lettore, come la forma visibile o una caratteristica del prodotto.
• Un’immagine puramente decorativa: lascia vuoto il testo alternativo se non aggiunge informazioni e non è un link. La guida del W3C alle immagini decorative spiega perché descrizioni superflue possono distrarre chi usa un lettore di schermo.
• Un’immagine che è l’unico contenuto di un link: indica la destinazione o l’azione, per esempio «Vedi la tazza blu», invece di descrivere soltanto l’aspetto. Consulta la guida del W3C alle immagini funzionali.

Il testo alternativo non sostituisce il testo principale dell’email: alcune app non lo mostrano in tutte le situazioni. Mailchimp spiega questi limiti. Trovi altri esempi nella nostra guida ai testi alternativi.

Adatta l’immagine al modello dell’email

Parti dalle dimensioni consigliate per il blocco immagine del modello. Una foto larga quanto tutta la colonna e una piccola scheda prodotto richiedono file diversi. Ritaglia una copia per lo spazio disponibile senza deformare il soggetto, usando lo strumento di ritaglio se necessario.

Distingui la larghezza visualizzata nell’email dalle dimensioni del file in pixel. Se la foto viene mostrata a 600 pixel di larghezza, puoi confrontare file larghi 600 e 1200 pixel, visualizzandoli entrambi a 600. Il file più largo fornisce più pixel a uno schermo ad alta risoluzione; non dovrebbe allargare l’email. Serve anche un originale abbastanza grande e il file da scaricare può essere più pesante. Sono misure di esempio: segui le indicazioni del modello e confronta le email ricevute. Le raccomandazioni di Mailchimp variano secondo il modello e il blocco di contenuto.

Verifica che il servizio di newsletter accetti il file. Controlla poi che l’immagine sia visibile nell’email ricevuta nelle app che provi. Un caricamento riuscito non dimostra che i destinatari vedranno correttamente l’immagine. JPEG è un punto di partenza pratico per le fotografie; PNG è utile per trasparenza e grafica. Mailchimp consiglia JPG, PNG o GIF nella sua guida alle immagini dei modelli. Verifica il tuo servizio prima di riutilizzare un file esportato per il sito web.

Se usi una GIF animata, rendi comprensibile il primo fotogramma anche da solo. Alcuni destinatari potrebbero vedere soltanto quello; la guida di Microsoft alle animazioni spiega come le impostazioni di animazione possano causarlo in Outlook. Non inserire un passaggio necessario o un’offerta soltanto nei fotogrammi successivi.

Valuta il peso complessivo dei file oltre ai dettagli delle immagini. Diverse immagini grandi possono rallentare il caricamento dell’email. La nostra guida alla riduzione del peso dei file spiega come preparare copie più leggere.

Esempio: annunciare un nuovo prodotto

Immagina un negozio di articoli per la casa che presenta una nuova tazza blu in ceramica. Le seguenti versioni usano la stessa foto del prodotto:

Nella seconda versione, ritaglia la foto in modo che tazza e manico restino visibili sul telefono. Se la foto è un link separato al prodotto, assegnale un testo alternativo adatto e verifica la sua destinazione oltre a quella del link di testo.

Prova l’email come la vede il destinatario

L’anteprima dell’editor aiuta a organizzare il contenuto, ma le app di posta possono mostrare lo stesso messaggio in modi diversi. Invia un’email di prova dal servizio di newsletter e apri l’email ricevuta su computer e telefono. Se possibile, prova anche le app usate dal tuo pubblico, come Gmail, Outlook o Apple Mail. La guida di Mailchimp alle anteprime e alle prove spiega perché servono entrambe.

• Controlla il soggetto principale e il ritaglio. Volti, prodotti e dettagli importanti restano visibili senza deformazioni o un layout più largo?
• Esamina l’immagine alla dimensione visualizzata. Si capisce senza zoomare? Scrivi anche le etichette necessarie o le spiegazioni dei diagrammi nel testo dell’email.
• Prova la modalità chiara e quella scura, se disponibili. Un logo scuro su fondo trasparente può diventare poco visibile su uno sfondo scuro. Prova una versione con un contorno contrastante o uno sfondo uniforme adatto all’interno dell’immagine e verifica entrambe le modalità. La guida di Mailchimp alla modalità scura tratta il contrasto dei loghi e le differenze tra app.
• Visualizza il messaggio con le immagini bloccate, se l’app lo permette. Leggi il contenuto rimasto, controlla i testi alternativi e assicurati che il link principale sia disponibile.
• Apri i link. Controlla separatamente immagini cliccabili e pulsanti: possono avere destinazioni diverse.

Se manca un’immagine, trova la causa

Esegui questi controlli nell’ordine indicato. Outlook classico può bloccare le immagini esterne, come spiega la guida di Microsoft ai download. Gmail può nascondere le immagini dei messaggi che ritiene sospetti; consulta le impostazioni delle immagini di Gmail.

1. Controlla il caricamento delle immagini nella prova ricevuta. Se l’app propone di mostrare o scaricare le immagini, consentilo per il tuo messaggio di prova. Se compaiono, era l’app a bloccarle. La compressione non aggira questa impostazione.
2. Trova l’immagine problematica nell’editor. Apri il suo blocco e controlla che sia selezionato il file corretto della libreria. Se manca, carica di nuovo una copia conservata e seleziona il nuovo file. Per un’immagine ospitata altrove, verifica l’indirizzo usato dal blocco.
3. Controlla l’accesso a un file esterno. Apri l’indirizzo diretto dell’immagine in una finestra privata del browser senza accedere a un account. Una schermata di accesso o una pagina di condivisione non è il file immagine. Usa invece la libreria del servizio o un indirizzo pubblico adatto. Una prova riuscita conferma solo l’accesso dal browser senza autenticazione, non la visualizzazione in ogni app di posta.
4. Esamina le differenze tra app. Se il file è accessibile ma non si vede in un’app, controlla prima le sue impostazioni di caricamento delle immagini. Confronta poi il formato con le indicazioni del servizio. Prova una copia JPEG per una foto o PNG quando serve trasparenza, inserita tramite un normale blocco immagine. Se un modello personalizzato continua a non funzionare, chiedi a chi lo gestisce di controllare il codice HTML dell’immagine.
5. Invia una nuova prova dopo la correzione. Aprila nell’app interessata. Controlla l’immagine, il testo alternativo aggiornato e sia il link dell’immagine sia il link di testo separato, se presenti.

La guida di Mailchimp alla risoluzione dei problemi spiega gli errori di indirizzo, accesso limitato e visualizzazione. Segui le istruzioni del tuo servizio per selezionare o sostituire i file della libreria.

Ultimo controllo prima dell’invio

• Ritaglio, dettagli e peso del file sono adatti al modello.
• Il messaggio principale e il link funzionano senza immagini.
• Il testo alternativo corrisponde alla funzione di ogni immagine.
• Il primo fotogramma di un’eventuale GIF funziona da solo e i loghi restano visibili in modalità chiara e scura.
• L’email di prova finale ricevuta è stata controllata nelle app pertinenti, comprese le fonti delle immagini e le destinazioni dei link.