0

I'm retrieving images from an API server in Javascript but want to compress them (since they are rather big files that are slowing down my website's load time) to display. How can I compress these images using Javascript, or what tools are out there that are good for this to speed up my website's overall performance?

user3226932
  • 2,042
  • 6
  • 39
  • 76
  • More information would be useful. Are you talking of a js server like node js, or you want to comprees with client side javascript (which wouldn't be possible imo). What have you tried or read about? – Mark E Aug 30 '15 at 04:37
  • Please be more specific about the environment you're trying to compress the images in. Is this a browser? node.js? – jfriend00 Aug 30 '15 at 04:37
  • @MarkE I want to compress the images with client side Javascript. – user3226932 Aug 30 '15 at 04:42
  • In other posts, people say they use HTML5 Canvas on the clientside to compress the images before uploading to the server, but what I'm trying to do is the opposite. I'm not sure how to approach this so I was wondering if there any tools out there that I don't know about for doing this or if it could be done using client side Javascript. – user3226932 Aug 30 '15 at 04:44
  • 1
    Then I think you are out of luck. You would need the image before you can compress it so you will always need to download the whole file, and then compress which I think would make the performance even worse at load time. I can't think in any method to improve your performance without using any server side code. If you couldn't modify the API you are using then you could create some cache of the images in a second server and make the client retrieve them from there. – Mark E Aug 30 '15 at 04:47

2 Answers2

1

Unfortunately compressing them on the client side isn't going to shrink your pages size, and will slow load time down. In order to shrink these images you will have to shrink them in whatever your server side language is. The problem with compressing on the client side is the client still has to download the image to compress it and the client has to compress it slowing down their load time even more.

What you want to do, if possible is api--->server--->minify--->send to client.

If you don't have a server to do this with, or your page is static I'd recommend implementing caching , or minifying your javascript.

Jake Sylvestre
  • 936
  • 3
  • 14
  • 39
1

Solution to your problem is enabling gzip compression in your server from which you are getting images. It will drastically improve the network load time of your application

Ankit Agarwal
  • 1,350
  • 10
  • 15