CODEWITHSUNDEEP
javascripthtmlcss
Running Turtle
Running Turtle

Reputation: 12752

reduce image size in memory

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

Upvotes: 2

Views: 1441

Answers (2)

Vorsprung
Vorsprung

Reputation: 34297

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

Upvotes: 2

BastiBen
BastiBen

Reputation: 19860

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.

Upvotes: 2

Related Questions