Large Media Reload on zoom

Hi!

I am making use of Large Media, primarily to present thumbnails and full size images - this works excellent to improve loading times of my pages.

However, the natural way to zoom into an image is to pinch zoom on a mobile device. It would be fantastic to be able to pinch zoom into an image, and that would reload a higher resolution image. This wpuld also be great as a better solution to, from start, select a better image that is sized according to the current users screen. I.e. load a “retina” image on devices with high pixel density from the beginning.

See one solution here: Responsive Image Resolution - Samples

If this would be possible to add this as an open source javascript feature to large media, it would be fantastic!

Hey @mberglundmx

I can’t help but think this is already possible. Looking at the Using scrset with FSI Server example which is

<img
  src="serverpath?type=image&source=sample%2Fimage.jpg&width=200"
  sizes="200px"
  srcset="serverpath?type=image&source=sample%2Fimage.jpg&width=200 200w,
    serverpath?type=image&source=sample%2Fimage.jpg&source=sample%2Fimage.jpg&width=800 800w,
    serverpath?type=image&source=sample%2Fimage.jpg6width=1600 1600w"
  alt=""
  width="200"
/>

if feel this is no different than using Transform Images (test using the gallery)

<img
  src="/images/apple.jpg?nf_resize=fit&w=200&h=200"
  sizes="200px"
  srcset="/images/apple.jpg?nf_resize=fit&w=200&h=200 200w,
  /images/apple.jpg?nf_resize=fit&w=800&h=800 800w,
  /images/apple.jpg?nf_resize=fit&w=1600&h=1600 1600w"
  alt=""
  width="200"
/>

Or am I missing something?

This only sets srcset, which you are correct is easy to do with large media.

I want the image to be reloaded depending on the browsers pixel density. The browser will not reload an image from the srcset if you pinch zoom, to do that you will need to write some JavaScript.

Check here what happens when you pinch zoom

This is something that I’d say you need to manage with JavaScript. Large Media will just “serve” the image that you request. It can’t listen for zoom or any other events. So, adding this as a feature in there won’t be possible in its current stage. However, if you use JavaScript to change image’s source to the higher resolution image, that would work.

In effect, the same thing as using a <picture><img src="" ...> <img src=""...></picture>.

In essence, what the FSI script does is create an element on the page like this which as @hrishikesh says you could manage with some JavaScript.

FSI TouchZoom Code Sample
<fsi_touch_zoom>
  <fsi_touch_zoom_tiles class="root" style="width: 150px; height: 300px;">
    <img
      class="fsi_touch_zoom_background_image"
      src="http://fsi-site.neptunelabs.com/fsi/server?type=image&amp;source=images%2Fsamples%2Ftouchzoom%2FWD1038_left.tif&amp;format=jpeg&amp;width=375&amp;height=750"
      style="width: 150px; height: 300px;">
    <img
      style="width: 75px; height: 100px; top: 0px; left: 0px;"
      width="75"
      height="100" 
      src="http://fsi-site.neptunelabs.com/fsi/server?type=image&amp;source=images%2Fsamples%2Ftouchzoom%2FWD1038_left.tif&amp;format=jpeg&amp;pixelRange=0,0,337,450&amp;referenceWidth=675&amp;referenceHeight=1350"
      class="fadein">
    <img
      style="width: 75px; height: 100px; top: 0px; left: 75px;"
      width="75"
      height="100"
      src="http://fsi-site.neptunelabs.com/fsi/server?type=image&amp;source=images%2Fsamples%2Ftouchzoom%2FWD1038_left.tif&amp;format=jpeg&amp;pixelRange=656,0,657,875&amp;referenceWidth=1313&amp;referenceHeight=2625" class="fadein">
    <img
      style="width: 75px; height: 100px; top: 100px; left: 0px;"
      width="75"
      height="100"
      src="http://fsi-site.neptunelabs.com/fsi/server?type=image&amp;source=images%2Fsamples%2Ftouchzoom%2FWD1038_left.tif&amp;format=jpeg&amp;pixelRange=0,450,337,450&amp;referenceWidth=675&amp;referenceHeight=1350" 
      class="fadein">
    <img
      style="width: 75px; height: 100px; top: 100px; left: 75px;"
      width="75"
      height="100"
      src="http://fsi-site.neptunelabs.com/fsi/server?type=image&amp;source=images%2Fsamples%2Ftouchzoom%2FWD1038_left.tif&amp;format=jpeg&amp;pixelRange=656,875,657,875&amp;referenceWidth=1313&amp;referenceHeight=2625"
      class="fadein">
    <img
      style="width: 75px; height: 100px; top: 200px; left: 0px;"
      width="75"
      height="100"
      src="http://fsi-site.neptunelabs.com/fsi/server?type=image&amp;source=images%2Fsamples%2Ftouchzoom%2FWD1038_left.tif&amp;format=jpeg&amp;pixelRange=0,900,337,450&amp;referenceWidth=675&amp;referenceHeight=1350" 
      class="fadein">
    <img
      style="width: 75px; height: 100px; top: 200px; left: 75px;"
      width="75"
      height="100"
      src="http://fsi-site.neptunelabs.com/fsi/server?type=image&amp;source=images%2Fsamples%2Ftouchzoom%2FWD1038_left.tif&amp;format=jpeg&amp;pixelRange=656,1750,657,875&amp;referenceWidth=1313&amp;referenceHeight=2625"
      class="fadein">
  </fsi_touch_zoom_tiles>
</fsi_touch_zoom>

I agree that this should be managed by JavaScript - but since this is currently not available other than Neptune labs proprietary script, it would be great if this was developed for Netlify large media, for anyone to use with this service.

I don’t have the skills/time to develop this on my own, and I’m pretty sure a lot of users would be interested in this if it existed.

I am hoping Netlify would sponsor this JavaScript development, since they contribute a lot already to the open source community, and this would also drive more people to using their platform!

That’s a good suggestion, but would be far more possible and faster to develop a solution yourself. You can use hammer.js: Pinch recognizer - Hammer.js and detect a pinch and load the higher resolution images from your Large Media instance.

Or you could use something like HTML Canvas to load images: html - How to improve the Canvas image quality when client zooms in the page? - Stack Overflow

1 Like

Thanks for the suggestions, however I don’t think those things would work

Hammer detects pinch zooms - which is not what I’m after, I don’t want to catch that event but still use the browser default behaviour, to zoom the entire page.

The canvas example suggests to pre-load a higher res image, which does not help here.

Sorry if I’m missing something here, my experience in JavaScript is 10-15 years old :wink:

I think the tool needs to listen to events that the viewport has changed?! And calculate the pixel density, and update any visible image if required/possible.

Maybe this is not something Netlify thinks is within what they want to do, and then I will have to get help in implementing this somewhere else. I really do think this would be a fantastic feature.