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

Tests:

Image
if (doneLoading) ctx.drawImage(img,0,0);
ImageBitmap/Offscreen
if (doneLoading) ctx.drawImage(imageBitmap,0,0);
ImageBitmap/Offscreen Resized
if (doneLoading) ctx.drawImage(imageBitmapResized,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
ImageBitmap/Offscreen
ImageBitmap/Offscreen Resized

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.6.1

View result in a separate tab

Test name	Executions per second
Image	38637484.0 Ops/sec
ImageBitmap/Offscreen	38810948.0 Ops/sec
ImageBitmap/Offscreen Resized	36917184.0 Ops/sec

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

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:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

Image

ImageBitmap/Offscreen

ImageBitmap/Offscreen Resized

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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