0

I'm re-sizing images on the client side testing on an iphone5 web browser and seeing a decent amount of lag. It was making me wondering why browser side image re-sizing is so un-performant. Let me add that the re-sizing will be done server side when the project goes live.

Which is more performant, re-sizing images with css or javascript?

Is the performance and quality issues effected by the images re-size difference?

aintnorest
  • 1,326
  • 2
  • 13
  • 20
  • It shouldn't be done on the server side either. Publish it the right size(s). Better yet don't use images if you can avoid it,but if you must, use a sprite sheet (or sheets) that you can cater to different resolutions. – technosaurus Aug 12 '14 at 05:05
  • 1
    The project requires importing your albums from social media sites. The images need to be re-sized for mobile they will be re-sized server side and cached. The back end team has several strategies for dealing with performance. I was just wondering why it was so unperformant. Why wanting to know how something works gets a down point I'll never understand. – aintnorest Aug 12 '14 at 05:16
  • By "resizing", what exactly do you mean? Displaying them at a non-native size (scaling)? – steveax Aug 12 '14 at 05:26
  • @steveax yes thats what I mean. – aintnorest Aug 12 '14 at 05:27
  • If you have a very strict set of known sizes it's possible to manually optimize and avoid the cost of transform on the server. Beyond that (rare?) case I see no reason to avoid server side dynamic image optimization especially if you apply caching. Look at the image services Cloudflare provides... amazing image processing automagically with CDN support. (not affiliated, just a fan) – Perry Aug 12 '14 at 10:39

1 Answers1

0

There are a few reasons that performance is degraded by client side resizing (listed in more detail in provided link):

  • Bandwidth cost of larger image that is discarded anyways
  • CPU/GPU cost of actual image translation

I may be wrong but I'm pretty sure that both CSS and JS would utilize the same browser libraries so I wouldn't expect much difference.

Also, client side manipulation leaves you at the mercy of the algorithm that the browser chooses so you don't get much input on quality vs. speed, lossy vs lossless, etc. There are a lot of algorithms to choose from in image rendering that all have different trade offs.

Is resizing images within the browser a good strategy?

Community
  • 1
  • 1
Perry
  • 528
  • 2
  • 12