responsive gallery, <a> <img> tags

hi

i have a gallery that 1st loads thumbs from <img> and within here there is a srcset. They are transformed correctly according to browser width and i use this url transform for all images in the srcset replacing 256 up to larger sizes:

/f_auto/q_auto/c_scale,w_256(etc…)/

<div class="grid-item item animated-fast" data-animate-effect="fadeIn">
<a href="full-size-popup.jpg" data-track-content class="image-popup" title="description">
<div class="img-wrap">
<img
sizes="(min-width: 50em) 50em, 100vw"
srcset="https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_256/docs/house.jpg 256w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_512/docs/house.jpg 512w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_768/docs/house.jpg 768w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_1024/docs/house.jpg 1024w,
https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_1280/docs/house.jpg 1280w"
src="https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/c_scale,w_512/docs/house.jpg"
alt="Responsive house" />
</div>
<div class="text-wrap">
<div class="text-inner popup">
<div>
<h2>description</h2>
</div>
</div>
</div>
</a>
</div>

When clicking on a thumb for enlargement, what URL and transform do i need for full-size-popup.jpg in <a href= ?

i don't want an additional wasted request when clicking on the thumb for enlargement and i can't find much on scrset with an a href - the resultant pop-up should be sized appropriately too.

or is there a better way than using the img srcset, like using shrinkwrap.js or client-hints?

thanks