Benchmark: Image vs ImageBitmap with context2d

Script Preparation code:

var img = new Image();
var imageBitmap;
var doneLoading = false;
let canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
let canvas2 = document.createElement('canvas');
canvas2.width = 640;
canvas2.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');

img.addEventListener('load', function() {
  Promise.all([
    createImageBitmap(img)
  ]).then(function(images) {
  imageBitmap = images[0];
  doneLoading = true;
}, false);
});

img.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';

Tests:

Image
if (doneLoading) ctx.drawImage(img,0,0);
ImageBitmap
if (doneLoading) ctx2.drawImage(imageBitmap,0,0);

Historical Performance Data aggregated from 95 community runs

Desktop Results:

Chrome 66 runs

Image

3.1M/s

ImageBitmap

198K/s

Fastest: Image (15.6x faster)

View exact numbers

✓ Image: 3,089,285 ops/sec
• ImageBitmap: 197,738 ops/sec

Firefox 7 runs

ImageBitmap

788K/s

Image

364K/s

Fastest: ImageBitmap (2.2x faster)

View exact numbers

✓ ImageBitmap: 787,692 ops/sec
• Image: 364,285 ops/sec

Safari 5 runs

Image

2.8M/s

ImageBitmap

372K/s

Fastest: Image (7.6x faster)

View exact numbers

✓ Image: 2,820,864 ops/sec
• ImageBitmap: 372,064 ops/sec

Mobile Results:

Chrome 12 runs

Image

1.4M/s

ImageBitmap

83K/s

Fastest: Image (16.7x faster)

View exact numbers

✓ Image: 1,392,210 ops/sec
• ImageBitmap: 83,386 ops/sec

Safari 5 runs

Image

4.0M/s

ImageBitmap

113K/s

Fastest: Image (35.8x faster)

View exact numbers

✓ Image: 4,028,301 ops/sec
• ImageBitmap: 112,536 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
ImageBitmap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Linux

View result in a separate tab

Image

3.2M/s

ImageBitmap

247K/s

View exact numbers

Test name	Executions per second
✓ Image	3,246,318 Ops/sec
ImageBitmap	246,508 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing two approaches for rendering images on a web page:

1. **Drawing an image using a raw `Image` object**: This approach involves creating an instance of the `Image` object, setting its `src` attribute to an image URL, and then drawing it onto a canvas element.
2. **Using an `ImageBitmap` to render an image**: This approach uses the `createImageBitmap()` method to convert the raw image data into a bitmap format, which can be used by the canvas element.

**Options Compared**

The two options being compared are:

* Drawing the raw `Image` object using `ctx.drawImage()`.
* Using the `ImageBitmap` with `ctx2.drawImage()`.

**Pros and Cons of Each Approach**

1. **Drawing an image using a raw `Image` object**:
	* Pros: Typically faster, as it doesn't require creating a new bitmap format.
	* Cons: Can be slower if the image is very large or complex.
	* Considerations: Modern browsers have optimized image rendering, making this approach suitable for most use cases. However, in some edge cases (e.g., extremely large images), this approach might not be the fastest.
2. **Using an `ImageBitmap` to render an image**:
	* Pros: Can provide better performance and efficiency for certain types of images (e.g., pixel art or graphics with few colors).
	* Cons: Requires creating a new bitmap format, which can add overhead.
	* Considerations: This approach is particularly useful when working with graphics that benefit from the `ImageBitmap` format. However, it might not be as efficient for very large or complex images.

**Library and Purpose**

The benchmark uses the following library:

* `createImageBitmap()`: A Web API method created by Mozilla to convert raw image data into a bitmap format, which can be used by canvas elements.
	+ Purpose: Provide an alternative way to render images on web pages, especially for graphics that benefit from the `ImageBitmap` format.

**Special JS Feature or Syntax**

The benchmark uses the following special feature:

* `Promise.all()`: A built-in JavaScript function used to execute multiple asynchronous operations concurrently and wait for their completion.
	+ Purpose: Efficiently handle the loading of the image by executing both the `createImageBitmap()` operation and drawing the raw image using `ctx.drawImage()` simultaneously, ensuring that the benchmark is run only after both operations are complete.

**Other Alternatives**

If you're interested in exploring alternative approaches, consider the following options:

* Using other Web APIs or libraries to optimize image rendering (e.g., WebGL, CanvasRenderingContext2D with specific optimizations).
* Investigating specialized graphics or pixel art techniques that take advantage of the `ImageBitmap` format.
* Examining modern JavaScript frameworks and libraries that provide optimized image loading and rendering mechanisms.

Image vs ImageBitmap with context2d (version: 0)

Testing draw calls using a raw Image versus an ImageBitmap

Comparing performance of: `Image vs ImageBitmap`

Created: 7 years ago by: Guest

Go to the latest result

Image

ImageBitmap

Historical Performance Data aggregated from 95 community runs

Desktop Results:

Chrome 66 runs

Firefox 7 runs

Safari 5 runs

Mobile Results:

Chrome 12 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Image vs ImageBitmap with context2d (version: 0)

Testing draw calls using a raw Image versus an ImageBitmap

Comparing performance of: Image vs ImageBitmap

Created: 7 years ago by: Guest

Go to the latest result

Image

ImageBitmap

Historical Performance Data aggregated from 95 community runs

Desktop Results:

Chrome 66 runs

Firefox 7 runs

Safari 5 runs

Mobile Results:

Chrome 12 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Image vs ImageBitmap`