Plupload is a well endowed, highly configurable multiple image uploader that provides client-side resizing and file-size limiting with either a simple jQuery implementation ready to go out of the box or a custom build-your-own implementation that interacts with Plupload’s API. Read more about Plupload here.
For image-heavy sites like shopping carts, backends, etc., the idea of client-size resizing to cut 4MB+ images down to under 100KB before the upload even begins is incredibly appealling.
Plupload provides a lot of power in a simple install. Your script can loop through several runtimes in your prefered order looking for Flash, Gears, HTML5 and Silverlight. The form defaults to a regular form submission if none of the runtimes are present.
Sounds close to perfect, right?
I installed Plupload to test its image resizing powers in a project I’m working on. I chose a photo I shot a few years ago that had three critical elements that tend to degrade during resizing: texture, line and smooth gradient.
There were some obvious differences between runtimes.
Here it is resized in Photoshop using regular bicubic resampling:
There is some jagged line on the mast, but most of the original is preserved. There is a nice, smooth gradient. You can see the seams in the sails and some patches. There aren’t any artifacts or halo around the boat.
Plupload at quality: 100
My first Plupload upload (that’s fun to say) used Flash at quality: 60. I usually export Photoshop images for the web at 60. I was terribly disappointed. So I shot the quality up to 100 and still wasn’t satisfied. For a moment, I was sure my hopes for a client-side resize solution were sunk. But then I tried Gears and some of the other runtimes with better results.
It should be noted that HTML5 in Chrome did not resize at all. Firefox was used for all uploads, which were delivered locally to my WAMP setup.
Plupload: Flash at quality: 100
245K
Plupload: Gears at quality: 100
131K
Plupload: Silverlight at quality: 100
184K
Plupload: HTML5 (on Firefox) at quality: 100
54K (quality did not change during any test)
The Flash resize remained very crisp, but the diagonal lines in the image, especially around the mast, degraded significantly. Gears did a great job with the diagonal lines, but there was some blur in the image. Silverlight also handled the lines well, but the blur was more significant—the seams in the sails are barely visible. HTML5 had a similar result to Flash, but at such a small file size and moderately less linear distortion, it’s a bit more acceptable.
Your choice for a winner may vary as your needs may vary, but I’d give the Gears runtime the best result by far. I’d be happy to accept the slight blur over the pixelated lines simply because the blur is less obvious. I don’t imagine clients or users noticing the blur as much as the pixelation.
Further testing at various qualities revealed Gears the winner again and again in my mind. Of course, the drawback to Gears versus Flash is that Flash is much, much more commonly installed on the user’s machine. If your application is public with many users, then you’ll be happy that a Flash runtime is included. You may prefer to include a note about image quality and a link to downloading Gears.
In my case, where I’ll be using Plupload as a part of client content management systems, I’ll be sure to install or walk the client through installing Gears locally on their machine.
Plupload using Gears at various qualities
Moving on with Gears, here are the results of resizing the image at quality: 100, 95, 90, 80, 70 and 60.
Plupload: Gears at quality: 100
245K
Plupload: Gears at quality: 95
52K
Plupload: Gears at quality: 90
34K
Plupload: Gears at quality: 80
22K
Plupload: Gears at quality: 70
18K
Plupload: Gears at quality: 60
16K
The image doesn’t really start to degrade until quality: 70, where you begin to see some artifacts as sort of a halo around the boat. Most of the definition is still there in 80. The only difference I see between 95 and 90 is the file size. I have a hard time deciding between 80 and 90. The file size in 90 is already drastically reduced from the full quality: 100.
Conclusions
While I’ll keep Flash as an option because a 30K image slightly pixelated is better than a 4MB file heading upstream. But I’ll use Gears and Silverlight ahead of Flash in my runtime stack. Quality will probably be set at 90 unless I still see no difference at 80 in future tests.
Have you used Plupload? How did your images look?