I thought that CSS @media query will work with pinch-zoom on iOS devices this way - user zoom an image and since the "area" become larger @media "replace" this image with larger(hq) one if it is present in a code (spoiler: I was wrong).
So, I start implementing it, code example:
<picture>
<source media="(max-width: 300px) and (orientation: portrait)" srcset="/image_1_1.png 1x, /image_1_2.png 2x, image_1_3.png 3x" />
<source media="(max-width: 500px) and (orientation: landscape)" srcset="/image_2_1.png 1x, /image_2_2.png 2x, image_2_3.png 3x" />
</picture>
I have a hi-res images on my site, and I simply cover all main screen size same way as in example above to reduce the load on devices with smaller screen, but when I tried to zoom in on it on iOS device nothing is happened, the image is just became lower in quality, no large one is replacing this smaller one.
I want to reduce the load time and bandwidth on devices which has no need in HQ graphics on page load, but if users want to take a closer look on images (zoom) they be provided with HQ copy of zoomed image.
How it can be done? (iOS compatible, pure CSS only)
//Yes, I saw other topics on this subject and in some of them I noticed that @media rules have to be applied automatically when zoom event occurs, but as I explained above, not in my case (addressing possible duplicate question mark).