Improve @jquash/avif decode speed about jsquash HOT 6 OPEN

Thanks @talhaozdemir! I think I might need a little more information:

• How are you decoding images? Would it be possible to provide a minimal code sample in a GitHub repo or CodeSandbox link?

• Is this specifically about the @jsquash/avif package?

• when I use an AVIF supported browser, speed is about 200ms - 300ms

  Is this the browser's native image decoding speed? If so, I would anticipate it to be faster as it's likely using an optimized binary for your OS without the overhead of WASM and JS.

from jsquash.

hi, thanks for reply, here is what I tried;

import * as avif from "@jsquash/avif";
.
.
.

const buffer = base64ToArrayBuffer(imageFile);
let imgData = await avif.decode(buffer);
var base64 = imageDataToBase64(imgData);
image.onload = function () {
 
callback();
};
image.src = base64;

imageFile is an base64 avif file

and some functions for above code;

function base64ToArrayBuffer(base64) {
  base64 = base64.replace(/^data:image\/(png|jpeg|jpg|avif);base64,/, "");
  var binaryString = atob(base64);
  var bytes = new Uint8Array(binaryString.length);
  for (var i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

function imageDataToBase64(imageData) {
  const canvas = document.createElement("canvas");
  canvas.width = imageData.width;
  canvas.height = imageData.height;

  const ctx = canvas.getContext("2d");
  ctx.putImageData(imageData, 0, 0);

  return canvas.toDataURL();
}

and yes it is browser's native decoding speed

from jsquash.

Thanks for the extra context! That makes it very clear. Yeah... I am not sure if we can compete with the browser's own decoder.

There are some optimizations that could be made to help improve the speed of this project's AVIF decoder like

• Upgrading to a newer lib/avif version
• Testing if SIMD compilation is available and if it improves the speed
• Testing if parallelization improves the speed

I don't have the expertise or time to explore that right now, but I would consider a pull request if someone is interested.

If you're after speed in the browser, I recommend sticking with the Canvas API or seeing if there's a more optimized AVIF wasm library out there.

from jsquash.

Thank you for the suggestions; I don't have much technical knowledge in these areas either. These suggestions are sufficient, you can close this issue if you want.

from jsquash.

Looks like there is an existing PR upstream for upgrading to a newer avif version. When I find time I'll see if we can pull this in.

GoogleChromeLabs/squoosh#1381

from jsquash.

Awesome news! Thanks for your support.

from jsquash.