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);

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: one month 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

Test name	Executions per second
Image	3246318.0 Ops/sec
ImageBitmap	246508.3 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.

Related benchmarks:

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

Jump to the latest result

Image

ImageBitmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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