HTML5 - Canvas - Optimization For Large Images

I need to build a HTML5 canvas which contains an very large image, maybe up to 10-15MB. My first idea was to split the image into several chunks which will be loaded when moving ho

Solution 1:

You're spot on, and such tiling is how most apps that serve large images (like google maps) work.

Unfortunately, there aren't any other clever optimizations to be had here.

Solution 2:

It may be a good idea, but it depends on your application. The time required to download the image can be believed to be small, and often is, but it's truly unpredictable. So depending on your application being a static one (Google maps) or a dynamic one (a game), lazy loading may or may not be a good idea.

If the use can wait, you can safely split your images in different tiles and loading them on demand.

If it's a game, you'd better preload everything before it even starts - at least preloading a single level, but I don't know if it contains levels, we haven't even been told if it's a game :)

Solution 3:

If it's not something that needs to respond instantly, What you might do too, is use a server script to pull up whatever piece of the larger image you need, so instead of relying on pre-sized tiles, you could create an image, set it's source to

'imageSliceScript.php?x=whatever&y=whatever'

then draw that to the canvas, or just leave it as an image. That way you're only getting the piece of the image you need at that moment, and never have to deal with an issue like you viewport being across multiple tiles at the edges.