Outlook Signature Template Issues - Images resize themselves

Steve Tinsley
Steve Tinsley used Ask the Experts™
on
Hi,

I am creating an email signature in HTML so I can share with my colleagues. I want them to be able to copy and paste into Outlook and change name.
The issues:

1. images dont copy into Mac Outlook
2. If I convert images to Base64, when you paste into outlook they resize themselves to massive.
3. If I resize the images to 30x30 in photoshop, they dont look that crisp.
4. Adding CSS width height doesn't seem to change anything

Code:

<table width="320" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td width="100%" style="font-size: 15px;line-height: 1.4;color:#37393a">
                <strong>Name Name</strong> <br/>
                <span style="color:#006eb6;">Position Position</span> <br/>
                <span style="color:#006eb6;">&#8212;</span>
                <br/><br/>
            </td>
        </tr>
        <tr>
            <td style="font-size: 15px;font-weight: bold;line-height: 1.4;color:#37393a">
                <span style="color:#006eb6;">T &nbsp;</span> +44 (0)00 <br/>
                <span style="color:#006eb6;;">D &nbsp;</span> +44 (0)00
                <br/><br/>
            </td>
        </tr>
        <tr>
            <td style="font-size: 15px;font-weight: bold;line-height: 1.4;color:#37393a">
                <a href="" style="color:#006eb6;text-decoration:none;"><span style="color:#006eb6;text-decoration:none;">aaa.com</span></a>
                <br/><br/>
            </td>
        </tr>

        <tr>
            <td style="font-size: 15px;line-height: 1.4;color:#37393a">
                <strong>aaa</strong> </br>
                bbb <br/>
                ccc <br/>
                ddd <br/>
                eee
                <br><br>
            </td>
        </tr>
        <tr>
            <td style="padding-top: 15px;">
                <table cellspacing="0" cellpadding="0" border="0">
                    <tr>
                            <td style="display:inline-block;vertical-align: top;"><a style="text-decoration:none;" href=""><img style="display: inline;" width="30" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAADTUlEQVRIib2XWUhUURjHf7NcR8cZTW0xw4gMjSx6yIR6qgjBHqIV6q0oSSIiqB5aXoLoqYIgou25DYOIFmgnKCNbQCSqh8pJLFPSnNHGcZb45t7RcbzeeyTxD+fhnPOd8z/f+ZbzHQd776EAH7AOWA5UAaVALpAAuoCPwDvgLvBKZUM74mJgP7ANmKqyIdAInAGuWwk5LeZ2AB+AA+MgFSwDrgFPgYrxEl8CLgMF4yDMxAqgCahVJb4J7PwPwnT4AbHlhswJd0b/opnQCDgcEItD7wBE45BI6C6W44b8bIgnzFaJMksMBxxFvBmosyWNxCA8yIqqEpbPLcCrucjNcvHiazcNjW36AcxxB5gLhNOJfYZdrSGahgc5sWUhh2rmjRBdVOKn4fEXK+KZwHHDWYdsLCGTb0scjFBVOX0UafIycNguN3iKUxpnAXtUVonGq8qLhrpi3osvAzS3BfnWEwZflsouu4BjQlxjG6cph+ofJBobdp6+SJT6K83woQtK/DDDp8tZY0uKeLWKpprmZNrsfGb4PcPnAarLCvnl9xByOekKDuiHtMZ8oFyIK22JQxHKy4t4vm8Zudpw6Hs9bh7ursbtcnLj/Q+2n3uth5Q9lgrxHBWNczQXhRkeK7rlZetjHpdDj2s1lLqV0qLbSV8kRqAnTGGOhs/jSg6Lc3WGIsRI0BT4k5RTRN6YQTcCPg+fO/tYfPQJB9dWcLimLDnbH4lSe6GJQHuQoNg2z6NKnIzjbhWpWDROT0eIzr7I0LBcbOvvv3S1hxgIR8GprHGvSLbaikkEOR3g1ZK2TmHIxrmafs0J0zxthu9C3KIqPYF4I8SPJpn0kzQhfmDUTZOFqxjOJd5yVpU0PTE57bOUGS6Q9jqdEk+zXRJPkOcZjkBvlgu3OJ3542+G08BP0t7jkFEEWFaG4tW3WzoYjCWIxuPJpCIJhGyldCCER1KdzPL2vPFsmUO0E6JkLDv0+5qSA5K/7bWWevxtqpN51HrjidxoulQ292p6yxy3xvp0UsaoMjcZpe1EQEy4BriVuddYOa7OaPbpdGw8M673vpmEVXIVrRcAJ8cZ5/KF2QqsNJKFKVQ/bVKYp3/aZhmVadS4FSGQmllKWPtPG/APJ+frCp/czTYAAAAASUVORK5CYII=" /></a>&nbsp;&nbsp;&nbsp;</td>
                            <td style="display:inline-block;vertical-align: top"><a style="text-decoration:none;" href=""><img style="display: inline;" width="30" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAEVUlEQVRIia2XbWxTZRTHf723ve3artuUsRe3JWQiBpapmUqYmghRMIYX3ReNGkWUiH4gUWI0fDBGP/gREjWLJDqNJIrRmaAoRgMJw0FwiwoyBs4t23CwdSt7a7f17ZrT3s7eee+24v7JbZs+5zn/e87zf87zHAe7v2MRCADbgHqgDqgEfIAODAMXgHbgCHBmMQ4XIr4J2AM8Ddy4GIfAKWA/8MV8Rso8YzuB88DLOZAK1gGHgGPAylyJm4ADQEEOhHOxHmgDNi2W+DCw/X8QZkO0cRTYshDxh1ZGSwAJpsaO+Clgx3VzRBMwGU1/W0MU75xLLCn5wGTucEAiCdNx0b41MjYjEXAplJXng1OB0BREYjA6DbEEKCkHVcBbGT+ZN3gF8JqcJ5J481w48iAsjgPu9K6dfTHSTiMxXtq6iufrq1hZ7KVzKEzjiV6aT13mofuq6BqK0HZxGHwumf86sA8Iqqx9UjP2XJ6JeHyGDbWlHN5Zx/eXRgh1XwOvBqpisnmtYTX7GlZTFnCjORXKCzxsqy3hmXWV1FcXcaIrRHcwgi7ZccgHY0CLYsj9hv+kMqFT7Ne4udhL66v38Oj6FTA2DcEwzMRTkZZVFfD25lssV6GsyINPUyn0aTiS2ani8cwaP2g5U1XoHJxM/Sz2uWh+8S6+2lPPxrUVuDUn/D1OodeFS7ETABz8ZYDPj/WQUB2gztqJulfIGt9hOcuv0dYRpPFkH7vurUotacPtpamn8+ok7d0hdM2JBGPHfbBtIK0DzQO6Keq7hbjCctZUjPtrS6gs9DA5HSffM7sTuLXUn3oWQkLIXOpcUkGleMu3nJ/UCUZibK5ZviCBFQbGplOiQlOthgP2h0S+m/Odw+z+soOwfVGwxU+XRpgZmoSsTGVDiCdsR7wu3j3axfstvYRnciNvbO1PL751aOPy92XLIT2tbAWdIp+Gz22ZMks0nxvkdPsAFHjMRedf9Avxr7YenA6SDgd7my/w9dlBItEE8aS1pwyGwlF2ffJ7unSqtit5RkZ+tBySLTIVT5XO4YvDNLx5nOc+O8eo1GAbjEzF2LT/NMGrE0a0li/5B9AjK/8DEDJVL5mQhJrqImqKfbg1lfrKAA+sWc4yv2bJ+nN3iO0f/0aXlNZlvtSusMEhjEMiCrwHvGGyiydx67CltoQn6sptozz51zWaWvv4qKUvXUqF1DpSDOUcIOuyJ8fiFdMJJamWtMZ1Ssv83FYRYFWJnwKPSjSh0xua4uyVCTp6RtPnsKRWBDi/Bt4B9jLnlikXgU9NZkKeNF5ASl9CT0cj/8tWEfHkuUBT7NSbjX6gWg5Tsm8EUlqBDcCzpsQIiZyluOxdLkwqeDhDisWda4dxP1pqbDXUjB0xRsfQtETE48BG4Ju5A3Y7XCJ/wbgtXC+OA3fa1Yn5OgmR/RrjjjSSA7m0MI8ZevnTziiXpu0Roz2RKKRpk62Xado6jabt20U1bcA/IVJcpdWvbSsAAAAASUVORK5CYII=" /></a>&nbsp;&nbsp;&nbsp;</td>
                            <td style="display:inline-block;vertical-align: top"><a style="text-decoration:none;" href=""><img style="display: inline;" width="30" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAD/UlEQVRIibWXW2gcZRTHfzOz16TdTVp1sYmNBgKxWK1RFMWAELGKVFKoVmmfxMcQiy0oCGoVfKp4qT77UKxGH/pQWq3iUx8qFtJCBGsUMaFtkpqmm202u5u5yZnL7sxmk8ym9P+yO9+cc/7fd75zG4Xh00RAHHgO2Ak8DHQBbZ5aHpgALgBngB8BfS2TaxG3AIeAA0B7lB0CN4BPgSPA4kpC6ioG9gDXgMNNkOLJHvZ0X2qW+HPge6C1CcJ6iO53wNFGL2MNFr8BXkFRwLIhX4KKAekEZJNyOWA3tYEh4A7g1eCixuP7gs9fAK85/8R4SeeFxzoYfrGXomUxcbkACa3ZkwseAO4EqgEVDK69wLdV0eslBp++lxOv91WXnvjkHL9enIa21HrIcTwJIwTuWALi45DIksGOzkxo6ZF7srBkrpcUj6M9SPwG0BES2Zjk2PkrTBUqzuOlmQVGRqdgQ+JWiDs8LsfVYukvYGtIRFNgvkJMUch0Zsj/m8dSFWhPwfVF0C1XriUOMRVuLtV0JQA3JCGluQEaxiTQI1G9axmpoGySbk+z/9EtxDWF5EM5jp2/yuxciUO7t9G9uYVETOXU2DQnLkxxYM82Bno2Y1gWpy/N8tUv/2AUDMgk68mFa5cQ9zd0im4S1xIcGewlk3Kz7qc/Z5mdvslQ/1a6NqWdtftzrbw50M1T3bUaM7g9x94dd/PMZ+egqENLrD4F++WO+4gIW7xrWORLRlXhyfvaQqQ+Bno28fbOHlhYAu9WAuhTvYIfCSvVjQ/P/E32rZ9559R4aH33gzk3JpZnQpca6DLrwm+T87x7fIzCH//x0cjvzrOP3lwrGckCc9mRM6s1iUi4mi+DpsKWjUiZHZ8pRtJTvX4aHTbYAZ9LZDupJ2uqgib/10ZB9Zp4dKgKsUbGbTd/I7pwQuRGo5I6B1XcenGLGBUTZ6PacPgUhUSs1qFiUs1UpXpkVY3k6rNi66RXxsJQ3LucWXBr9dyijm650Tl+bYF8SWdRN5m8UfJ2pTg6c0W3dFYMy9G1vSsIQLhO+m3xfeC9er8qKmRTcTRVwbJtCmUD07SdgPIPZto2umlXdVqTGqm4ho2N7HO+rLuFp0b+gXD5xFJ6xkIdSgRFoay7tVYmknQMVBXKRq3+SqDJcOAbrphOua1GWiru/rriV4DtMhD6o49MhgdDg4DvonQ8fAXiu2SDKcRPMdlE/ZRSS7+DHlco+ke8Ie924ag/fdQT4zXpr28D8XFgOLjQKCP3rzSSrhNfAvvqVVcqBbK7l4Fohbcxip6NoUZvV6tBMtDf5aWZExARIbKSnjnPRkM089H2PPCsNzh0AlnvnfTBy4GPth/W/GgD/gfE7i1InxTRRAAAAABJRU5ErkJggg==" /></a>&nbsp;&nbsp;&nbsp;</td>
                            <td style="display:inline-block;vertical-align: top"><a style="text-decoration:none;" href=""><img style="display: inline;" width="30" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAFbElEQVRIia2XaWxUVRTHf2/mzUxnptu0pQQtpVAjiE0wyGIRhEAR0RANKkENixELUlxQEiN80EQwQjSuEQJCKuAKEo1YEO0HKmCNUhEiSKTQlkJhKN2msy/P3Pdep7N0Shv9JzOZucv5n3PuueecK/FcFQOADNwHzAHuBEYCdn2bB7gAHAcOAQeBwI1E3ohYCH8BeEonGwiagB3AO0BXqvWGfgQ9AvwFrB8EqUAh8BpwGlg4WGKh7R5gxCAIE3Ez8Dnw4UCJK3X3/l+oAD5NlCUn/H8XWBI3IgEK4A9DKAwRRR+MhQIGCWQDWOTePb14XD/vZ/oifgh4Pm65UYLuALiDSA4r+TlWLGaj6qYeuYIjIvQKhHF2+VFaPWAzQbpZVzKKFcBh4AtiotoGNAOO3kOQoMOHJcPMpvljWVpaQKYl0UHxcAXC7Dx2kTX7zuBz+SDbmkjerZ99V4+k1XGkwgx3ALvNTO0r0ygZlsHhM60cbWjHE1YIRRRVLwEhV5YNhHwhSobaqZhRRNltQ5jw+mG6hbfspli3pwMvA+uExWbd2iFx6jvdbH52MiumDGfe5t/Z/1M9mI2aJ/wh8Ia0dVZZG3NYGeWwMrowk6qVk/i4tpmn36uFfDsJ6BBWi+OalUTqDyPn2CgvHU7NP23srz4Pw9I1IYJkaDrj7ili3PQi9TeuAN+smkz9m2XUNXVReayZZXcVYMqza0rGI1tkQeHq+5MOKxTGkWtTOWrq28Bk0CK21cv8qYV8sLCEm7LT1KWXO/0s317H24fqcXmC+Dp8nGpxqXOOrDScLV1gSWKYKyyelDQcUbCZtSvuDUY0K697mXd3IV+vmIBkkFi1+yQVu06iSArfvViqxsWi9TV0tnmwphnVvTZZAkVJEg+Ml/vOTlL0pkbERn8IU346u568g8brXm5dV03gmlud33qkkbMbZvF9xSRyzrURcnYTEMpGb3vinVcx3BBTZeLQo6gkqWYzpiibrDSZNw6dI9DqhsIs9RNq9bDhh3NkWIyUjHKAJ6jtScohcbAaUqmUCknCUnqzfwhid18roloLoVYTfzd04PKFWDu7GDnXBk2dcLETY46NtXOKcQfCnGloV7NWT87oxyKvIG5MHleiVhiEBhaZoMvPosoTFOXZOL9pNssfHEP5vDHUbyzjliF2FleewN/pV9fKenZRYr4TcEkE12/AxLhxg4RHDxCruErChDwb3x5pYoEk8f5jJWxZPE6dv9rlZ+HW4+yraQDhCaebNFm7EZ6Q0uu6eNQJ4gPAyrhh2Uh7p0+1etqoHBBKhCOQa2XPz43sOXWV8SOy1KV/NHaidPggx6YpGAgztVjLvkKGmgOScVAQ/whcB3Kj8xYjIaebbb80Uz6lgLkzR3JAZC+TUatYV1zUXWjTvCgqkSgeTjcEw9w7cySzRuex49dLBEX0J6dMUR6rBLFf7xJe7Y0s1LL20mcnmVbsoGrlRKqnF3G0oQNPKEJYiS8SRknCJhuYMiKLspJ8zjrdrN79p1Yak2vzFhHQPWUxQy8UmbHnLMqiNdPCWw+PZUlpAXaTsS+3RSHiYmftRdbsPY1buNmRVBa9ellsj+0yFwBfJgaZ2gh4ghhzrORnpWGWDepwbIJRjzYUwdnpI9zm1dyfYYZwUkQvBnaR0IF8BcyIbU9UiaKe2kyE/SFaRPJXUrQ+QgMRSHk2bTqZdHsPaSIxenRn6T1SVKYKEUDJVaZvJF/dvcCyOGf2sfEJ4KMBUgwE24BHE9el6qsrdKtb/gPhNWApUN7XZH8vCdGM366/JC4PgvAKsFHf+0mqRQN9tFmBB/Q2STzaRA0XYwI+/b0kHm3VIjno3WRqAP8CHjnYhzevvPYAAAAASUVORK5CYII=" /></a>&nbsp;&nbsp;&nbsp;</td>
                    </tr>
                </table>

            </td>
        </tr>
    </tbody>
</table>

Open in new window



Any suggestions?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
I have not seen this work for Mac Outlook that way.

Try using Word to create and layout your template for your Mac Outlook signatures.
Once you have it all how you like, you can export as HTML and send it to your users via email.

As long as the images are located on an accessible website, they should resolve as expected and stay within your layout parameters.

Your users should be able to copy and paste the signature from email and paste into a new signature, changing names and email within the Outlook signature editor.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial