In this article, I'll look at one technique that take advantage of supported CSS properties like background-image. iPhone and Android mail clients supports solid CSS properties and it's possible to display retina images.
The technique
Some Android and iPhone clients supports media queries. One of the benefits is that you can use it to replace the original image for another which is use as a background-image.
It's common to resize images using width:100%;. However, I recommend to create an unique image for mobile people.
For example:
//HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cell">
<img src="images/image.png" border="0" width="600" />
</td>
</tr>
</table>//CSS
@media only screen and (max-device-width: 480px) {
.cell {
background-image: url(images/header-2x.png) !important;
width: 325px !important;
height: 115px !important;
}
.cell img {
display: none;
}
}
Resizing for fluid layouts
The code above is good enough but static sizes are not a good practice. Android devices have different sizes and we need a fluid email layout, setting static widths break this point.
To cover and fix the corner case, we can use background-size: cover;
@media only screen and (max-device-width: 480px) {
.cell {
background-image: url(images/header-2x.png) !important;
background-size: cover;
}
.cell img {
display: none;
}
}