Benchmark: Bug with Resizing ImageBitmap causes slower than expected performance

Bug with Resizing ImageBitmap causes slower than expected performance (version: 0)

There is currently a bug on Chrome Version 74.0.3729.131 (Official Build) (64-bit) (5/12/2019) with ImageBitmap where attempting to resize an ImageBitmap through ImageBitmapOptions will causes the resulting ImageBitmap to render very poorly when used with drawImage, even if the resulting ImageBitmap is resized to be smaller than the source image.

Comparing performance of: Image vs ImageBitmap/Offscreen vs ImageBitmap/Offscreen Resized

Created: 5 years ago by: Guest

Jump to the latest result

Script Preparation code:

var img = new Image();
img.decoding = 'sync';

var imageBitmap;
var imageBitmapResized;
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);
  
  Promise.all([
    createImageBitmap(img, {imageOrientation: "none", premultiplyAlpha: "none", resizeWidth:~~(img.width/2), resizeHeight:~~(img.height/2), resizeQuality:"low"})
  ]).then(function(images) {
  imageBitmapResized = images[0];
  doneLoading = true;
}, false);
  
});

img.src = 'https://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';

​x
 
var img = new Image();img.decoding = 'sync';​var imageBitmap;var imageBitmapResized;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);    Promise.all([    createImageBitmap(img, {imageOrientation: "none", premultiplyAlpha: "none", resizeWidth:~~(img.width/2), resizeHeight:~~(img.height/2), resizeQuality:"low"})  ]).then(function(images) {  imageBitmapResized = 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);
if (doneLoading)
ctx.drawImage(img,0,0);
ImageBitmap/Offscreen
if (doneLoading) ctx.drawImage(imageBitmap,0,0);
if (doneLoading)
ctx.drawImage(imageBitmap,0,0);
ImageBitmap/Offscreen Resized
if (doneLoading) ctx.drawImage(imageBitmapResized,0,0);
if (doneLoading)
ctx.drawImage(imageBitmapResized,0,0);

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
Image
ImageBitmap/Offscreen
ImageBitmap/Offscreen Resized

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 16 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Image	160476400.0 Ops/sec
ImageBitmap/Offscreen	171451520.0 Ops/sec
ImageBitmap/Offscreen Resized	156561392.0 Ops/sec

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

I'll break down what's being tested in the provided benchmark, explain the options compared, and discuss their pros and cons.

What is being tested?

The benchmark measures the performance of drawing images using different approaches:

Drawing an image directly on a canvas (Image test case).
Creating an ImageBitmap from the original image and drawing it on an offscreen canvas (ImageBitmap/Offscreen test case).
Creating a resized ImageBitmap from the original image and drawing it on another offscreen canvas (ImageBitmap/Offscreen Resized test case).

Options compared:

The benchmark compares three approaches:

Direct Image Drawing (Image): Drawing the original image directly on a canvas using ctx.drawImage(img, 0, 0).
ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen): Creating an ImageBitmap from the original image and drawing it on an offscreen canvas using ctx.drawImage(imageBitmap, 0, 0).
Resized ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen Resized): Creating a resized ImageBitmap from the original image and drawing it on another offscreen canvas using ctx.drawImage(imageBitmapResized, 0, 0).

Pros and Cons of each approach:

Direct Image Drawing (Image):
- Pros: Simple and straightforward.
- Cons: May not leverage optimized image processing or caching mechanisms.
ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen):
- Pros: Utilizes optimized image processing and caching mechanisms, which can improve performance.
- Cons: Requires creating an ImageBitmap object, which may add overhead.
Resized ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen Resized):
- Pros: Similar to the previous approach, but with an added benefit of resizing the image.
- Cons: Requires creating a resized ImageBitmap object, which adds additional complexity.

Other considerations:

The benchmark uses Chrome Mobile 129 as the test browser and Android device platform. This may not be representative of other browsers or platforms.
The benchmark does not include any error handling or edge cases, which could affect the results in a real-world scenario.
The script preparation code is quite complex, with multiple Promise.all calls and canvas elements being created. This complexity may not be necessary for this specific benchmark.

Alternative approaches:

Other alternatives to consider when drawing images in JavaScript include:

Using WebAssembly (WASM) or WebGPU for optimized image processing.
Leveraging libraries like WebGL or Three.js for 3D graphics and image manipulation.
Utilizing more modern web APIs, such as the Canvas API with the webp format.

Keep in mind that each approach has its own strengths and weaknesses, and the best choice depends on the specific requirements of your project.

LLMs can make mistakes. Check important info.

I'll break down what's being tested in the provided benchmark, explain the options compared, and discuss their pros and cons.

**What is being tested?**

The benchmark measures the performance of drawing images using different approaches:

1. Drawing an image directly on a canvas (`Image` test case).
2. Creating an `ImageBitmap` from the original image and drawing it on an offscreen canvas (`ImageBitmap/Offscreen` test case).
3. Creating a resized `ImageBitmap` from the original image and drawing it on another offscreen canvas (`ImageBitmap/Offscreen Resized` test case).

**Options compared:**

The benchmark compares three approaches:

* **Direct Image Drawing (Image)**: Drawing the original image directly on a canvas using `ctx.drawImage(img, 0, 0)`.
* **ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen)**: Creating an `ImageBitmap` from the original image and drawing it on an offscreen canvas using `ctx.drawImage(imageBitmap, 0, 0)`.
* **Resized ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen Resized)**: Creating a resized `ImageBitmap` from the original image and drawing it on another offscreen canvas using `ctx.drawImage(imageBitmapResized, 0, 0)`.

**Pros and Cons of each approach:**

1. **Direct Image Drawing (Image)**:
	* Pros: Simple and straightforward.
	* Cons: May not leverage optimized image processing or caching mechanisms.
2. **ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen)**:
	* Pros: Utilizes optimized image processing and caching mechanisms, which can improve performance.
	* Cons: Requires creating an `ImageBitmap` object, which may add overhead.
3. **Resized ImageBitmap with Offscreen Canvas (ImageBitmap/Offscreen Resized)**:
	* Pros: Similar to the previous approach, but with an added benefit of resizing the image.
	* Cons: Requires creating a resized `ImageBitmap` object, which adds additional complexity.

**Other considerations:**

* The benchmark uses Chrome Mobile 129 as the test browser and Android device platform. This may not be representative of other browsers or platforms.
* The benchmark does not include any error handling or edge cases, which could affect the results in a real-world scenario.
* The script preparation code is quite complex, with multiple `Promise.all` calls and canvas elements being created. This complexity may not be necessary for this specific benchmark.

**Alternative approaches:**

Other alternatives to consider when drawing images in JavaScript include:

* Using WebAssembly (WASM) or WebGPU for optimized image processing.
* Leveraging libraries like WebGL or Three.js for 3D graphics and image manipulation.
* Utilizing more modern web APIs, such as the `Canvas` API with the `webp` format.

Keep in mind that each approach has its own strengths and weaknesses, and the best choice depends on the specific requirements of your project.

Related benchmarks: