Image style height and width not taken in outlook mails

HTML attributes vs. CSS properties in outlook

Outlook is notoriously tricky for using both HTML attributes and CSS properties. It tends to prioritize HTML attributes over CSS properties for image dimensions. To overcome this, it's recommended to use both on your img tag. However, avoid specifying these attributes with units (px, em, etc.) as this could clash with Outlook's rendering system.

Inline styles in img tags

To reinforce the concept, inline styles are used alongside HTML attributes as seen in:

<!-- "Hey Outlook, you're not scaling my image. GOT IT?!" -->
<img src="image.jpg" width="200" height="100" style="width:200px;height:100px;">


Outlook conditional CSS

Embrace the use of conditional comments to zero in on Outlook specifically:

<!-- "When life gives you Outlook, increase dimensions by 25%!" -->
<!--[if gte mso 9]>
<img src="image.jpg" width="200" height="100" style="width:250px;height:125px;">
<![endif]-->


By beefing up the dimensions by 25%, Outlook's automatic scaling down is counterbalanced, ensuring a crispier and correct display.

Preventing image blurriness in other clients

While we're discussing Outlook, let's also touch on other clients like Windows Live Mail. They can also render images blurry. Defining dimensions in the HTML tag should neuter this issue as it reduces the reliance on the potentially inconsistent CSS.

Eliminating unwanted image borders

To avoid any unexpected and unwanted borders around your images, use the "border:0;" inline style. Especially useful if you're dealing with buttons or other interactive elements where unwanted borders may cause design havoc.

<!-- No border patrol today! -->
<img src="image.jpg" style="border:0">


Importance of email client testing

When it comes to email design, testing your layout in multiple clients isn't just recommended—it's obligatory. Consider using services like Litmus or Email on Acid to see how your images will be rendered in different environments.

Final word on inline styles

Remember, inline styles are the codeword for sizing images in email. They override all others and are only subject to email client's peculiarities. They're the most potent weapon you have to maintain image integrity.