Below is an image from unspash.com of a green lizard on a branch by @rigels. It is available in several sizes. Initially, a 640x427 is loaded and streched into a proportional size space. Depending on whether your device has multi-touch gestrures it should provide you either button-like affordances at the top right to zoom or support "pinch zoom" on the image, not the page. In both versions you should be able to "pan" the image around inside the image canvas.
As one zooms in, it will lazily load an extremely higher resolution version of the image, so that you can see all of the beautiful details...
All of this (save for some messaging) is done off the main thread in a worker via OffscreenCanvas.
While this is naievely implemented, and not really production ready, it's an interesting experiment in the sorts of things you can achieve with OffscreenCanvas and workers, wrapped up in a custom element.
<pan-zoom-canvas>
The <pan-zoom-canvas> code can be included via:
<script src="pan-zoom-canvas.js" type="module"></script>
You use it by wrapping around an image element and (optionally) providing a full-res-src
attribute to load as the user zooms in.
<pan-zoom-img style="touch-action:none;display: block; width: auto;">
<img
crossorigin="Anonymous"
width="640"
height="427"
src="https://cdn.glitch.com/13ec82d2-bbc3-4025-8608-b0d095d98e61%2Frigel-Qx18LzMEAlY-unsplash.jpg?v=1618858087840"
full-res-src="https://cdn.glitch.com/13ec82d2-bbc3-4025-8608-b0d095d98e61%2Frigel-Qx18LzMEAlY-unsplash%20(1).jpg?v=1618858099164"
alt="interesting decorative art by https://unsplash.com/@lavinhha"
/>
</pan-zoom-img>
The image is transferred to a canvas in the ShadowDOM which can be controlled offscreen,
in a worker. The element also exports two named parts a ::part(wrapper) around
it and a ::part(canvas) for the canvas which you can use for special styling.