I Want To Load Multiple Images Very Fast On A Website, What's The Best Method?

UPDATE: This question is outdated, please disregard So.. my idea is to load a full manga/comics at once, with a progress bar included, and make sort of a stream, like: My page loa

Solution 1:

If you split large images into smaller parts, they'll load faster on modern browsers due to pipelining.

Solution 2:

ALTERNATIVE: Is there a way to load a compresses file with all imgs and uncompress at the browser?

Image formats are already compressed. You would gain nothing by stitching and trying to further compress them.

You can just stick the images together and use background-position to display different parts of them: this is called ‘spriting’. But spriting's mostly useful for smaller images, to cut down the number of HTTP requests to the server and somewhat reduce latency; for larger images like manga pages the benefit is not so large, possibly outweighed by the need to fetch one giant image all at once even if the user is only going to read the first few pages.

ALTERNATIVE: I was also thinking of saving then as strings and then decode

What would that achieve? Transferring as string would, in most cases, be considerably slower than raw binary. Then to get them from JavaScript strings into images you'd have to use data: URLs, which don't work in IE6-IE7, and are limited to how much data you can put in them. Again, this is meant primarily for small images.

I think all you really want is a bog-standard image preloader.

Solution 3:

You could preload the images in javascript using:

var x = new Image();
x.src = "someurl";

This would work like the one you described as "saving the image in strings".

Solution 4:

Spriting

Just have a look how facebook does it: http://b.static.ak.fbcdn.net/rsrc.php/z3JQK/hash/11cngjg0.png

One image that loads FASTER than series of small images. To display the icon you simply create a div with fixed dimensions, and move the background inside it. Your div works as a viewport for the big image. You use background-position to move to appropriate part of the image. Everything else is hidden.

Different domains

Something you probably didn't know - Internet Explorer has a limit of connections per server. You can read about it here: http://support.microsoft.com/?scid=kb;en-us;183110&x=17&y=11 (here are exact numbers).

What it means - if user is using IE7, he will be able to load ONLY 4 (or 2) files at the same time from your server regardless his internet connection speed.

To speed things up, you could create few subdomains: server1.mydomain.com, server2.mydomain.com, server3.mydomain.com etc - and then user can download many files a lot quicker, because you use different hosts to serve different files.

Solution 5:

As done, I start loading the imgs(the URLs are stored on JS var) from my server, one a time (or some faster way) so I can make a sort of progress bar.

Your browser already downloads the HTML first, that's how it knows to load any JS/images you reference. You are trying to invent something that already exists.

Just make sure your manga is made up of lots of images of a known size, which you specify in your img tags. Most browsers have some sort of progress bar to show that it's loading resources for you. You're not going to make loading large images faster unless you improve either the speed at which your server serves them, or your user's internet connection, or you compress them to make your image files smaller (likely at the cost of image quality).