Benchmark: createImageBitmap using Blob vs image element

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);
});

const imageBlobLoaded = fetch('https://placekitten.com/1280/720').then(res => res.blob())

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_createImageBitmapWithImg() {
  const source = await imageLoaded;
  const bitmap = await window.createImageBitmap(
    source,
    source.width,
    source.height,
    0,
    0
  );

  return bitmap;
}

// case 2: use canvas to crop and resize
async function case2_createImageBitmapWithBlob() {
  const source = await imageBlobLoaded;
  const bitmap = await window.createImageBitmap(
    source,
    source.width,
    source.height,
    0,
    0
  );

  return bitmap;
}

Tests:

Create ImageBitmap with Img element
case1_createImageBitmapWithImg() .then(bitmap => bitmap.close());
Create ImageBitmap with Blob
case2_createImageBitmapWithBlob() .then(bitmap => bitmap.close());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create ImageBitmap with Img element
Create ImageBitmap with Blob

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark that tests two approaches to create an `ImageBitmap` object:

1. **Create ImageBitmap with Img element (case1_createImageBitmapWithImg)**: This approach uses an `<img>` element as the source image.
2. **Create ImageBitmap with Blob (case2_createImageBitmapWithBlob)**: This approach uses a blob loaded from a URL.

**Options Compared**

The benchmark compares the performance of two options:

* Using an `<img>` element as the source image (`case1_createImageBitmapWithImg`)
* Using a blob loaded from a URL (`case2_createImageBitmapWithBlob`)

**Pros and Cons of Each Approach**

1. **Create ImageBitmap with Img Element (case1_createImageBitmapWithImg)**:
	* Pros: Easier to set up, as it only requires loading an image URL.
	* Cons: May be slower due to the additional overhead of parsing the HTML image element, especially in older browsers or those with poor performance.
2. **Create ImageBitmap with Blob (case2_createImageBitmapWithBlob)**:
	* Pros: Can potentially be faster, as it avoids the overhead of parsing an `<img>` element and directly uses the blob data.
	* Cons: Requires loading a URL to fetch the blob, which may add latency.

**Library Used**

In both cases, the benchmark uses the `fetch` API to load the blob from a URL. The `fetch` API is a modern JavaScript library that allows for making HTTP requests and working with response data in a more convenient way.

**Special JS Feature or Syntax**

The benchmark does not explicitly use any special JavaScript features or syntax beyond what's considered standard (ES6+). However, it relies on the `async/await` syntax to write asynchronous code in a synchronous-looking manner.

**Other Considerations**

When writing microbenchmarks like this one, consider the following:

* Use a consistent naming convention and formatting throughout the benchmark.
* Keep the benchmark simple and focused on the specific question being asked (in this case, comparing two approaches).
* Consider adding additional test cases to cover edge cases or different scenarios.

**Alternatives**

If you were to rewrite this benchmark using other alternatives, here are some options:

* **Use a pre-loaded image**: Instead of loading an `<img>` element from a URL, consider pre-loading the image data directly into memory.
* **Use Web Workers**: Consider using Web Workers to run the benchmark in parallel, which can help improve performance by utilizing multiple CPU cores.
* **Optimize for specific browsers or platforms**: Depending on your target audience, you might want to optimize the benchmark for specific browsers or platforms.

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/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Browser/OS: Chrome 113 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Create ImageBitmap with Img element	2451916.5 Ops/sec
Create ImageBitmap with Blob	1893041.2 Ops/sec

Related benchmarks:

createImageBitmap using Blob vs image element (version: 0)

Comparing performance of: Create ImageBitmap with Img element vs Create ImageBitmap with Blob

Created: one year ago by: Guest

Jump to the latest result

Create ImageBitmap with Img element

Create ImageBitmap with Blob

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):