Just a quick post, a way of changing images without much hassle.
This uses a CSS pseudo elements. We hide the desktop image and simply use the a:after pseudo element within the media queries.
Stick this into your media queries (Also have a method of hiding images on mobile)
#swap a:after {
content: url('mobile image link');
}
Add this to your HTML.
<span id="swap"><a href="##" style="text-decoration:none !important;"><img alt="alt tag" border="0" src="desktop image link" style="display: block" class="hide"></a></span>
I’ve only briefly tested this on iPhone, let me know how you all get on!