How to display an image at HTML email

Question

I've the image saved at OneDrive, with granted view access to all people having the link, and I'm sending an email as html file, and want to display my image there, so I'm using the below code:

<img src="https://company-my.sharepoint.com/personal/myemail/Documents/public/FLK-LogoMini.png" alt="my logo">

The above is working fine once I'm opening the email at Office 365 web.

The above is not displaying neither at Outlook web, nor at gmail, nor at outlook desktop, nor at mobile apps!

I searched alot, and found a recomendation to use base64, so i converted my image into base64 string using https://www.browserling.com/tools/file-to-base64, then used the image tag as:

<img src="data:image/png;base64,@{variables('image')}/">

The @{variables('image')} is the base64 string, but it is appearing in this format as I'm reading it using power automate flow:

The base64 string image, had been dispaled correctly only at MS oulook desktop up, and not displayed at any web based app or mobile app.

I've 3 questions, hoping to get the support with:

1. Is there a unified way to get the image displayed properly every where, gmail, outlook, outlook app, office 365 outlook, ..

2. If the answer of point 1 is "no", how can I display the image at web based email clients, like gmail?

3. Is there a way to use CSS or JavaScript in the html email, so I can read the time of the client and use the proper way to display the image, something like:

// I tried JS but looks it is not working inside html email!

if (client === outlook_Desktop_app) {
   <img src="data:image/png;base64,@{variables('image')}/">
} else if (client === office365_outlook) {
   <img src="https://company-my.sharepoint.com/personal/myemail/Documents/public/FLK-LogoMini.png">
} else { // i.e. web based like gmail and outlook web
   <img src="xxxx/FLK-LogoMini.png">
}

Answer 1

JavaScript is not working at email client, but conditional CSS can work, so We can use MSO (Microsoft Office) tags to add HTML / CSS anywhere in an email template. This code will be ignored by other email clients. Here’s what it looks like:

<!--[if mso]>
    <table><tr><td>
        /* Outlook-specific HTML content goes here. */
    </td></tr></table>
<![endif]-->

MSO tags can also be used to add styles targeting Outlook (Outlook supports CSS in the ):

<!--[if mso]>
    <style>
        .example-class {
            /* Outlook-specific CSS goes here. */
        }
    </style>
<![endif]-->

Another note is outlook displaying the <div> at 100% width, so at outlook the recomended solution is to use the Ghost tables, The main way we use MSO tags in our emails is to create “ghost tables” so hybrid emails don’t fall apart in Outlook. Hybrid design uses inline-block, max-width, min-width to stack table columns. Outlook doesn’t support these CSS properties, so we use MSO tags to create “ghost tables” that apply a fixed width just for Outlook.

<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="340">
<![endif]-->
    <div style="display:inline-block; width:100%; min-width:200px; max-width:340px;">
        Outlook can’t render the CSS in this DIV but other email clients can,
        so we wrap this in a ghost table that replicates the DIV’s desktop style.
        In this case, a container 340px wide.
    </div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

Credit goes to: https://stackoverflow.design/email/base/mso/