E-mail marketing e automazione

Come utilizzare immagini ad alta risoluzione per i display Retina nella tua e-mail HTML

Retina display è un termine di marketing utilizzato da Apple per descrivere un display ad alta risoluzione con una densità di pixel sufficientemente elevata da impedire all'occhio umano di distinguere i singoli pixel a una distanza di visualizzazione tipica. Un display retina ha tipicamente una densità di pixel di 300 pixel per pollice (ppi) o superiore, che è significativamente superiore a un display standard con una densità di pixel di 72 ppi.

I display Retina sono ora abbastanza diffusi per display, laptop, dispositivi mobili e tablet. Molti produttori ora offrono display ad alta risoluzione con densità di pixel che corrispondono o superano quelli dei display Retina di Apple.

CSS per visualizzare un'immagine a risoluzione più elevata per un display Retina

È possibile utilizzare il seguente codice CSS per caricare un'immagine ad alta risoluzione per un display Retina. Questo codice rileva la densità dei pixel del dispositivo e carica l'immagine con il formato @ 2x suffisso per i display Retina, durante il caricamento dell'immagine a risoluzione standard per altri display.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}

Un altro approccio consiste nell'utilizzare la grafica vettoriale o SVG immagini, che possono essere ridimensionate a qualsiasi risoluzione senza perdere qualità. Ecco un esempio:

<div style="max-width: 300px;">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</div>

In questo esempio, il codice SVG è incorporato direttamente nell'e-mail HTML utilizzando il file <svg> etichetta. Il viewBox L'attributo definisce le dimensioni dell'immagine SVG, mentre l' xmlns L'attributo specifica lo spazio dei nomi XML per SVG.

Le max-width la proprietà è impostata sul div per garantire che l'immagine SVG si ridimensioni automaticamente per adattarsi allo spazio disponibile, fino a una larghezza massima di 300 px in questo caso. Questa è una best practice per garantire che le immagini SVG vengano visualizzate correttamente su tutti i dispositivi e client di posta elettronica.

Nota: Il supporto SVG può variare a seconda del client di posta elettronica, quindi è importante testare la tua email su più client per assicurarti che l'immagine SVG sia visualizzata correttamente.

Un altro modo per codificare le e-mail HTML per i display Retina è utilizzare srcset. L'utilizzo dell'attributo srcset consente di fornire immagini ad alta risoluzione per i display Retina, assicurando al tempo stesso che le immagini siano dimensionate correttamente per i dispositivi a bassa risoluzione.

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

In questo esempio, il srcset L'attributo fornisce due fonti di immagini: image.jpg per dispositivi con una risoluzione di 600 pixel o inferiore, e image@2x.jpg per dispositivi con una risoluzione di 1200 pixel o superiore. IL 600w ed 1200w i descrittori specificano la dimensione delle immagini in pixel, il che aiuta il browser a determinare quale immagine scaricare in base alla risoluzione del dispositivo.

Non tutti i client di posta supportano il srcset attributo. Il livello di supporto per srcset può variare notevolmente a seconda del client di posta elettronica, quindi è importante testare le e-mail su più client per assicurarsi che le immagini vengano visualizzate correttamente.

HTML per le immagini nelle e-mail ottimizzato per i display Retina

è possibile codificare un'e-mail HTML reattiva che visualizzerà correttamente un'immagine a una risoluzione ottimizzata per i display retina. Ecco come:

  1. Crea un'immagine ad alta risoluzione che sia il doppio delle dimensioni dell'immagine effettiva che desideri visualizzare nell'e-mail. Ad esempio, se desideri visualizzare un'immagine 300×200, crea un'immagine 600×400.
  2. Salva l'immagine ad alta risoluzione con il file @ 2x suffisso. Ad esempio, se l'immagine originale è image.png, salva la versione ad alta risoluzione come immagine@2x.png.
  3. Nel tuo codice email HTML, utilizza il seguente codice per visualizzare l'immagine:
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
  <img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->

<!--[if (gte mso 9)|(IE)]> è un commento condizionale utilizzato per indirizzare versioni specifiche di Microsoft Outlook, che utilizza Microsoft Word per eseguire il rendering delle e-mail HTML. Il motore di rendering HTML di Microsoft Word può essere molto diverso da altri client di posta elettronica e browser web, quindi spesso richiede una gestione speciale. IL

(gte mso 9) condizione controlla se la versione di Microsoft Office è maggiore o uguale a 9, che corrisponde a Microsoft Office 2000. La |(IE) condition controlla se il client è Internet Explorer, che viene spesso utilizzato da Microsoft Outlook.

Email HTML con immagini ottimizzate per display Retina

Ecco un esempio di un codice e-mail HTML reattivo che visualizza un'immagine a una risoluzione ottimizzata per i display retina:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retina-Optimized Email</title>
  <style>
    /* Mobile-specific styles */
    @media only screen and (max-width: 480px) {
      /* Add mobile-specific styles here */
    }
    
    /* High-density display styles */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img {
        display: block;
        width: 300px !important;
        height: 200px !important;
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 40px 0 30px 0;">
        <img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <!--[if (gte mso 9)|(IE)]>
          <img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

Suggerimenti per l'immagine del display Retina

Ecco alcuni suggerimenti aggiuntivi sull'ottimizzazione delle e-mail HTML per le immagini ottimizzate per i display Retina:

  • Assicurati di avere sempre i tag immagine che includono using alt testo per fornire un contesto all'immagine.
  • Ottimizza le immagini per il Web per ridurre le dimensioni del file senza compromettere la qualità dell'immagine. Questo può includere l'utilizzo compressione dell'immagine strumenti, riducendo il numero di colori utilizzati nell'immagine e ridimensionando l'immagine alle sue dimensioni ottimali prima di caricarla nell'e-mail.
  • Evita immagini di sfondo di grandi dimensioni che possono rallentare i tempi di caricamento delle email.
  • Le GIF animate possono avere dimensioni di file maggiori rispetto alle immagini statiche a causa dei numerosi fotogrammi necessari per creare l'animazione, assicurati di mantenerli ben al di sotto di 1 Mb.

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

Articoli Correlati

Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.