Responsive adverts with different sizes from multiple fields?

Sorry, the title's not very descriptive!

I've got a site where we are offering two sizes of advert for each advertiser, one for display on devices above 480px width and one for smaller widths. The ad sizes are different proportions rather than just a different size. The larger ads are a wide letterbox format, but these don't look so good on a smaller device so the smaller ad proportions are deeper for optimum display, on smartphones for example.

Now, I can configure Simpleads to have two different blocks to deliver the different ad sizes, and then set "display:none" in the CSS using the media queries in order to have the correct block display at the right width. Obviously that means both blocks are always loaded but only one is displayed.

I think I could do better using a responsive
tag to include the two sizes of adverts using only one block, and reducing load times.

Unfortunately the Drupal picture module seems to only allow to use different image styles on one single image. I was thinking that it would be possible to add a second image field to the Simple Ad content type, and then create a theme template to format the output of the Simpleads block in order to have two different img src urls inside a
tag.

Looking at the template files that come with Simpleads, in particular the 'simples_img_element.tpl.php' template, I can't immediately see a way of doing this.

Here's the sort of loose coding I would be thinking of to replace the original code in that template file:

<div class="simplead-container image-ad <?php if (isset($css_attributes)): print $css_attributes; endif; ?>">
<picture>
<a href="$ad['destination_url']">
<source srcset="$field_mobile_image_field_url" media="(max-width: 480px)">
<source srcset="$field_ad_image_url" media="(min-width: 481px)">
<img srcset="$field_ad_image">
</a>
</picture>
</div>

Has anyone got any ideas how I might achieve this?