My site load a big image slowly: https://tikex-dev.com

This is the image: /young-people-dancing-tango-studio.jpg

The challange is, that <img> is created by parallax.js on client side. url is passed as a custom html tag with data-image-src

<section
    className="section-image light ken-burn-center"
    data-parallax="scroll"
    data-image-src="/young-people-dancing-tango-studio.jpg"
    style={{ background: 'transparent' }}
>

then here the js creates the <img>:

(this.$slider = t('<img />').prependTo(this.$mirror))
            : ((this.$slider = a.prependTo(this.$mirror)), (n = !0)),
            this.$mirror
                .addClass('parallax-mirror')
                .css({
                    visibility: 'hidden',
                    zIndex: this.zIndex,
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    overflow: 'hidden',
                })
                .attr('data-source-id', this.$element.attr('id'))

What if image is big? Shall I modify parallax.js, and create a <Image instead of an <img>? It would not do the server side rendering for different dimensions of the image, right?

What approch exist to speed up loading this big image and use it as a background image in a parallax effect?

Shall I convert manually a 'normal' size image, instead of the 15MB?