Compressing images on load

Question

I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page?

For example, i currently have a large image (1200x 1200) which i need to be fitted to 100x100. Would this be possible via jQuery or would it have to be done manually?

Thanks.

score 1 · Answer 1 · answered Sep 06 '13 at 03:53

You would have to change your image sizes on the server and then change the page HTML or javascript to reference those smaller images. jQuery runs in the browser so, it can't take a 1200x1200 image on the server and somehow make it 100x100 before it gets downloaded.

But, changing the images to the smaller size on the server WILL drastically improve your page load time.

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

Yes it certainly will increase your page load speed.

And, resizing the image on the server is a better option.

reference:

Should I generate each thumbnail dynamically every time it is requested, or store them on image upload?

edited May 23 '17 at 12:09

Community

1
1

answered Sep 06 '13 at 03:53

Hendyanto

335
1
8

score 0 · Answer 3 · answered Sep 06 '13 at 14:29

0

To resize images server-side, you can use WideImage library. With an instruction like this :

WideImage::load($path)
    ->resize(100, 100)
    ->output("jpg");

You load your image, resize it in memory and return its data in the desired format.

answered Sep 06 '13 at 14:29

Nico

115
1
3
9

score 0 · Answer 4 · answered Sep 06 '13 at 14:31

I was wondering, is it possible to enhance the speed of a page loading by decreasing the size of images within the page? Would this be possible via jQuery

No. This would require that the browser download the large image over the network and then process it to reduce it in size.

If you want to speed things up, you need to make the images smaller before they leave the server.

You don't need to do this manually though. Image resizing can be done programatically.

Compressing images on load

4 Answers4