Fixing Low Quality Wix Gallery Images

My brother has a website (https://spencerbeals.com, go buy some art!) which uses Wix. There's a product page view where you can see multiple images of a given piece and click to zoom in, but the gallery images are somehow lower resolution than the non-zoomed version, which is a pretty bad user experience. I couldn't find anyway to change this in the tool (or even any forums with people asking about this) but luckily we can fix it with Javascript.

Here's an example of the difference in the Red Wolf Wix Product Page (you may have to click to expand, and especially focus on the quality of the lizard being eaten):

Before After

How to Fix

With MutationObserver we can listen for when the gallery images are added, and when their src is changed. In both cases we can check the URL, which is by default something like https://static.wixstatic.com/media/021ae6_09e29dda26ae4a8796aac32bc2cc206a~mv2.jpg/v1/fill/w_448,h_560,al_c,q_85,usm_0.66_1.00_0.01/021ae6_09e29dda26ae4a8796aac32bc2cc206a~mv2.jpg. The bit that we really care about here is the bolded w_447,h_560 bit, which corresponds to the dimensions. Wix gracefully handled arbitrary dimensions here, which we can use to our advantage to force these images to have at least a height of 1000px with the following script.

<script>
// Helper function to make sure that images are at least 1000 pixels high
const MIN_HEIGHT = 1000;
function scaleImage(url) {
  return url.replace(/w_(\d+),h_(\d+)/, (match, width, height) => {
    let newWidth = parseInt(width);
    let newHeight = parseInt(height);
    if (newHeight < MIN_HEIGHT) {
      newWidth = Math.round(newWidth / newHeight * MIN_HEIGHT);
      newHeight = MIN_HEIGHT;
    }
    return `w_${newWidth},h_${newHeight}`;
  });
}

function findGalleryNode(node) {
  // Check for the node itself
  if (node.localName == 'img' && 'data-hook' in node.attributes && node.attributes['data-hook'].nodeValue === 'modal-gallery-media-node') {
    return node;
  }
  // Recursively check the children
  for (var i = 0; i < node.childNodes.length; i++) {
    const possibility = findGalleryNode(node.childNodes[i]);
    if (possibility) {
      return possibility;
    }
  }
  return null;
}

// Listen for new body elements
const imageCreatedObserver = new MutationObserver(function(mutationsList) {
  mutationsList.forEach(mutation => {
    // Check for added nodes
    mutation.addedNodes.forEach(node => {
      const relevantImg = findGalleryNode(node);
      if (!relevantImg) {
        return;
      }
      // Set a new src
      relevantImg.setAttribute('src', scaleImage(relevantImg.getAttribute('src')));

      // Listen for src changes
      const imgSrcChanged = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
            // Turn off the observer while we change to avoid infinite recursion
            imgSrcChanged.disconnect();
            relevantImg.setAttribute('src', scaleImage(relevantImg.getAttribute('src')));
            imgSrcChanged.observe(relevantImg, { attributes: true, attributeFilter: ['src'] });
          }
        });
      });

      imgSrcChanged.observe(relevantImg, { attributes: true, attributeFilter: ['src'] });
    });
  });
});

imageCreatedObserver.observe(document.body, { childList: true, subtree: true });
</script>

Then all we have to do to inject it is go to the Wix dashboard under Settings > Custom Code, and add a section to Body - End. We can choose to only apply it to the Product Page and to make it essential, so it's immediately inlined, and now images will always be a higher quality.