CODEWITHSUNDEEP
htmlemailoutlook
Austin Berenyi
Austin Berenyi

Reputation: 1053

Image in HTML email signature varies in size

In the email signature I'm making for my company I have an embedded image on the left. When I preview the code in Chrome or my IDE the image is sized properly taking up the same height as the three lines of evenly-spaced text to its right. However, when others in my company receive emails from me, sometimes the image is significantly taller than the lines of text next to it. How do I ensure that my image stays a consistent size across devices and email clients?

    <html>
    <STYLE>A {text-decoration: none;} </STYLE><body>
        <table data-mysignature-date="2019-09-17T19:52:14.752Z" data-mysignature-is-paid="0" width="500" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td>
                    <table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td
                               valign="center" width="0" style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" width="100" style="width:67px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
                            </td>
    
                            <td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
                                <table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:90%;color: #000001;">
                                    <tr>
                                        <td>
                                            <div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
                                                [COMPANY NAME]
                                            </div>
                                        </td>
                                    </tr>
    
                                    <tr>
                                        <td style="padding: 0px 0;">
                                            <div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
                                                <b> Austin Berenyi </b>
                                                <span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
                                                <span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Graphic Designer</i> </span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><a href="mailto:[email protected]" target="_blank" style="font-family:Helvetica, Geneva, sans-serif;color: #54565A;"><i>[email protected]</i></a></span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
    </html>

Upvotes: 0

Views: 290

Answers (1)

cccn
cccn

Reputation: 949

It may sounds naive, but just try to specify height of your img:

<img alt="TETON Sports" style="width:67px; height: 48px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">

In addition try to always set font-size of text (px or em) and try to avoid these values as percents.

Upvotes: 1

Related Questions