Search code examples
cssimageemailresponsive-designresponsive-emails

Responsive images in email

I'm wanting to serve an image to mobile devices and different image to desktop devices in an email. display: none works well for everything but Outlook and Gmail. The image has a button on it, but on mobile, the text in the button gets too small. Any ideas?

Solution

  • What I ended up doing:

    <head>
<style type="text/css">
    @media only screen and (max-width: 480px){
       img {content: url(http://images4.fanpop.com/image/photos/17000000/Nature-s-jewerly-love-you-natures-seasons-17036569-500-500.jpg)}
    }
</style>
<body>
    <img img src="http://data.whicdn.com/images/28179582/Nature-Photography-Rain-520x520_large.jpg" width="500" height="500">
</body>

    iPhone and Android can handle content, which for me are the only mobile devices I have to worry about. They serve the image that I want, and the other desktop devices stay with the original image.