Gmail mostra l'icona di download sulle immagini di HTML Email

Question

Abbiamo un Html Builder, che ti permette di creare un html reattivo per le email. Stiamo utilizzando il motore di Arrow verde per inviare le e-mail alla rinfusa. Il problema è che quando la posta elettronica viene aperta nella posta in arrivo di Gmail, mostra l'icona di download su alcune immagini (non tutte), mentre il loro html generato è lo stesso rispetto alle immagini senza icone di download.

Perché sarebbe gmail aggiungere le icone scaricare sulle immagini messaggi di posta elettronica. Sembra che le sue immagini trattate come attaccamento. Qualche informazione, correzione o suggerimento è apprezzato ?? Ecco il codice HTML generato che siamo sending-

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="bodyContainer"> 
    <tr> 
     <td align="center" valign="top" > 
      <table border="0" cellspacing="0" cellpadding="0" class="emailContainer"> 
       <tr> 
        <td> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
             <tr> 
              <td style="text-align: center; padding: 0px;"> 
               <img src="http://img.xyz.net/gallery/212aeedd-2672-4960-a81c-8b78635c8fd9/firsthalf.jpg" width="598" border="0" style="max-width: 600px;" hspace="0" vspace="0"> 
              </td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
             <tr> 
              <td style="text-align: center; padding: 0px;"> 
               <img src="http://img.xyz.net/gallery/212aeedd-2672-4960-a81c-8b78635c8fd9/secondhalf.jpg" width="300" border="0"style="max-width: 300px;" hspace="0" vspace="0"> 
              </td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
             <tr> 
              <td style="text-align: center; padding: 0px;"> 
               <img src="http://img.xyz.net/gallery/212aeedd-2672-4960-a81c-8b78635c8fd9/2110513155A40L.jpg?asd" width="250" border="0" style="max-width: 250px;" hspace="0" vspace="0"> 
              </td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
             <tr> 
              <td> 
               <h1>Ready To Create An Amazing Product??</h1> 
              </td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td valign="top"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
           <td> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
             <tr> 
              <td>Now that you've selected your template layout, it's time to get the creative juices flowing and show off your awesome email marketing skills. You can build the perfect email using our powerful and easy-to-use editor. You can drag-and-drop different types of blocks directly into your email and start adding text, images and links. You can also go to the 'Design' tab to customize all the fonts and colors.</td> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
           <td valign="top"> 
            <div align="center"> 
             Phone: 555-555-1234 | Email: email@my-website-address.com 
             Web: www.my-website-address.com 
            </div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
      <div class="complianceFooter"> 
      </div> 
     </td> 
    </tr> 
</table> 

seguente link state chiedendo per somthing similer ..

http://www.codeproject.com/Questions/439012/Email-images-are-rendered-as-attachments-in-gmail

https://productforums.google.com/forum/#!topic/gmail/BosiJUnYDt0

E 'una sorta di bug o altro? ? Se voi ragazzi potete fornirmi qualsiasi link o qualcosa che sarebbe bello .. Grazie ragazzi

Answer 1

Questa è una nuova funzionalità implementata da Google un paio di settimane fa, credo che funzioni solo su immagini "grandi", ma io non ho potuto scoprire i vincoli esatti. Sembra che succeda di più quando hai un'immagine di un eroe molto grande.

Come funzione presumo che sia più inteso dove qualcuno che conosci personalmente ti ha fornito una Foto incorporata nell'e-mail, c'è anche un'altra funzionalità che ti consente di aggiungerla direttamente al tuo Google Drive.

A Google Plus post from Gmail themselves

A blog post about it

Answer 2

Aggiungi questa classe css per rimuovere l'icona di download.

.a5q {display: none !important;}

Answer 3

ho fissato questo avvolgendo le mie immagini di grandi dimensioni in un tag di ancoraggio come questo:

<a href='#'>

Se non si desidera che il cursore dell'utente per indicare un link, aggiungi style='cursor: default;' all'elemento img.

Answer 4

Come @Pebbs spiegato in precedenza, Gmail sembra rilevare le immagini entro determinati limiti di dimensioni come allegati scaricabili. Per aggirare questo problema, ciò che ha funzionato per me era usare l'attributo "background" per visualizzare l'immagine all'interno di un tag <td>. Ciò fa sì che Gmail percepisca l'immagine come un'immagine di sfondo anziché come uno <img> potenzialmente scaricabile. Così, per esempio, nel codice anziché il seguente:

<td> 
<img src="your_image.jpg" alt="Your Image" height="114" width="275" style="border: 0 none;" /> 
</td> 

Usa:

<td background="your_image.jpg" valign="top" height="114" width="256" style="background-position: 0 100%; background-repeat: no-repeat;" > 
<!--[if gte mso 9]> 
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:256px;height:114px;"> 
<v:fill type="tile" src="your_image.jpg" color="#e6e6e6" /> 
<v:textbox inset="0,0,0,0"> 
<![endif]--> 
<div> 
</div> 
<!--[if gte mso 9]> 
</v:textbox> 
</v:rect> 
<![endif]--> 
</td> 

Nota che il VML tra le <td> s potrebbe essere necessaria per i client di posta più anziani per rendere l'immagine correttamente.

Answer 5

ho fissato questo aggiungere questo codice per syles

table table table div {display: none !important;} 

Answer 6

sono stato in grado di risolvere questo problema, tagliando la mia immagine in 4 parti uguali in senso verticale e poi codifica le 4 immagini con il seguente codice.

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" summary="Split Image"> 
<tr> 
<td><img src="image1" width="200" height="200" alt="Part 1x1" border="0" /></td> 
<td><img src="image2" width="200" height="200" alt="Part 1x2" border="0" /></td> 
<td><img src="image3" width="200" height="200" alt="Part 1x3" border="0" /></td> 
<td><img src="image4" width="200" height="200" alt="Part 1x4" border="0" /></td> 
</tr> 
</table> 

Answer 7

In un'e-mail di marketing probabilmente stai meglio avendo il maggior numero di immagini possibile di link al tuo sito web.

Il tuo banner di vendita massiccia dovrebbe probabilmente solo collegarsi al tuo sito Web - non sono necessari trucchi.

<a href='https://bigsale.com'>...</a> 

E se si dispone di una grande immagine di un prodotto reale, quindi in realtà è una caratteristica piacevole che permette di aprire in un lightbox all'interno GMail. Il download in quel contesto dovrebbe apparire meno fuori luogo.

Answer 8

Modo facile e pulita per prevenire scaricare immagine e di togliere icona di download in Gmail

Metodo 1: - Aggiungi .a5q {display: none !important;} classe CSS nel tag.

Metodo 2: - Aggiungere lo stile tabletabletable div {display: none !important;} nella sezione all'interno del tag.

Metodo 3: - basta vincolare il proprio tag immagine con un tag (ancora) con i seguenti stile css:
style="cursor:default;"

Metodo 4: - Un altro metodo per fare questo, ancora una volta solo vincolare il proprio tag immagine con una (anchor) tag con il seguente stile css:
style="pointer-events:none;"