Share via

Azure Email Service

Ho, Keith D 140 Reputation points
2025-01-03T21:57:54.53+00:00

I'm currently using the Azure Email Communication Service. When I send the email, the image is a different size on a Windows Computer vs a Mac. On the Mac, it is the correct size and small, but on Windows, it is abnormally really big. Is there a way I can get the images to be the same size on both Windows and Mac? 

        message = {
            "senderAddress": "DoNotReply@abcdefghijk.azurecomm.net",
            "recipients": {
                "to": [{"address": recipient_email}]
            },
            "content": {
                "subject": f"ServiceNow Incident {incident_id} Created",
                "html": f"""
				    <html>  
                    <body>  
                        <div>Hi {name},</div>
                        <br>
                        <div>Your ticket has been submitted with the incident id <strong>{incident_id}</strong>.</div>  
                        <br>
                        <div>Had a great time talking!</div>  
                        <div>Your Virtual Assistant</div>  
                        <img src="cid:Hallie" alt="Hallie" style="display: block; margin-top: 20px; width: 300px; height: auto;">    
                    </body>  
                    </html>"""
            },
            "attachments": [
			{
				"name": "Hallie",
                "contentId": "Hallie",
				"contentType": "image/png",
				"contentInBase64": image_base64
			}]
        }
Azure Communication Services
Azure Communication Services
An Azure communication platform for deploying applications across devices and platforms.
959 questions
0 comments
Accepted answer
  1. brtrach-MSFT 17,166 Reputation points Microsoft Employee
    2025-01-04T06:37:40.1633333+00:00

    @Ho, Keith D It sounds like you're experiencing a common issue where different email clients render HTML and CSS differently. This issue is likely with the CSS formatting and not Azure Communication Service. I would however like to make a few suggestions in hopes that it helps you.

    Here are a few suggestions to help ensure your images display consistently across both Windows and Mac:

    1. Use inline CSS styles for your images. This can help ensure that the styles are applied consistently across different email clients.
    2. Explicitly set the width and height attributes in the HTML tag itself.
    3. Sometimes wrapping your image in a table can help maintain consistent rendering.
    4. Ensure that the image DPI (dots per inch) is set correctly. Sometimes high-DPI images can appear larger on certain screens.
    5. Use email testing tools like Litmus or Email on Acid to preview how your email will look across different email clients and devices.

    Here is your sample with a few of these changes implemented to help you get started:

    message = {
    "senderAddress": "DoNotReply@abcdefghijk.azurecomm.net",
    "recipients": {
        "to": [{"address": recipient_email}]
    },
    "content": {
        "subject": f"ServiceNow Incident {incident_id} Created",
        "html": f"""
            <html>  
            <body>  
                <div>Hi {name},</div>
                <br>
                <div>Your ticket has been submitted with the incident id <strong>{incident_id}</strong>.</div>  
                <br>
                <div>Had a great time talking!</div>  
                <div>Your Virtual Assistant</div>  
                <table>
                    <tr>
                        <td>
                            <img src="cid:Hallie" alt="Hallie" style="display: block; margin-top: 20px; width: 300px; height: auto; max-width: 100%;">
                        </td>
                    </tr>
                </table>    
            </body>  
            </html>"""
    },
    "attachments": [
        {
            "name": "Hallie",
            "contentId": "Hallie",
            "contentType": "image/png",
            "contentInBase64": image_base64
        }
    ]
}
    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.