0

I'm trying to send email with template on HTML and photos. Everything works fine but when sending the email to outlook I get this message:

download pictures - image

Can someone help me with sending images in the HTML as apart of it?

You can see example of my code here I hope it will be good. I didn't add the photos to the post.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:verdana, geneva, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
 <head> 
  <meta charset="UTF-8"> 
  <meta content="width=device-width, initial-scale=1" name="viewport"> 
  <meta name="x-apple-disable-message-reformatting"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta content="telephone=no" name="format-detection"> 
  <title>New Template 2</title> 
  <!--[if (mso 16)]>
    <style type="text/css">
    a {text-decoration: none;}
    </style>
    <![endif]--> 
  <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]--> 
  <style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:30px!important; text-align:center; line-height:120%!important } h2 { font-size:26px!important; text-align:center; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:30px!important } h2 a { font-size:26px!important } h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:16px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:18px!important; display:block!important; border-width:10px 20px 10px 20px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
 padding:0;
}
.ExternalClass {
 width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
 line-height:100%;
}
.es-button {
 mso-style-priority:100!important;
 text-decoration:none!important;
}
a[x-apple-data-detectors] {
 color:inherit!important;
 text-decoration:none!important;
 font-size:inherit!important;
 font-family:inherit!important;
 font-weight:inherit!important;
 line-height:inherit!important;
}
.es-desk-hidden {
 display:none;
 float:left;
 overflow:hidden;
 width:0;
 max-height:0;
 line-height:0;
 mso-hide:all;
}
</style> 
 </head> 
 <body style="width:100%;font-family:verdana, geneva, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;"> 
  <div class="es-wrapper-color" style="background-color:#F6F6F6;"> 
   <!--[if gte mso 9]>
   <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" color="#f6f6f6"></v:fill>
   </v:background>
  <![endif]--> 
   <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;"> 
     <tr style="border-collapse:collapse;"> 
      <td valign="top" style="padding:0;Margin:0;"> 
       <table cellpadding="0" cellspacing="0" class="es-header" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top;"> 
         <tr style="border-collapse:collapse;"> 
          <td class="es-adaptive" align="center" style="padding:0;Margin:0;"> 
           <table class="es-header-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;border-left:2px solid #052946;border-right:2px solid #052946;border-top:2px solid #052946;"> 
             <tr style="border-collapse:collapse;"> 
              <td align="left" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                 <tr style="border-collapse:collapse;"> 
                  <td width="596" valign="top" align="center" style="padding:0;Margin:0;"> 
                   <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="Margin:0;padding-left:5px;padding-top:10px;padding-bottom:10px;padding-right:10px;"><img class="adapt-img" src="images/56201580852517217.png" alt style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" width="173"></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table></td> 
             </tr> 
           </table></td> 
         </tr> 
       </table> 
       <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;"> 
         <tr style="border-collapse:collapse;"> 
          <td align="center" style="padding:0;Margin:0;"> 
           <table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#F6F6F6;border-left:2px solid #042239;border-right:2px solid #042239;border-bottom:2px solid #042239;"> 
             <tr style="border-collapse:collapse;"> 
              <td align="left" style="padding:0;Margin:0;"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                 <tr style="border-collapse:collapse;"> 
                  <td width="596" valign="top" align="center" style="padding:0;Margin:0;"> 
                   <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;"> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" bgcolor="transparent" style="padding:0;Margin:0;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:verdana, geneva, sans-serif;line-height:21px;color:#333333;">&nbsp;__________________________________________________________________<br><br><span style="font-size:15px;"><strong>&nbsp; Hi daniel,</strong></span><br><br>&nbsp; Someone add you and sent you message&nbsp; to your account<br>&nbsp; please click the link below to see the message.<br><br><br></p></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:25px;"><span class="es-button-border" style="border-style:solid;border-color:#DBD4CE #DBD4CE #333333 #DBD4CE;background:#081877;border-width:1px 1px 2px 1px;display:inline-block;border-radius:0px;width:auto;border-bottom-width:1px;"><a href="https://myinice.com/index.html" class="es-button" target="_blank" style="mso-style-priority:100 !important;text-decoration:underline;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:16px;color:#EFEFEF;border-style:solid;border-color:#081877;border-width:10px 20px;display:inline-block;background:#081877;border-radius:0px;font-weight:normal;font-style:normal;line-height:19px;width:auto;text-align:center;">Click Here</a></span></td> 
                     </tr> 
                     <tr style="border-collapse:collapse;"> 
                      <td align="left" style="padding:0;Margin:0;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:verdana, geneva, sans-serif;line-height:21px;color:#333333;"><br><br><br>&nbsp; Thanks,<br>&nbsp; book Team<br><br><br>&nbsp;__________________________________________________________________<br><br><strong><span style="color:#D3D3D3;font-size:12px;">&nbsp; &nbsp;</span><span style="color:#808080;font-size:12px;">This message sent to you from feca books<br>&nbsp; &nbsp;the place to buy your next book</span></strong><br><br></p></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table></td> 
             </tr> 
           </table></td> 
         </tr> 
       </table></td> 
     </tr> 
   </table> 
  </div>  
 </body>
</html>
Igor F.
  • 2,649
  • 2
  • 31
  • 39
Itsab
  • 1
  • You most likely need to embed the image instead of using it directly. – Rimble Feb 10 '20 at 12:11
  • If you are going to link to an image URL you need to use the whole URL that links it to the server. so you need something like: http://www.yoururl.com/img/yourimage.jpg - else it wont be able to find the image – Andrew Feb 10 '20 at 12:59
  • thank you very much about all yours help do you know how i can embed small pictures to the Email Template? – Itsab Feb 11 '20 at 12:22

1 Answers1

1

This is a (spam)security issue - and is wanted and expected behavior.

Good email clients prevent external data to be loaded on default. The user has to click the "load images" button to be able to view them.

Background:

The sender does not know if an email has been opened by the reciever. By clicking the "load images" button a request is made on the server from the sender to recieve the images. At the same time the sender does exactly know that the email adress is actively maintained.

That perhaps does not sound very important, but that exploid has been used massively by spammers. They just sent mails to every possible adress and waited for the people to open their mails and load the images. That gave them the proof that the mailadress is in use and they could sell the mail-adress to other spammers.

If you ever loaded images from a spam mail, you will very likely had a non-usable mail-account after a couple of weeks because of massive spam.

This is the short answer. If requested i can go into more detail.

Jonathan Pauw
  • 334
  • 3
  • 7
  • thank you very much about all yours help do you know how i can embed small pictures to the Email Template? – Itsab Feb 11 '20 at 12:19
  • @Itsab here is a nice discussion about using data urls in emails: https://stackoverflow.com/questions/9110091/base64-encoded-images-in-email-signatures – Jonathan Pauw Feb 11 '20 at 12:49