Benchmark: Image vs ImageBitmap+OffscreenCanvas

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');
let offscreen = canvas2.transferControlToOffscreen();
offscreen.width = 640;
offscreen.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = offscreen.getContext('2d');

img.addEventListener('load', function() {
  Promise.all([
    createImageBitmap(img)
  ]).then(function(images) {
  imageBitmap = images[0];
  doneLoading = true;
}, false);
});

img.src = 'https://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';

Tests:

Image
if (doneLoading) ctx.drawImage(img,0,0);
ImageBitmap/Offscreen
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/Offscreen

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Image	265142240.0 Ops/sec
ImageBitmap/Offscreen	276207520.0 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 is being tested, compared, and considered.

**Benchmark Overview**

The test compares two approaches to loading and rendering an image:

1. **Image**: Loading an image using the `Image` object and drawing it directly on a canvas (`ctx`) when it has finished loading.
2. **ImageBitmap+OffscreenCanvas**: Loading an image as an `ImageBitmap`, which is a binary representation of the image, and then drawing it on an off-screen canvas (`offscreen`). The `offscreen` context's 2D rendering context (`ctx2`) is used to draw the image.

**Library Usage**

The test uses the following libraries:

* None (self-contained HTML/JavaScript code)
* No external libraries are required for this benchmark, but the `ImageBitmap` API and `Canvas` elements are part of the Web APIs.

**Special JS Features/Syntax**

No special JavaScript features or syntax are used in this benchmark.

**Options Compared**

The two options being compared are:

A. **Image**: Loading an image using the `Image` object and drawing it on a canvas.
B. **ImageBitmap+OffscreenCanvas**: Loading an image as an `ImageBitmap`, which is then drawn on an off-screen canvas.

**Pros and Cons of Each Approach**

**Image (Option A)**

Pros:

* Simple and straightforward approach
* Can be faster for small to medium-sized images due to less overhead compared to creating an `ImageBitmap`

Cons:

* May suffer from performance issues with large images or high-resolution images, as the image needs to be loaded and drawn on the canvas.
* Canvas rendering can be slower than drawing directly onto a pixel buffer.

**ImageBitmap+OffscreenCanvas (Option B)**

Pros:

* Can handle larger images without significant performance degradation
* Off-screen canvas provides direct access to pixels, potentially leading to faster rendering

Cons:

* Requires creating an `ImageBitmap` object, which adds overhead compared to simply loading and drawing the image.
* Creating an off-screen canvas may introduce additional memory allocation and garbage collection.

**Other Considerations**

* The test's focus on performance might not account for factors like memory usage, security concerns (e.g., loading arbitrary content), or platform compatibility issues.
* The use of `Promise.all` to handle asynchronous operations may impact performance due to the overhead of waiting for multiple promises to resolve.

**Alternatives**

If you were to reimplement this benchmark, consider using different approaches:

* **Web Workers**: Using Web Workers to offload image loading and processing can improve performance by utilizing multiple CPU cores.
* **GLSL shaders**: Utilizing GLSL shaders can accelerate rendering by leveraging GPU acceleration.
* **WebGPU or WebGL2**: If the browser supports it, using WebGPU or WebGL2 can provide even faster rendering capabilities compared to Canvas rendering.

Keep in mind that each alternative approach comes with its own set of considerations and potential trade-offs.

Related benchmarks:

Image vs ImageBitmap+OffscreenCanvas (version: 0)

Comparing performance of: Image vs ImageBitmap/Offscreen

Created: 7 years ago by: Guest

Jump to the latest result

Image

ImageBitmap/Offscreen

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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