HTML email template i am sending to the Yahoo client does not have CSS applied to the <img> elements:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.image1 {
width: 100px;
height: 100px;
border-radius: 50%;
}
.image2 {
width: 100px;
height: 50;
margin: 0 auto;
}
.container {
background: red;
}
</style>
</head>
<body>
<img src="someimage1.jpg" class="image1" />
<div class="container">
<img src="someimage2.jpg" class="image2" />
</div>
</body>
</html>
For the Yahoo client, img elements need to have id attributes with CSS that we want to apply.
Solution:
I added same id names as the class and just added in the CSS that same CSS properties apply to them.
NOTE:
I left classes present, just to be sure if some other client messes with class on some other elements:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.image1,
#image1 {
width: 100px;
height: 100px;
border-radius: 50%;
}
.image2,
#image2 {
width: 100px;
height: 50;
margin: 0 auto;
}
.container {
background: red;
}
</style>
</head>
<body>
<img src="someimage1.jpg" class="image1" id="image1" />
<div class="container">
<img src="someimage2.jpg" class="image2" id="image2" />
</div>
</body>
</html>
Elaboration
The issue was, that Yahoo client strips CSS that are referred in the image1 and image2 classes for <img> elements. Not sure why, but this only happens for this img tag.
Most of the email clients transfer embedded CSS into inline, and for Yahoo, it seems they are not transferring onto <img> elements.