Benchmark: createImageBitmap using Blob vs image element

HTML Preparation code:

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

AخA
 
<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;
}

​x
 
// 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 Chromeasync 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 resizeasync 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());
case1_createImageBitmapWithImg()
.then(bitmap => bitmap.close());
Create ImageBitmap with Blob
case2_createImageBitmapWithBlob() .then(bitmap => bitmap.close());
case2_createImageBitmapWithBlob()
.then(bitmap => bitmap.close());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

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/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

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

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:

Create ImageBitmap with Img element (case1_createImageBitmapWithImg): This approach uses an <img> element as the source image.
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

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.
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.

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.

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 6 months ago):