Not ignoring you @mmistakes, I had a look at the mv-gallery, way more than I needed but it pointed me in a different direction, so thx for that link.
I got something working today. The solution is not a universal solution as breakpoints will differ from site to site.
1> The Thumbnail
This is the image on the screen that is clicked to set off the lightbox. It can be either a single image or a picture element, either way the img has a "tlclb" class attached. No surrounding anchor tag is needed and it will handle retina screens and update the modal image if the browser is resized.
2> Page Content
All of the page content is wrapped in a wrapper div.
3> The Modal
This consists of a picture element in a div.
4> How it works
When you click on a thumbnail the JS extacts the root name of the image from the src or srcset, for example:
<img class="tlclbp" sizes="200px" srcset="img/mypic-thumbnail.jpg 200w, img/mypic-thumbnail-hd.jpg 400w" alt="some alt text">
The root name mypic is extracted.
Next the modal is created, as I mentioned it uses a picture element, I use JS replace to inject the root name in the appropriate spots. For example, one line of the template might be:
<source sizes="1200px" srcset="/img/%name%-lg.jpg 1200w, /img/%name%-lg-hd.jpg 2400w" media="(min-width: 1200px)">
All occurences of %name% are replaced with the root name, mypic.
Then the modal is attached to the DOM and event handlers are then added.
All very quick & dirty stuff, but it gets the job done
Ooops.. almost forgot the link... lightbox