Mi sitio carga una imagen grande lentamente: https://tikex-dev.com

Esta es la imagen: /young-people-dancing-tango-studio.jpg

El desafío es que <img> es creado por parallax.js en el lado del cliente. url se pasa como una etiqueta html personalizada con 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' }} >

entonces aquí el js crea el <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'))

¿Qué pasa si la imagen es grande? ¿Debería modificar parallax.js y crear una <Image en lugar de una <img> ? No haría la representación del lado del servidor para diferentes dimensiones de la imagen, ¿verdad?

¿Qué enfoque existe para acelerar la carga de esta imagen grande y usarla como imagen de fondo en un efecto de paralaje?

¿Debo convertir manualmente una imagen de tamaño 'normal', en lugar de 15 MB?