What you could try is using the NodeChange event to update the HTML automatically in a custom TinyMCE plugin. The event triggers every time a node is updated, including when an image is added or dragged and dropped. 

Below is a snippet I quickly threw together. I did some testing with it and it seems to work. It check if the node is an image element and it then adds picture and source elements. However it does not check for existing elements so it will keep adding them every time the NodeChange event is triggered — so that will need to be fixed.

tinymce.PluginManager.add('customplugin', function(ed, url) {
    ed.on('NodeChange',
        function(e) {
            if (e.element.tagName === "IMG") {
                var sourceElement = document.createElement("source");

                sourceElement.setAttribute("src", e.element.currentSrc);

                $(e.element).wrap("<picture></picture>");

                e.element.parentElement.appendChild(sourceElement);
            }
        });
});

Hi Ynze,

This is what I needed. Thank very much!

Now I have to work out how to strip out the modifications made by being in edit mode!

Surjit