title: Email templates: freemarker, spring, outlook and images issue
body: <p>I've been struggling with email templates and images for quite a while now. 
  I've successfully managed to make the images appear in the mail but they do not take the css into account.</p>
  
  <p><strong>Backend/Spring :</strong></p>
  
  <p>This is a simple Spring service used to send mails.</p>
  
  <pre><code>import org.springframework.mail.javamail.JavaMailSender;
  import javax.mail.MessagingException;
  import javax.mail.internet.MimeMessage;
  import freemarker.template.Configuration;
  import freemarker.template.Template;
  import freemarker.template.TemplateException;
  
      private JavaMailSender emailSender;
  
      @Autowired
      private Configuration freemarkerConfig;
  
  public void sendResetPassword(Utilisateur utilisateur, String password) throws MessagingException {
          String title = messageService.getMessage("user.mail.resetpassword.title");
          String titleStrong = messageService.getMessage("user.mail.resetpassword.titleStrong");
          String logoImg = imgPath+"/mail/mail_password.png";
  
          Map&lt;String, Object&gt; templateVars = new HashMap&lt;&gt;();
          templateVars.put("subject", title + " " + titleStrong);
          templateVars.put("title", title);
          templateVars.put("logo",logoImg);
          templateVars.put("titleStrong", titleStrong);
          templateVars.put("password", password);
  
          String sendTo = "";
          for(String recep : mailService.getRecipientsFromString(utilisateur.getEmail())) {sendTo=recep;break;}
  
          this.sendMail("reset_password.html",templateVars,Arrays.asList(logoImg),sendTo,title+" "+titleStrong);
      }
  
      private void sendMail(String tmplName,Map&lt;String,Object&gt; vars,Collection&lt;String&gt; imgs,String recepient,String subject) {
          MimeMessageHelper messageHelper = this.getMailHelper();
  
          try {
              messageHelper.addTo(recepient);
              messageHelper.setSubject(subject);
              messageHelper.setFrom(from);
              messageHelper.setReplyTo(replyTo);
              this.initTemplateForGeneralInfos().entrySet().forEach(e -&gt; vars.put(e.getKey(), e.getValue()));
  
              Template template = freemarkerConfig.getTemplate(tmplName, Locale.FRENCH, "UTF-8");
              String processedTemplate = FreeMarkerTemplateUtils.processTemplateIntoString(template, vars);
              messageHelper.setText(processedTemplate, true);
              globalImgs.forEach(str -&gt; {
                  try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
                      throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
                  }
              });
              imgs.forEach(str -&gt; {
                  try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
                      throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
                  }
              });
  
              messageHelper.addInline("globalLogo.png", new ClassPathResource(imgPath+"/logo/globalLogo.png"));
          } catch (IOException e) {
              throw new IllegalArgumentException("Template " + tmplName + " not found or unreadable", e);
          } catch (TemplateException e) {
              throw new IllegalArgumentException("Error while processing template " + tmplName, e);
          } catch (MessagingException e) {
              throw new IllegalArgumentException(e);
          }
          emailSender.send(messageHelper.getMimeMessage());
      }
  </code></pre>
  
  <p><strong>HTML Template:</strong></p>
  
  <pre><code>&lt;#macro layout subject&gt;
      &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
      &lt;head&gt;
          &lt;title&gt;${subject}&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;meta content="width=device-width"&gt;
          &lt;style type="text/css"&gt;
              /* Fonts and Content */
              body,
              td {
                  font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
                  font-size: 14px;
              }
  
              body {
                  background-color: #F2F2F2;
                  margin: 0;
                  padding: 0;
                  -webkit-text-size-adjust: none;
                  -ms-text-size-adjust: none;
              }
  
              .highlight {
                  color: #58CB7E;
                  font-size: 22px;
              }
  
              .small {
                  color: #9B9B9B;
                  font-size: 12px
              }
  
              @media only screen and (max-width: 480px) {
                  img {
                      height: auto;
                  }
              }
  
              p {
                  padding-bottom: 0.5em;
              }
  
              #body,
              #footer {
                  background-color: white;
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body style="margin: 0px; padding: 0px; -webkit-text-size-adjust: none;"&gt;
          &lt;table style="border-spacing: 0; margin:0 5em"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;img id="logo" src="cid:globalLogo.png" style="display: block; margin: auto; padding: 50px 0;" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td id="header" style="color: white;
      text-align: center;
      background-color: #92D051;
      color: white;
      padding-top: 15px;
      padding-bottom: 35px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      font-size: 22px;"&gt;
                          &lt;img src="cid:${logo}" style="display: block; margin: auto; padding: 30px 0;" /&gt;
                          &lt;span&gt;${title} &lt;b style="text-transform: uppercase;"&gt;${titleStrong}&lt;/b&gt;&lt;/span&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td id="body" style="font-size: 18px; padding: 1em 5em; background-color: white;"&gt;
                          &lt;#nested /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td id="ecos" style="justify-content: space-around; display: flex; padding-bottom: 20px;background-color: white;"&gt;
                          &lt;#list globalImgs as source&gt;
                              &lt;img src="cid:${source}" style="height: 30px; padding: 0 1em;" /&gt;
                          &lt;/#list&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td id="copyright" style="background-color: #273826;
      color: white;
      text-align: center;
      padding: 35px;
      letter-spacing: 1px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;"&gt;Company
                          &amp;sdot; Copyright &amp;copy; ${date?string.yyyy}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  &lt;/#macro&gt;
  </code></pre>
  
  <p>So the problem is that with outlook ,the style doesn't seem to apply to the images. It works great with thunderbird however.
  So I guess Outlook is loading the images after the styles.. ? Do you guys have any information about this and do you have any fix for this issue?</p>
  
  <p>Thank you!</p>