Outlook HTML signature not loading images

Question

I Have coded an HTML email signature for outlook, it loads alright in my Compose window, but once sent, images won't load on recipient mail. I've been strugggling to show background images and I've finally accomplished to show them, in fact, they're the only ones showing, but the inserted images won't show.

Here's my code:

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
             <!-- BEGIN : CTA / Background image -->
             <!--[if gte mso 9]>
<img src="https://sigurat.mx/firmas/bg_01.jpg" alt="" border="0" width="550" height="200" style="display:block;" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:550; height:200; position:absolute; top:0; left:0; border: 0; z-index: 2">
<v:fill color="#ffffff" opacity="0%" style="z-index: 1;" />
<div>

<![endif]-->
<!-- Containing Table START-->
            <table border="0" cellspacing="0" cellpadding="0" style="background-image: url(https://sigurat.mx/firmas/bg_01.jpg); background-repeat: no-repeat; background-position: left bottom;">

                
               <tbody>
                
                    
                    <tr>
                        <td width="170px" style="text-align: center;">
                            <img src="https://sigurat.mx/firmas/qr-01.png" width="150" height="150" alt=""/>
                        </td>
                        <td width="220px" style="margin-left: 20px;">
                            <p style="font-family: 'Open Sans', sans-serif; font-weight: 700; color:#65656A; font-size: 14px; ">
                                Name<br><span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#96C93D; font-size: 12px;">Directora y Agente Titular</span>
                            </p>
                            <p>&nbsp; </p>
                            <p style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#65656A; font-size: 12px;">
                                <img src="https://sigurat.mx/firmas/tel-01.png" width="12" height="12" alt=""/> &nbsp; (55) <span style="font-weight: 700;">123405789</span><br>
                                <img src="https://sigurat.mx/firmas/cel-01.png" width="12" height="12" alt=""/> &nbsp; (55) <span style="font-weight: 700;">1234 5678</span><br>
                                <a href="mailto:lorena@sigurat.mx" style="text-decoration: none; color:#65656A;"><img src="https://sigurat.mx/firmas/mail-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> &nbsp; mail</span>@mail.mx</a><br>
                                <a href="http://www.websitet.mx" style="text-decoration: none; color:#65656A;"><img src="https://sigurat.mx/firmas/web-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> &nbsp; sigurat</span>.mx</a></p></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td></td>
                    </tr>
                    
                </tbody>

            </table>
  
           
           
            <table border="0" cellspacing="0" cellpadding="0">
               


            <tbody>
                    <tr style="padding-top:6px;">
                        <td style="text-align:left;">
                            
                          <a href="https://www.youtube.com/channel/UCsct4-vLXeYlq6r8WMAA-rg"><img src="https://sigurat.mx/firmas/yt.png" width="12" height="12" alt=""/></a>&nbsp;<a href="https://www.facebook.com/SiguratSegurosYFianzas"><img src="https://sigurat.mx/firmas/fb.png" width="12" height="12" alt=""/></a>&nbsp;<a href="https://www.linkedin.com/company/siguratmx/?originalSubdomain=mx"><img src="https://sigurat.mx/firmas/in.png" width="12" height="12" alt=""/></a>  &nbsp;<span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#FFFFFF; font-size: 12px;">Escanea el QR y guarda mis datos en tu celular.</span>
                        </td>
                        <td>
                            
                            
                        </td>
                    </tr>
                </tbody>
            </table>
                      <!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->

            <!-- END : CTA / Background image -->

    </body>
</html>

And this is how it renders on recipients mail once sent:

Background images load perfectly, but all other inserted images are bieng blocked by Microsoft.

Any help would be great. Thanks in advance.

score 0 · Answer 1 · answered May 24 '22 at 08:37

0

The background-image attribute is not supported in Word. It acts as an email editor so you need to follow the rules applied in Word. You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

Ideally, I'd recommend attaching images as embedded images and then using them in the message body using the cid prefix. That is because Outlook may block internet based images (referenced by URLs) by default. For example, you could attach an images and use the following construction in the message to refer to the attached image:

<IMG src="cid:Communications.jpg" width=200>

See Embedding image in email with VBA for more information.

answered May 24 '22 at 08:37

Eugene Astafiev

47,483
3
24
45

Thanks! Is there any solution to make outlook show url images? As I explained, I managed to show the background images, but all other images inside an tag are really the issue because they're being blocked – Manuel Cárdenas Pérez May 24 '22 at 13:09
Outlook may block internet based images automatically. The best way is to use embedded images instead. – Eugene Astafiev May 24 '22 at 13:17
Note there are considerable deficiencies of CID images, as outlined here: https://mailtrap.io/blog/embedding-images-in-html-email-have-the-rules-changed/. You can do two images if you must, one for Outlook - use `style="display:none;mso-hide:none;"`, and one `` for everyone else: just add `style="mso-hide:all"` so that Outlook doesn't display it (that's the one using https). – Nathan May 25 '22 at 05:01

score 0 · Answer 2 · answered May 24 '22 at 15:46

Outlook blocks all external images by default. The recipient (but not the sender) can enable external images on the per-message basis, but if your message is going out to the recipients outside of your control, the only way to show an image is to add its as an attachment and refer to it by its content id in the <img> tags in the HTML body. See Including Pictures in an Outlook Email .

Outlook HTML signature not loading images

2 Answers2