ASP.NET image processing performance bottleneck

Question

I am developing web service on ASP.NET. One of key features is uploading some photos (max - 18) to server and after that this photos are being processed. I have performance bottleneck with image resizing. When i am uploading maximum count of photos to server then CPU usage approaches 100%, therefore all pages on server not responding until image processing not finished. I am use MS Azure (App plan - S2) to host my service.

So, how to organize image resizing to prevent full CPU load?

Answer 1

You can resize images on client side with JS. This is a good example: Resizing an image in an HTML5 canvas

Answer 2

I would definitely recommend that you host upload handler on a separate app pool. You can create a staging slot for your Azure S2 hosting plan and handle uploading there. You should of course need to set the upload handler to your new host. This way your upload process will not consume your web apps resources.

High traffic (uploads) will cause Out of Memory exceptions regarding your upload size and available memory on the server. Remember that the compressed image files allocates much more memory than the file itself (more than 10x sometimes) when you reference them in your app. If you foresee that you'll face high volumes of traffic, you should upload files directly to a blob storage like Azure Blob Storage (or Amazon S3 etc.) from client browser. This way you won't need to worry about the allocated memory of ongoing uploads. After upload complete you need to call another endpoint that process the images as you need.

Amazons Sample: link

There are also some advanced topics about this issue. Check here and here

You can also use well proven tools for your serverside image processing. These can perform up to 40x faster than .NET's builtin GDI+. Check ImageResizer .