Benchmark: createImageBitmap using Blob vs image element

HTML Preparation code:

<img id="source" src="https://placekitten.com/1280/720" crossorigin="anonymous">

Script Preparation code:

// const sourceImage = new Image();
const sourceImage = document.querySelector('#source');
const imageLoaded = new Promise((resolve, reject) => {
  if (sourceImage.complete) resolve(sourceImage);
  sourceImage.onload = () => resolve(sourceImage);
  sourceImage.onerror = reject;
  // resolve(source1);
});

const imageBlobLoaded = fetch('https://placekitten.com/1280/720').then(res => res.blob())

function scaleSource(sw, sh, dw, dh) {
  const hRatio = dw / sw;
  const vRatio = dh / sh;
  const ratio = Math.max(hRatio, vRatio);
  const x = (sw - dw / ratio) / 2;
  const y = (sh - dh / ratio) / 2;
  return { x, y, w: sw - x * 2, h: sh - y * 2, ratio };
}

const profileWidth = 480;
const profileHeight = 360;

// Remember, all the outputs must be an ImageBitmap to be a fair comparison

// case 1: use createImageBitmap to crop and resize, bugged in firefox but working in Chrome
async function case1_createImageBitmapWithImg() {
  const source = await imageLoaded;
  const bitmap = await window.createImageBitmap(
    source,
    source.width,
    source.height,
    0,
    0
  );

  return bitmap;
}

// case 2: use canvas to crop and resize
async function case2_createImageBitmapWithBlob() {
  const source = await imageBlobLoaded;
  const bitmap = await window.createImageBitmap(
    source,
    source.width,
    source.height,
    0,
    0
  );

  return bitmap;
}

Tests:

Create ImageBitmap with Img element
case1_createImageBitmapWithImg() .then(bitmap => bitmap.close());
Create ImageBitmap with Blob
case2_createImageBitmapWithBlob() .then(bitmap => bitmap.close());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create ImageBitmap with Img element
Create ImageBitmap with Blob

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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/113.0.0.0 Safari/537.36

Browser/OS: Chrome 113 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Create ImageBitmap with Img element	2451917.0 Ops/sec
Create ImageBitmap with Blob	1893041.0 Ops/sec

createImageBitmap using Blob vs image element (version: 0)

Comparing performance of: Create ImageBitmap with Img element vs Create ImageBitmap with Blob

Created: 10 months ago by: Guest

Jump to the latest result

Create ImageBitmap with Img element

Create ImageBitmap with Blob

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A