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

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 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Test name	Executions per second
from blob	33653.6 Ops/sec
from native	156568.2 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.

Related benchmarks:

image from blob vs native image src (version: 0)

image from blob vs native image src

Comparing performance of: from blob vs from native

Created: 4 years ago by: Registered User

Jump to the latest result

from blob

from native

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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