Can someone please help me in order to stop overflowing the images when the email has embed image of Base64 format. I am successfully able to display the image but the attribute of width and height is ignored and original image size is shown in the email.
In web, the template is all working fine but not in desktop client. Attached is the dummy template of the email which is not respecting the image height and width when used in Base64 format.
This is the HTML using in the send email action of the power automate:
<div style="width:80px;height:80px;overflow:hidden"><img width="60" height="60" style="width: 60px;height: 60px;overflow:hidden" src="data:image/png;base64,<base64 image>">
</div>
In Web:
In Desktop Client Outlook:
Thanks
We are using different versions of the Outlook 365 client.
This is my Outlook version 64-bit v16.0.14228.xxx
This is your version 32-bit 16.0.12527.xxx
Does Outlook 365 still use Word to render HTML? Earlier version did use Word to render HTML emails.
See also: Outlook Rendering Issues and How to Solve Them in Wired Plus | Wired Plus
Ellis
Hi @ekarim2020 ,
Many thanks for your effort but I am afraid it is not working on my Desktop client. It may be the version difference of outlook (as mentioned in Office365) that may be causing this issue. My outlook has this version shown below:
Also my very simple flow is shown below but this is also ignoring the height and width. The variable is having the correct base64 encoded image:
Output from above flow action which is not 50px in size:
Here is the result of testing using the Outlook Desktop client - with an embedded image in the email:
The Compose Body code was updated by adding height dimensions:
<td><img alt="" style="display:block; width:120px;height:120px" width="120" height="120" src="@{outputs('img')}"></td>
Here is the results where the height property is not specified in the <img> tag:
I used https://www.base64-image.de/ to convert the image to base64.
Ellis
For the the newsletter I was using embedded images.
Is there anything you can extract from the following sample code using a linked imaged (a test with an embedded image will follow in the next post) - which you can easily reproduce. I have also linked to a video and article below. May be a combination of the sample, video and article you can resolve your issue:
outputs('Compose_HTML_formatting') outputs('Compose_Body')
Compose HTML formatting:
<style>
table {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
table-layout: auto;
}
table td, table th {
border: 1px solid #AAAAAA;
padding: 10px;
}
table tbody td {
font-size: 13px;
}
table thead {
background: #1C6EA4;
border-bottom: 2px solid #444444;
}
table thead th {
font-size: 15px;
font-weight: bold;
text-align: left;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
border-left: none;
}
</style>
Compose Body:
<table class="blueTable" style="border-collapse: collapse;border-collapse: collapse;border-collapse:collapse; border-spacing:0; width:558px; table-layout:fixed">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<div class="links"><a href="#">«</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">»</a></div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><img <img alt="" style="display:block; width:120px" width="120" src="https://images.freeimages.com/images/large-previews/4dc/street-1366583.jpg"></td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
</tbody>
</table>
See also: Video - Power Automate flow HTML Table Formatting in Email | Flows & SharePoint#
The video mentions the following article: Power Automate HTML Table Styling which formats a table similar to your own:
Hope this helps.
Ellis
Hi @ekarim2020 ,
Thank you so much for the time to look into this issue. I abstracted all the CSS snippets that you shared and used it under my template but still with no success :(. Please also note what I have observed here is that when the image is in URL format then the width and height are working fine but if you are embedding image inline using base64 then width and height are ignored.
It has always been the case that the Outlook Desktop client renders HTML slightly differently to a web client:
Not being very familiar with HTML and CSS, I used SharePoint's Email a news digest as a template for the above, then I modified it. It was a lot of work for me. The code for the image placement:
<tbody>
<tr style="font-size: 0px;">
<td style="width:220px; padding-top:20px; padding-bottom:20px; vertical-align:top" width="220" valign="top">
<!--This is image for the news item-->
<img alt="" style="display:block; width:220px" width="220" src="@{variables('varNewsItemImage')}">
</td>
The context:
<!--This is the start of the news item 1-->
<table
style="border-collapse: collapse;border-collapse: collapse;border-collapse:collapse; border-spacing:0; width:558px; table-layout:fixed"
width="558" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr style="font-size: 0px;">
<td style="width:220px; padding-top:20px; padding-bottom:20px; vertical-align:top" width="220" valign="top">
<!--This is image for the news item-->
<img alt="" style="display:block; width:220px" width="220" src="@{variables('varNewsItemImage')}">
</td>
<td style="width:318px; vertical-align:top; padding-top:20px; padding-left:20px; padding-bottom:20px"
width="318" valign="top">
<div style="font-size:17px; color:#333333; line-height:20px; margin-bottom:10px">
<!--This is link to the news item-->
<a href="@{items('Apply_to_each_news_item')['{Link}']}" style="text-decoration:none; color:#0e0d0d"
id="OWAde91a5ae-e3bd-f175-d1a6-c57a59b34990"
class="OWAAutoLink">@{items('Apply_to_each_news_item')['Title']}</a>
<!--This is the news item Header-->
</div>
<div
style="color:rgb(102,102,102); font-weight:400; font-size:14px; margin-bottom:12px; font-family:'Segoe UI',Tahoma,Arial,sans-serif,serif,EmojiFont; word-break:break-word">
<!--This is the news item text -->
@{items('Apply_to_each_news_item')['Description']}
</div>
<div style="font-size:11px; line-height:13.5px; color:#767676">
Date: @{variables('varNewsItemDate')} Modified:
@{variables('varNewsItemModified')} </div>
</td>
</tr>
<!--This is the divider between news items-->
<tr style="font-size: 0px;">
<td colspan="2" style="border-top:1px solid #D6D6D6" height="1">
</td>
</tbody>
</table> <!-- end of news item 1-->
Hope this helps.
Ellis
Michael E. Gernaey
497
Super User 2025 Season 2
David_MA
436
Super User 2025 Season 2
Riyaz_riz11
244
Super User 2025 Season 2