How to optimise and increase loading speed of images downloaded via URL in konva js

Question

I'm using konva 7.0.6 in an angular 12 app. When trying to render a jpg image via a URL, when the image is large around 7MB or greater, the image loading and rendering is taking long. Whereas when opening the image URL in a browser tab it is loading and rendering faster.

I'm using the below code to load the image

     return new Observable((observer) => {
      const img = new Image();
      this.imageObject = img;
      img.crossOrigin = 'anonymous';
      img.src = imageUrl;
      img.onload = (event) => {
        const loadedImage: any = event.currentTarget;
        img.width = loadedImage.width;
        img.height = loadedImage.height;
        observer.next(img);
        observer.complete();
      };
    });

And then creating a konva Image object with the image

     this.imageShape = new konvaImage({
        x: 0,
        y: 0,
        name: 'img',
        image: response,
        draggable: false,
        width: this.imageWidth,
        height: this.imageHeight
      });
      this.imageShape.cache();
      this.layer.add(this.imageShape);

Is there any better method I can use to reduce the load time of the image rendering on the canvas?

Answer 1

I don't think there is much to do from Konva side. It is just rendering that image. And rendering into canvas make take longer then display just image on a new tab.

7MB is HUGE! What size of it? Are you sure all pixels a visible on the screen? Probably you should find a way to use smaller images. Also, you can reduce the size of the image on the client side. The simplest way is to just use caching with low (<1) pixelRatio value:

this.imageShape.cache({ pixelRatio: 0.1 });