Resize images - poor quality

[robfaas]

(also posted in forum on plupload.com)
After trying, buying and working days to implement Plupload 2 properly I am very unpleasantly surprised by the poor quality of resized images.
It is not obvious on all photos, so I missed it at first. But on a lot of images you cannot ignore it. My goal is to use it for photography sites, so this is really not working good enough.
(And before you suggest resizing on server; that way full size images have to be uploaded, this takes far too much time.)

It appears to happen in all runtimes (Flash, Silverlight and HTML5). Example: http://www.anothersite.nl/plupload.jpg - left=original, right=resized

I don't know how the client side resizing is done, but I do know that the wrong resample method is used! The used method preserves the hard edges. Programs like Photoshop or Irfanview offer different good methods for resampling.

So, my question: is it possible to use another, better method for (client side) resampling?

[jayarjo]

Flash resize method is not the same as HTML5's and should be by a degree better. Definitely not the same thing at least. Maybe you should try again and make sure that you have only Flash runtime in runtimes list. Also thumbs (previews) are always done in HTML5 (when it's supported by the browser), so the only proper way to compare results of the client-side resizing would be by checking uploaded images.

I'm saying this because if you find Flash resize good enough, we can adapt other methods to it as well.

[robfaas]

No, Flash is not better! See example with results from different runtimes: http//www.anothersite.nl/plupload2.jpg Resize quality was set to 100. Done on Win7, FF 18.0.2. Also tried with IE 9, Safari (Win) and Chrome. Al browsers give these bad results.

[wuservices]

I had this issue with resizing in plupload too (from the very beginning). We opted to not use resizing in plupload due to the poor quality (lack of bicubic scaling). It would be awesome if you could implement bicubic scaling in plupload 2!

[jayarjo]

@robfaas, can you share original of that image for us to take some samples?

[robfaas]

You can use any picture of somebody with grey hairs, it will give a similar result. Also, if you take a good look at small light areas in a photo after resizing, you will see it. I have tried it with many pictures, this was just an example.
I cropped the original because it's a photo of a person and I don't want to violate the portrait rights. But I think it will do: http://www.anothersite.nl/example.jpg
By the way: great that you are looking into it!

[robfaas]

@jayarjo Can you give a hint if this is worth wainting for? The quality of the resized-uploaded images is crucial for me. I have spend so much time already on Plupload, but it's all waisted if the resize quality is not being improved. So it would be great if you find a way (soon) to do this!

[jayarjo]

I'm experimenting with several algorithms, although it definitely won't make it into a release, in nearest week or so. Although if you are our OEM license holder we can build a special release for you. Send a message to our support mail.

[rob-z]

Hi there, I had the same problem as robfaas. The quality of the uploaded, resized images was really bad. As a solution I upload the image files in original quality and resize them with this upload php class: http://www.verot.net/ . When I'm done I delete the original file (to save harddisk space). The files take longer to upload, but the resulting images look a lot better.

[joonsp]

There's a possibility to do the resizing in steps, allowing for a more antialiasing like result:
http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing

I tried this and the resulting image looked much better. I'll try to properly implement this

[jayarjo]

@joonsp that's what we do in Flash runtime, but as original poster noticed - it is not that big of a difference. Proper resampling has no alternative I'm afraid.

[reichertm]

Are you planning a release with improved resampling any time soon?

[robfaas]

MultiPowUpload, also a Flash uploader seems to do the job a lot better... http://demo.element-it.com/Examples/multipow/index.htm

[joonsp]

Yeah, It seems the resulting image is only better when the source is multiple times larger than the destination. Otherwise the resulting image is not that different, or even much worse.

[roman02]

@jayarjo Can you advise us on the ETA for this?

[futureweb]

Hey there,

guess you are aware of this?
http://strauss.pas.nu/js-bilinear-interpolation.html
http://jsperf.com/pixel-interpolation/16

Would love to see high image quality client-resize on plupload! ;-)

Andreas Schnederle-Wagner

[robfaas]

Me too! Me too!

[roman02]

Does Plupload currently use linear-interpolation, nearest-neighbor resampling method? If so, then there may be an easy solution to the quality problem you have. Read http://www.benknowscode.com/2014/01/resizing-images-in-browser-using-canvas.html. Here's a key fragment:

