Zoomed image not full resolution.

[Dragomir-Ivanov]

Zoomed image is not the original(full resolution) image, but the same image provided for the current view port size.
Using this config:

{
              resolve: `gatsby-remark-images`,
              options: {
                maxWidth: 960,
                withWebp: false,
                linkImagesToOriginal: false,
              },

Zoomed image is stretched and still 960px width, event if the screen is wider.
I guess the most correct behavior is to use the original(full resolution) image.

[joyfulelement]

This is a primary road block for me as well to adopt this plug-in for gatsby.

According to the https://github.com/francoischalifour/medium-zoom#features medium-zoom seems to support the loading of HD image? I wonder if this is due to the way the image is selected from the srcset="..." attribute of <img> tag?

e.g.

<span class="gatsby-resp-image-wrapper" ...>
  <span class="gatsby-resp-image-background-image" ...></span>
  <img
    class="gatsby-resp-image-image medium-zoom-image"
    src="..."
    srcset="
      /static/84160956ebc5081b3b4b302aa7fdfeba/e1ae0/test.jpg  225w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/b7f58/test.jpg  450w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/062c0/test.jpg  900w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/4e52c/test.jpg 1350w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/490e5/test.jpg 1600w <---- should load this image on hi-res screen
    "
    ...
  />
</span>

[Dragomir-Ivanov]

This is a primary road block for me as well to adopt this plug-in for gatsby.

According to the https://github.com/francoischalifour/medium-zoom#features medium-zoom seems to support the loading of HD image? I wonder if this is due to the way the image is selected from the srcset="..." attribute of <img> tag?

e.g.

<span class="gatsby-resp-image-wrapper" ...>
  <span class="gatsby-resp-image-background-image" ...></span>
  <img
    class="gatsby-resp-image-image medium-zoom-image"
    src="..."
    srcset="
      /static/84160956ebc5081b3b4b302aa7fdfeba/e1ae0/test.jpg  225w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/b7f58/test.jpg  450w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/062c0/test.jpg  900w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/4e52c/test.jpg 1350w,
      /static/84160956ebc5081b3b4b302aa7fdfeba/490e5/test.jpg 1600w <---- should load this image on hi-res screen
    "
    ...
  />
</span>

medium-zoom supports data-zoom-src attribute that is used for the zoomed image. However with gatsby-image-sharp it is not mandatory that original size image will be present in the srcset, if maxWidth is set to lower resolution or left undefined.
The only way I see it, is that we need to enable linkImagesToOriginal: true, then gatsby-remark-images-medium-zoom will need to find the a tag with original image. Obtain its href and use if for zoomed image, and alongside disable/remove the a tag.

@JaeYeopHan ^