Get a high resolution carousel images in mobile browser

The BigCommerce system detects your browser, if your browser is a mobile browser, they will return a low-resolution image, it's a feature to save website data. But the image is returned is not good, it has too low resolution.  You have 2 options to solve this problem.

#1. Contact to BigCommerce and ask them to return a higher resolution image for mobile devices.

#2. Add the below Javascript to your Footer Script (Admin panel > Storefront > Footer Script)

<script>
    (function () {
        function imbypass(images) {
            if (images.length) {
                for (var i in images) {
                    if (typeof images[i] === 'object') {
                        var image = images[i];
                        var imageLink = image.getAttribute('src');

                        if (image.hasAttribute('data-lazy')) {
                            imageLink = image.getAttribute('data-lazy');
                        }

                        if (image.hasAttribute('data-src')) {
                            imageLink = image.getAttribute('data-src');
                        }

                        var newImageLink = (imageLink.indexOf('?') !== -1) ? imageLink + '&imbypass=on' : imageLink + '?imbypass=on';

                        if (image.hasAttribute('data-lazy')) {
                            image.setAttribute('data-lazy', newImageLink);
                        }

                        if (image.hasAttribute('data-src')) {
                            image.setAttribute('data-src', newImageLink);
                        }

                        if (imageLink === image.getAttribute('src')) {
                            image.setAttribute('src', newImageLink);
                        }
                    }
                }
            }
        }

        imbypass(document.querySelectorAll('.heroCarousel-image'));
    })();
</script>