Change newsletter header image on mobile device - html

Question

I've done a newsletter with mjml framework.
I have to change the header image on mobile devices, but how?
The framework is very helpful for doing bulletproof newletters, but doesn't support different images for different viewport.
This is the header code:
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="900" align="center" style="width:900px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:900px;background:#29c5f8;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#29c5f8;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:0px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:900px;">
<![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
<tbody>
<tr>
<td style="width:900px;">
<a href="http://www.link.com" target="_blank">
<img alt="" title="" height="auto" src="http://www.link.com/img/img-desktop.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="900">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
Thanks for your support

Answer 1

I would say there are three options here:
Have the two images in your HTML and display only the right one depending on the device used, using media queries (relying especially on the display property, plus conditional comments for Outlook)
Wrap your desktop image tag img in a span. On mobile, you'll use media queries to hide this desktop image and add a background image to the span tag with the background-url property, which will "replace" the desktop image you're hiding
Have only one image tag in your HTML, pointing to an image hosted on a server and send back the right image depending on the device on which the email is opened (using the User-Agent)
Unfortunately, there are drawbacks with all of those:
While displaying mobile content on mobile devices only is totally feasible, hiding content is way trickier and might not work, so you could end up with both images displayed. Also, media queries are not supported everywhere.
Background images are not supported by all email clients, so it won't work everywhere. Again, media queries are not supported everywhere.
You need to work on a script. However, this shouldn't be too hard using a package such as https://www.npmjs.com/package/ua-parser
In terms of compatibility, the third option is definitely the best one. Is it an option for you?

Answer 2

MJML documentation allows for changing an image based on the viewport for mj-images using the attribute srcset.
srcset url & width enables to set a different image source based on the viewport
however in my tests i've been unable to get them to work.
I'd suggest using media queries and a css-class.