JavaScript and draggable images - can I optimise it?

Question

I'm working on a web application where we have a very large image (4000 * 2000 pixels) that can be dragged about the place, zoomed in/out.

When the image isn't zoomed in or out, it can be dragged about very fast and it looks great. As soon as i change the size of the image by some factor, the dragging becomes dreadfully slow.

I have just noticed that I have a height attribute on the image, but don't have a width attribute.

This behaviour is similar in both IE and Firefox, for obvious reasons, it works slightly faster in FireFox.

I have been looking at the GoogleMaps where they also have a very smooth draggable images.

What sort of optimisation I can do to achieve a similar result?

Thank you

Answer 1

Google Maps relies on lots of small, tiled images, as opposed to one large image. That way, they can be loaded in and out of memory, as you move around.

The simplest way to optimise the image would be to slice it up.

If you want to offer multiple levels of zoom, you may also want to consider rendering images at different levels as well, rather than relying on the browser to image process at run time.

Additionally, look at the image format you use! GIF and PNG offer compressed file-sizes over images such as JPEG and TIFF (although, obviously quality does take a hit).