Base64 as background-image source causes stutter and it is slow

I’m making a request to the server and getting the image url string, inside the component I convert the url to a Base64 string. And here is the code to do so ” I copied it from an answer and can’t find it on my history to attribute the author”.

getBase64Image(img: HTMLImageElement) {
    // We create a HTML canvas object that will create a 2d image
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    // This will draw image    
    ctx.drawImage(img, 0, 0);
    // Convert the drawn image to Data URL
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image/(png|jpg);base64,/, "");
  }


  getBase64ImageFromURL(url: string) {
    return new Observable((observer: Observer<string>) => {
      // create an image object
      let img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = url;
      if (!img.complete) {
        // This will call another method that will create image from url
        img.onload = () => {
          observer.next(this.getBase64Image(img));
          observer.complete();
        };
        img.onerror = (err) => {
          observer.error(err);
        };
      } else {
        observer.next(this.getBase64Image(img));
        observer.complete();
      }
    });
  }

in the html page

<div style="background-image:url({{item.imageKey}}); ">
</div>

the output of the image is around 800KB
I then store the base64 string in the indexeddb table, and later retrieving the string from the table to display it. My point of doing all of these hassle is to make the website load faster on later visits. But it is not what I expected since it really takes a few seconds to draw the images. For some pages that contain less images it is reasonable but it gets ugly on other pages. Is there a more efficient way to do so?

Answer

My point of doing all of these hassle is to make the website load faster on later visits.

Why not just set a cache header when you serve the image, and let the browser do the work of saving the cached image for you?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since

Advertisement

Answer