Compress a Byte Array Image without Scaling using

Question

I'm building an AngularJS Application, for Service I'm using .NET C# for coding purpose. I'm retrieving Images from SQL Server as Byte Array and I'm sending the Byte Array to AngularJS and it displays the Image in the HTML.

I followed the same as like in the post Load image from C# Byte array and place image in html tag using AngularJS

But I'm facing the performance issue in my data. My database contains the byte array size is approx. 2 to 3 MB. So, based on Internet Bandwidth its struggling to load. So, kindly assist me how to compress the Byte Array without Scaling the Image ?

I searched a lot in web, but every post they compressed in terms of Scaling the Image. But I need to compress the Byte Array without Scaling.

Answer 1

If you are using some of the standard image formats such as jpeg or png your images are already compressed and there's not much you could do in order to reduce their size further unless of course you scale them down.

This being said, in the article you have linked to, the images seem to be sent over the wire from the server as Base64 strings which incurs a terrible overhead as it bloats their size. And the bigger the images, the bigger the overhead if you Base64 them. So if you have followed the advice in this article you shouldn't have. Instead you should stream the images from your server as raw bytes in the response body and don't use any Base64 encoding. Then simply use standard <img> tags whose src property is directly pointing to your server url. So basically in your Angular application your model should not consist of multiple base64 strings which you downloaded as AJAX requests, but rather an array of urls which will be assigned to the corresponding image tags src property.