"...it appears the drawImage() function is using a linear-interpolation, nearest-neighbor resampling method. That works well when you're not resizing down more than half the original size. Out of curiosity, I used the basic drawImage() approach from above, but looped it to only resize in half steps down to the desired size. The resulting image looked a lot better than the first attempt and only took a little longer to run than resizing in one step..."

[straube]

Hi all,

The solution above, from @roman02, seems to be OK. Has someone tried to use this approach within the plupload's resize function?

[matthiaswagnerwy]

hy there,

is there a way to use the suggested solutions within plupload? would it be enough to ovverride the downsize-function in the moxie.js code? i would like to try it out.. and the canvas-solution would work only with the html5 environment? what would happen with other runtimes?

thanks for a few hints ;)
matt

[Gangkaroo]

http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality
IMO this seems to be a good solution to the problem involving real down sampling instead of several resizing steps. I'm referring to the post by GameAlchemist. I have not yet looked into it but would it be possible to include this into the uploader? Current results with resizing are really noisy and artifacts are visible in all resized images, independent of their size.

[matthiaswagnerwy]

@jayarjo, is there any chance to see improvements in a release soon? you mentioned above that you could make a release for oem-clients. although i'm not, i think many people here would make a donation for this feature ;)

[futureweb]

We still would be very interested in integrating PLUPLOAD in our CMS ... but can't integrate it yet as the (resize) Picture Quality is still too bad ... Hope to see some improvements here soon ...

Andreas Schnederle-Wagner
http://www.futureweb.at

[robfaas]

The same here!

[matthiaswagnerwy]

in the meantime you can have a look at the hint from @rob-z above. took me two hours now to turn off pluploads resizing and generate different versions of the uploaded pic with that solution (including size, greyscale, watermark, ...). only thing is that processing is a bit slow imho.

[roman02]

If development of this has stalled, an alternative is needed. Does anyone know of any?

[robfaas]

Maybe https://github.com/mailru/FileAPI (I have not tested for quality of resized images yet)

[roman02]

Thank you, @robfaas . That solution seems to be maintained. http://mailru.github.io/FileAPI/ contains demos.

[robfaas]

Yes @roman02. I just tested with the same image I used on Plupload: http://www.anothersite.nl/plupload.jpg and FileAPI http://www.anothersite.nl/fileapi.jpg seems to do allright where Plupload failed! I think the guys of Plupload are not that interested in improving their product...

[straube]

Hey @robfaas. Since you are already trying that lib, can you say if is it easy to replace Plupload by FileAPI in an existing project? I've seen the docs, but I'm not sure about it.

[robfaas]

Here is one to test: http://www.anothersite.nl/testphoto.jpg

[jayarjo]

@robfaas, Downsized to 222x300.

• Default (old):
  
• Default:
  
• Bilinear:
  

[robfaas]

@jayarjo That's a good result! Bilinear is allright, but softened the original to much. I think the new Default is the best.

[dzymail]

when we can use this new feature? really need this! 👍
I like show resizing file final size immediately after file selected, like https://github.com/blueimp/jQuery-File-Upload do.

[jayarjo]

@dzymail we cannot know what the exact size will be before we do the actual resizing. We can approximate (roughly), or resize the images right after selection (which might be an option I think).

