Benchmark: createImageBitmap resize vs canvas

createImageBitmap resize vs canvas (version: 12)

Firefox currently has a bug where resizeWidth/Height is not properly working and results in the image being squished or squashed. https://bugzilla.mozilla.org/show_bug.cgi?id=1733559 Therefore, compare canvas scaling to ImageBitmap scaling when it works (Chrome), and compared to just creating an ImageBitmap. Relevant: https://www.measurethat.net/Benchmarks/Show/5123/0/bug-with-resizing-imagebitmap-causes-slower-than-expect Setup can be visually inspected at: https://codesandbox.io/s/createimagebitmap-benchmark-setup-jldf3z?file=/src/index.js

Comparing performance of: `Crop and Resize using createImageBitmap, currently bugged in FF 111.0 vs Crop and Resize using Canvas scaling, usually somewhat slow vs No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)`

Created: 3 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<img id="source" src="https://placekitten.com/1280/720" crossorigin="anonymous">

Script Preparation code:

// const sourceImage = new Image();
const sourceImage = document.querySelector('#source');
const imageLoaded = new Promise((resolve, reject) => {
  if (sourceImage.complete) resolve(sourceImage);
  sourceImage.onload = () => resolve(sourceImage);
  sourceImage.onerror = reject;
  // resolve(source1);
});

function scaleSource(sw, sh, dw, dh) {
  const hRatio = dw / sw;
  const vRatio = dh / sh;
  const ratio = Math.max(hRatio, vRatio);
  const x = (sw - dw / ratio) / 2;
  const y = (sh - dh / ratio) / 2;
  return { x, y, w: sw - x * 2, h: sh - y * 2, ratio };
}

const profileWidth = 480;
const profileHeight = 360;

// Remember, all the outputs must be an ImageBitmap to be a fair comparison

// case 1: use createImageBitmap to crop and resize, bugged in firefox but working in Chrome
async function case1_createImageBitmap() {
  const source = await imageLoaded;
  const resize = scaleSource(
    source.width,
    source.height,
    profileWidth,
    profileHeight
  );

  const bitmap = await window.createImageBitmap(
    source,
    resize.x,
    resize.y,
    resize.w,
    resize.h,
    {
      resizeWidth: profileWidth,
      resizeHeight: profileHeight
    }
  );

  return bitmap;
}

// case 2: use canvas to crop and resize
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d", { alpha: false });
async function case2_canvas() {
  const source = await imageLoaded;
  const resize = scaleSource(
    source.width,
    source.height,
    profileWidth,
    profileHeight
  );

  canvas.width = profileWidth;
  canvas.height = profileHeight;

  ctx.drawImage(
    source,
    resize.x,
    resize.y,
    resize.w,
    resize.h,
    0,
    0,
    profileWidth,
    profileHeight
  );

  return await window.createImageBitmap(
    canvas,
    0,
    0,
    profileWidth,
    profileHeight
  );
}

// case 3: no scaling, use createImageBitmap to copy and allow one-off
// transfer to worker (where presumably scaling would occur) without
// requiring new canvas/context creation
async function case3_scaleInWorker() {
  const source = await imageLoaded;
  const bitmap = await window.createImageBitmap(source);
  return bitmap;
}

var holder = [];

Tests:

Crop and Resize using createImageBitmap, currently bugged in FF 111.0
case1_createImageBitmap() .then(bitmap => bitmap.close());
Crop and Resize using Canvas scaling, usually somewhat slow
case2_canvas() .then(bitmap => bitmap.close());
No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)
case3_scaleInWorker() .then(bitmap => bitmap.close());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Crop and Resize using createImageBitmap, currently bugged in FF 111.0
Crop and Resize using Canvas scaling, usually somewhat slow
No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)

6.1M/s

Crop and Resize using createImageBitmap, currently bugged in FF 111.0

5.8M/s

Crop and Resize using Canvas scaling, usually somewhat slow

2.6M/s

View exact numbers

Test name	Executions per second
✓ No cropping or scaling on main thread, assume ImageBitmap will be transferred to worker (note: not actually transferred in this benchmark)	6,123,214 Ops/sec
Crop and Resize using createImageBitmap, currently bugged in FF 111.0	5,782,219 Ops/sec
Crop and Resize using Canvas scaling, usually somewhat slow	2,614,264 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is tested?**

The benchmark tests three approaches to resize an image:

1. **createImageBitmap with scaling**: This approach uses `window.createImageBitmap()` and provides scaling parameters (`resizeWidth` and `resizeHeight`) to rescale the image.
2. **Canvas scaling**: This approach uses HTML5 Canvas to scale the image, and then creates an ImageBitmap from the canvas using `window.createImageBitmap()`.
3. **No scaling (copy only)**: This approach simply copies the original image to a new ImageBitmap without any scaling.

**Options compared**

The benchmark compares the performance of these three approaches:

* **createImageBitmap with scaling**: Can take advantage of browser-specific optimizations, but may be slower due to the need for explicit scaling.
* **Canvas scaling**: May be slower due to the overhead of using Canvas, but can provide more flexibility and control over the resizing process.
* **No scaling (copy only)**: May be faster since it doesn't require any additional processing or scaling.

**Pros and Cons**

* **createImageBitmap with scaling**:
	+ Pros: Can take advantage of browser-specific optimizations.
	+ Cons: Requires explicit scaling, which can add overhead.
* **Canvas scaling**:
	+ Pros: Provides more flexibility and control over the resizing process.
	+ Cons: May be slower due to Canvas overhead.
* **No scaling (copy only)**:
	+ Pros: Can be faster since it doesn't require any additional processing or scaling.
	+ Cons: May not provide optimal results for all use cases.

**Library usage**

The benchmark uses `window.createImageBitmap()`, which is a Web API provided by modern browsers. It allows creating an ImageBitmap from an image, which can then be used in various contexts (e.g., as a pixel buffer or for canvas operations).

**Special JS feature or syntax**

There are no special JavaScript features or syntax mentioned in the benchmark code. The code uses standard JavaScript and HTML5 APIs.

**Other alternatives**

Some alternative approaches to resizing images might include:

* Using image processing libraries like ImageMagick or GraphicsMagick.
* Employing GPU acceleration using WebGL or OpenCL.
* Utilizing WebAssembly for optimized image processing.

However, these alternatives are not explored in the provided benchmark.