2

After an image was downloaded by the browser, am I correct to think that even if the image is resized smaller with css, the memory footprint is still the same as the image remains untouched in the browser's memory ?

If so, is there a way to actually decrease the size of the image so that it takes less memory and also, does not affect display performance too much during scrolling/paning operations ?

ps: this question may not make a lot of sense for a "traditional" web page, but is very important (for me, at least) in the context of a single page web application displaying many images of different sizes because pages and browser memory are not "refreshed" when displaying new pages.

ps2: i do not have access to the server, so server-side resizing is a no-go

Running Turtle
  • 12,360
  • 20
  • 55
  • 73
  • Even with a single-page app this should be a non-issue. Make sure to properly remove the DOM elements you don't need, and you should be fine. – user123444555621 Dec 24 '12 at 10:43

2 Answers2

2

CSS scaling does usually not reduce the memory footprint. I think it might actually increase it, because the browser has to buffer/cache the scaled version and the original version of the image.

I think you could use the Canvas API to effectively draw a smaller version of the image and use that instead.

Also take a look at this question.

Plus, if you know the effective, final size of the image, you could of course do that on the web server and cache the smaller version. This should offer some degree of downwards compatibility.

Community
  • 1
  • 1
BastiBen
  • 19,679
  • 11
  • 56
  • 86
  • If i use Canvas to produce a smaller image isn't the problem the same as with CSS, ie two versions of the same image in memory ? – Running Turtle Dec 24 '12 at 09:03
  • If you don't reference the "original" image anywhere, that is from the DOM of the page, it should eventually get garbage collected. – BastiBen Dec 24 '12 at 10:10
2

You could rescale server side with something like imagemagick http://www.imagemagick.org/script/index.php This has bindings for many different programming languages

Vorsprung
  • 32,923
  • 5
  • 39
  • 63