[Image Utils Mobile] Smaller resized image is a much larger file size

Forge Component
(4)
Published on 2018-10-10 by Harlin Setiadarma
4 votes
Published on 2018-10-10 by Harlin Setiadarma

Dear All,


just started testing with this Image Utils Mobile PlugIn....
Strange thing (for me it is) that the resized image (Resize.MaxWidthOrHeight = Identify.width / 2) is much bigger in binary data size then the original.
Image 1: Height:600, Width 337, ByteSize = 10081
Resized Image: Height:168, Width 94, ByteSize = 38378....


Somebody??

Default resize property has sharpen factor of 0.2

Sharpening may increase binary file size (because it's more difficult to compress?).

Try sharpen 0.

(not an answer, more background)

Depending on the image format, different compression techniques are used. Images like PNG and GIF are using a horizontal compression which basically counts the number of identical color pixels. When you compress an image with lots of colors, every pixel can be different and the compression creates more overhead, increasing the file size.

Using the sharpen factor (or other kind of settings), the colors are more blended into each other, so compression can be more effective.

Create an image, square (for instance 200x200) and put a gradient from top to bottom and create a similar image with a gradient from left to right. Same amount of colors and pixels, different file size.

Images like JPG use a different kind of compression (which makes use of our difficulties to see details ;))


Humor lesson from using phone images:):):)

Never use a picture in png or gif from a modern mobile phone to create images from a screen, without decreasing the image size. The camera's are that good; Every pixel on a screen is created with colored sub pixels and stored in the image (depending on quality level).....as a result, every horizontal pixel is different.....Huge files :):):)

Been there, done that, crashed applications with it 

Patrick Baanvinger wrote:

(not an answer, more background)

Depending on the image format, different compression techniques are used. Images like PNG and GIF are using a horizontal compression which basically counts the number of identical color pixels. When you compress an image with lots of colors, every pixel can be different and the compression creates more overhead, increasing the file size.

Using the sharpen factor (or other kind of settings), the colors are more blended into each other, so compression can be more effective.

Create an image, square (for instance 200x200) and put a gradient from top to bottom and create a similar image with a gradient from left to right. Same amount of colors and pixels, different file size.

Images like JPG use a different kind of compression (which makes use of our difficulties to see details ;))


Humor lesson from using phone images:):):)

Never use a picture in png or gif from a modern mobile phone to create images from a screen, without decreasing the image size. The camera's are that good; Every pixel on a screen is created with colored sub pixels and stored in the image (depending on quality level).....as a result, every horizontal pixel is different.....Huge files :):):)

Been there, done that, crashed applications with it 

That's the reason why i asked in the first place.... Our mobile app is crashing while uploading a lot of pictures from the phone/tablet to the google drive... "Java.out-of-memory", Fatal error, Contact OutSystems Support....
So i needed a way to 'compress' the pictures, before uploading......


I am having he EXACT same problem. Default sharpen factor took an image just under 1 MB to just under 6 MB. Setting sharpen factor to 0 changed it to go to just over 5 MB.

So...

Something else is going on. Is it converting from JPEG to some format with worse compression? Is it changing the compression ratio to something low? Etc.

J.Ja

This plugin used javascript canvas to resize image.

This plugin does not offers JPEG compression, only resize whatever in the binary input parameter.

JS Canvas might convert it to uncompressed PNG.


I did some test:

https://harlin.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ImageUtilsMobile_Sample



Depending on how far you resize the picture, it still yields good result.


Note that I develop this plugin because I often demo mobile app on client's phone using Outsystems Now.

This resize plugin worked with OS Now.


If you want good resize and compression plugin, try cordova native resize/compress plugin instead.

There's a couple on Forge.

Thanks.

Edit: resize not working yet in IOS. JS Canvas is a mess in safari.