Speed Up Website's Multiple Image Upload from Client Browser to Server

Question

I understand there are ways to upload multiple images from browser to server and also the uploading speed is base upon the speed of the server and network. The standard way of doing it:

Click a upload button in the website -> choose what images you want to upload -> click Submit Button to upload all the images to the server (Prompt "please wait" to user) -> Upload Successful!

But in terms of the coding part, I was just wondering is there a faster way to efficentily upload images from client's device to server? (Using Javascript and php)

Currently what I am doing is first "cut-down" the images in client side first, then send the images back to server. But this is very slow since javascript takes time to "cut-down" the size of the images. By "cut-down", I mean to make the image width and height smaller. Is there a faster way to do it?

(Some javascript and php coding example would help as well.)

Answer 1

Short Answer: No, Javascript is not slow, neither PHP.

If the image is big (some megabytes), it will take a moment to crop/resize the image in javascript/php. There is no way to avoid it.

I believe you're having a performance issue because:

1. You are uploading many images at once, and..
2. Some of them are big (by megabytes)

Consider optimizing images before uploading them. I suggest you use kraken.io, which you can reduce the size of the images without changing image quality (loseless mode).

Also, consider uploading images by chunks, which:

1. Allows you to track upload progress
2. AJAX-driven

There are many chunk upload plugins, here is one of them:

https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads

Last but not least, look at kraken.io itself, maybe you learn few things on how to speed up image uploading.