'Outlook HTML signature not loading images

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:[email protected]" 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:

enter image description here

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

Any help would be great. Thanks in advance.

htmloutlookhtml-email


Solution 1:[1]

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.

Solution 2:[2]

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 .

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eugene Astafiev
Solution 2 Dmitry Streblechenko

Related Questions