Integrating Markdown and SrcSet - html

Question

I like markdown. I use it in combination with Template Toolkit, and basically I don't have to write any html. My webpages are static, having only the js snippet that Google analytics uses. I would mostly like to keep it that way. I have zero javascript experience.
I can do some degree of simple page layout using a handful of classes applied to DIVs.
So this
<DIV class=picr3>
![Shelterbelt-12][2]
Planting a shelterbelt, or any tree project...
***
</DIV>
[2]: /Images/Shelterbelt/Shelterbelt-12.jpg
is all the html I need to use to have an image sized to width 30% of the Content div floated to the right. The system isn't perfect, but it resizes reasonably well, and since the page is static it caches well, and is fast to deliver.
More important to me: I can spend time writing content, and very little tweaking layout.
The problem: If I serve an nice desktop image to a mobile phone, download times are high. If I serve an image of reduced resolution to make phone access quick, it looks like crap on a desktop.
In Html we now have the element, combined with the srcset and size attributes. This turns what used to be a simple img tag into this:
<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">
<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">
<img src="stick-original.png" alt="Human">
</picture>
At this point, I'm looking at having to roll my own solution much along this line:
Replace <DIV> with <div> On my implementation of Markdown, being between lower case tags means that the content of that tag is not Markdown processed.
Come up with a standard naming convention, say whateverimage-L.jpg for the large version, -M.jpg for the medium version and -S. jpg for the small version.
Pre process the resulting markdown files to generate the full element from the embedded markdown. I think this is within my limited perl programming capabilities.
Gotchas?
This wheel has been invented already?
Better ways to approach this? Should I bite the bullet and do this with a javascript snippet?
Some other solution I've missing in my wandering of 'a maze of twisty passages, all different' that is the internet?
Note to moderators: This may be a better fit for webmasters.SE. Seemed it was more program-y. If you feel it should be over there, please move it.