Benchmark: image from blob vs native image src

Tests:

from blob
(async () => { const blob = await (await fetch('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')).blob(); const img = new Image(); img.src = URL.createObjectURL(blob); return img; })();
from native
const img = new Image(); img.src = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';

Historical Performance Data aggregated from 251 community runs

Desktop Results:

Chrome 189 runs

from native

77K/s

from blob

16K/s

Fastest: from native (4.7x faster)

View exact numbers

✓ from native: 76,517 ops/sec
• from blob: 16,274 ops/sec

Firefox 29 runs

from native

56K/s

from blob

11K/s

Fastest: from native (5.3x faster)

View exact numbers

✓ from native: 55,889 ops/sec
• from blob: 10,537 ops/sec

Safari 8 runs

from native

1K/s

from blob

1K/s

View exact numbers

✓ from native: 1,345 ops/sec
• from blob: 1,287 ops/sec

Mobile Results:

Chrome 18 runs

from native

26K/s

from blob

4K/s

Fastest: from native (6.9x faster)

View exact numbers

✓ from native: 26,016 ops/sec
• from blob: 3,746 ops/sec

Safari 7 runs

from native

1K/s

from blob

985/s

View exact numbers

✓ from native: 1,072 ops/sec
• from blob: 985 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
from blob
from native

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Linux

View result in a separate tab

from native

57K/s

from blob

16K/s

View exact numbers

Test name	Executions per second
✓ from native	56,533 Ops/sec
from blob	15,897 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided benchmark measures the performance difference between loading an image from a blob and using the native `Image` object to load an image from a URL.

**Options being compared:**

1. **Loading images from blobs**: This approach creates a new blob from the response body of a fetch request, then uses `URL.createObjectURL()` to create a URL that can be used as the `src` attribute of an `img` element.
2. **Using native `Image` object with URL**: This approach simply sets the `src` attribute of an existing `Image` object to a pre-generated URL for the image.

**Pros and Cons:**

* Loading images from blobs:
	+ Pros: Allows for more flexibility in handling images, as the blob can be processed or transformed before being used.
	+ Cons: Can lead to higher memory usage and slower performance due to the additional processing required to create the blob.
* Using native `Image` object with URL:
	+ Pros: Generally faster and more lightweight than loading from blobs.
	+ Cons: May not offer as much flexibility in handling images, as it relies on the URL being correct and up-to-date.

**Library and its purpose:**

There is no explicit library mentioned in the benchmark code. However, `URL` and `fetch` are built-in JavaScript APIs that provide functionality for working with URLs and making network requests, respectively.

**Special JS features or syntax:**

None of the test cases use any special JavaScript features or syntax beyond what is necessary to run the benchmarks. The focus is on comparing two different approaches to loading images in a JavaScript environment.

**Other alternatives:**

If you wanted to add more variations to this benchmark, some potential alternatives could include:

* Loading images from different sources (e.g., local file system, canvas element)
* Using different image compression or encoding schemes
* Adding error handling or fallbacks for failed image loads
* Measuring performance under different network conditions or environments

It's worth noting that the specific options and variations will depend on the goals and requirements of the benchmark.

image from blob vs native image src (version: 0) Benchmark.js

image from blob vs native image src

Comparing performance of: `from blob vs from native`

Created: 5 years ago by: Registered User

Go to the latest result

from blob

from native

Historical Performance Data aggregated from 251 community runs

Desktop Results:

Chrome 189 runs

Firefox 29 runs

Safari 8 runs

Mobile Results:

Chrome 18 runs

Safari 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

image from blob vs native image src (version: 0) Benchmark.js

image from blob vs native image src

Comparing performance of: from blob vs from native

Created: 5 years ago by: Registered User

Go to the latest result

from blob

from native

Historical Performance Data aggregated from 251 community runs

Desktop Results:

Chrome 189 runs

Firefox 29 runs

Safari 8 runs

Mobile Results:

Chrome 18 runs

Safari 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `from blob vs from native`