Image.SaveAsPng is slow on Blazor. Is there an alternative?

[edhalsim]

Hi,
Love your library. I need to generate at runtime a custom image about 1200x800 that I need to set the "src" property of an "img" tag. I'm using the GetPixelRowSpan approach to populate all the pixels. So far so good. Then, I'm doing:

image.SaveAsPng(outStream);
Image64 = "data:image/png;base64,..."

The problem is the SaveAsPng is taking several seconds (5-10). Is there a faster alternative? Thanks for your help.

[antonfirsov]

It shouldn't take that long normally. We need to know more about your environment (os, runtime, hardware etc.)
Further queations typically raised in such cases: How do you benchmark? Are you sure you run in release mode?

[JimBobSquarePants]

What's your server specs? Are you running in debug or release? 10 seconds is thousands of times slower than expected.

[JimBobSquarePants]

img.ToBase64String(PngFormat.Instance) will save you that ToArray() call btw.

[edhalsim]

Debug vs. Release doesn't seem to matter. Note that this code is running in the user's browser (Blazor WebAssembly app.), not on the server. Would it be better to generate the PNG image byte array on the server and transfer that to the client for display? I was trying to minimize the data travelling across the wire.

[antonfirsov]

@edhalsim Blazor is backed by mono, which lacks the runtime features needed to make a fully managed image processing library fast. (eg. SIMD)

You should either process images on the server (with ImageSharp) or use native image processing API-s in the browser.

[edhalsim]

I ran a test and you're correct of course. Yet another challenge I've run into using Blazor. Thanks for helping.

[antonfirsov]

Placing an answer for people hitting this or a similar problem in the future:

We do not recommend using ImageSharp in the browser when performance is important.

Update: After having some chat on twitter and doing my own reading, I realized it's not even about SIMD. Client-side Blazor still uses an interpreter, which makes it practically impossible to do any compute-intensive task in the browser. .NET 6 should bring AOT (dotnet/aspnetcore#5466) which will may make things better, depending on how generics will be implemented in mono-wasm + AOT.

---

WASM does not support SIMD yet, which makes it impossible to make the library fast on Blazor.
Note that there is a proposal to add SIMD intrinsics to WASM (https://github.com/WebAssembly/simd), but I assume it will take years until it gets runtime support in .NET.