I do not know what jQuery-File-Upload does, can you arrange the demo (of the feature you've mentioned)?

[jayarjo]

This has become a frequently requested feature, so I guess I need to implement it... one way or another.

[dzymail]

jquery-file-upload has this demo link: https://blueimp.github.io/jQuery-File-Upload

1. click "add files" button, select a big image file (about 2M).
2. then before we upload, file size show as 400k , not 2M.
3. click upload, finish it.

[jayarjo]

From what I see, it looks like jquery-file-upload pre-resizes image to get the final size and then resizes again..?

[danrossi]

Hi guys I can confirm Pica provides much better quality than browser based implementations. They have a webgl option but there is an issue with the shader with aliasing so it may work eventually. WebGL would be even faster. It uses workers for scheduling. The resampling seems to need to do a huge loop through pixel by pixel on the imagedata.

I've had to do an upload feature for S3 where I have to resize 4 different size options. But it has to re-request an upload queue and resize. It would be nice to queue each different size and upload all at once ?

The demo for pica is here http://nodeca.github.io/pica/demo/

Code example is

src = //get canvas
src.getContext("2d").drawImage(image,0,0);

dst = //dest canvas
dst.width = width;
dst.height = height;

window.pica.resizeCanvas(src, dst, {
    quality: quality,
    alpha: alpha,
    unsharpAmount: unsharpAmount,
    unsharpRadius: unsharpRadius,
    unsharpThreshold: unsharpThreshold,
    transferable: true
  }, function (err) {
     //do more resize options after the first one sequentially. 
});

[cdphil]

Hi,
Has this been pushed live? We have downloaded the latest version of plupload and are still experiencing quality issues. If not is this ready for us to pull and use in a live environment?

[jayarjo]

Plupload 3.0-beta1 is out now. We also think to back port resampling stuff to Plupload 2.x branch,'cause Plupload 3 is basically ground up rewrite.

[jayarjo]

I've backported image resizing improvements to v2.x branch. v2.2.0 stable is out now.

[farflungideas]

This is awesome! Tried to implement the new version, however, if you take a large image and set the height / width parameters, it doesn't scale the image evenly (like the old version did).

eg. I upload an image of size: 5054 x 3370

Then set plupload up as such:

resize: { width: 1008)
, height: 1512)
, quality: 95
, preserve_headers: false
},

plupload resizes the file to: 1511 x 1007... Which is not expected.

[jayarjo]

@farflungideas I guess we better file it as separate ticket.

[robfaas]

@jayarjo Still have to test the quality, but I presume it will be a lot better.
And now maybe you wanna change the text in the Intro on http://www.plupload.com/docs/v2/Image-Resizing-on-Client-Side :)

[jayarjo]

@robfaas there's a newer page (in the works) hiding: http://www.plupload.com/docs/v3/Image-Resizing-on-Client-Side. But yes, still need to modify that intro a bit.

[maPer77]

jayarjo ....
Thanks a lot for the work, I'm crazy to test, the quality is very important to me, plupload is the best, I hope it is implemented bicubic too
(google translate)

[jayarjo]

@ciganox we did bicubic, but it turned out to be too slow to be usable. And definitely almost meaningless to port to other runtimes.

[maPer77]

@jayarjo Right, but bicubic would not have more quality? Or is it little difference?
Has it taken so long that it can not be used? Can not be implemented with an option, with an observation about the conversion time? tks

[maPer77]

@jayarjo

hi
Is it implemented "bilinear" in version 2.2.1?
I did not notice any difference when using:
Resize: {width: 1500, height: 1500, quality: 90, resample: 'bilinear'}

tks

[jayarjo]

Difference will be noticeable only when you do a dramatic resize (like several times smaller, or - larger). Otherwise it should feel the same (it is expected), since browsers do use bilinear by default these days.

[maPer77]

@jayarjo The original image has 5575x3717, I am decreasing to 750x500, it has no difference using "bilinear" ... using version 2.2.1
I noticed that in the code of this version, in the file plupload.full.min.js ... I did not find anything referring to "bilinear" ... already in the code of version 3 there are references to "bilinear" ...
Is it not that I downloaded a version 2.2.1 that does not have 'bilinear'?

Thank you for your willingness to clarify my questions.

(Google translator, sorry)

[jayarjo]

What are you comparing to?

[maPer77]

@jayarjo
Also in version 2.2.1 as default and as bilinear I see no difference
What about bilinear code? I did not find in version 2.2.1 only in version 3

[maPer77]

Default

Bilinear

Downsized to 222x300.

Is correct ? No difference, the example you posted had difference between default and bilinear.
However it has a big difference from version 2.1.9 to 2.2.1, it got much better ...
The default option you posted is clearer, will not this option be available?
tks

[jayarjo]

@ciganox v2.x and v3.x both use the same version of moxie. Image resizing logic is in moxie,not in Plupload. So they are using the same thing.

default is basically - bilinear, since in flash/silverlight the give almost the same result. nearest, which is nearest neighbour and wasn't enabled in html5 runtime until now (not sure why I forgot that), is 3-5 times faster and perfect for thumbs for example.