Improve @jquash/avif decode speed

[talhaozdemir]

Decode speed is about 1200ms - 1500ms, but when I use an AVIF supported browser, speed is about 200ms - 300ms. Is there any way to increase decoding speed?

[jamsinclair]

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.

[talhaozdemir]

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

[jamsinclair]

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.

[talhaozdemir]

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.

[jamsinclair]

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.

https://github.com/GoogleChromeLabs/squoosh/pull/1381

[talhaozdemir]

Awesome news! Thanks for your support.