Faster loading of images

Question

Hi am new to the concept of web technology and i have two questions.

Q.1) Suppose i have a image of size 400KB and i want to load it on my webpage. I want to know which among the following step is faster

a) Load the entire 400KB image at once.

b) Have 4 tiles of the above image( 100 KB each) and load them one by one.

Q.2) If there are 4 images to be loaded on a webpage, is it good to request for each image at an interval of time or to request for them at once.

Please bear with me if the questions are silly.

Answer 1

1. Having several images bundled into one is called "sprites" - see here, and is normally reserved for smaller, icon-like images and is rarely used for large background and content images.

2. There is also a process of creation of images, GIF and PNG ones, that allows you to control perceived or real performance - interlaced and progressive images:here and here.

Answer 2

When you have multiple images in a page, the usual approach is to use image sprites. Its always better to limit network traffic to minimum, which includes lot of delay.

Answer 3

1. Optimize the images for web - 400kB is very high, even if you split it into 4 parts. Consider users who would open your site on mobile devices using 2G or other slow networks. Applicable only when site/app is for enterprise use within office premises.

2. As suggested by Hanish - use Sprite images - check example on W3Schools.

3. Use CSS effects where possible instead of images. I understand that this is not possible with images for banners or Ads but still may help to reduce overall network usage.

Answer 4

Even crazier is embedding the image in the html as base64 text. This does increase the actual image size to more than the image itself but then there NO requests necessary.

http://www.base64-image.de

Answer 5

Although your question isn't really about programming per se, I'll humour your question.

With situations like this it is always best to build something that works, and if speed is an issue in practice, to find out what that issue is by timing things accurately. There are many posts on Stack Overflow that deal with timing, so I won't go into depth here because you should research this.

That said, consider that for most people on the internet 400KiB is a miniscule thing to worry about. (While I'm typing this I'm downloading a torrent at 4.5MiB/s, and streaming music in a separate tab - I know I'm luckier than the rest of the world, but this is illustrative of the fact you shouldn't worry too much about this). I would strongly encourage you to do some profiling before worrying about this.

The simplest way to do this is on a fresh page-load with your browser of choice with its developer tools running (usually F12 or Ctrl-Shift-C). Here is how the timing of loading today's guardian.co.uk looks in Chromium:

However after all that, the common advice is to minimze HTTP requests if possible as each one introduces latency to the page load. This is particularly the case if the assets are retrieved from separate domains where extra DNS lookups add yet more latency.

So:

Profile!

Then minimise HTTP requests and compress your images.

To answer your specific questions

1a: Loading the entire image at once, will technically take less time than the same-sized image divided into 4 because of the delays introduced by making extra HTTP requests. However, the browser may not render it until it is fully downloaded (rarely an issue in practice).

2: No. Unless you are doing something very fancy, you let your browser and OS schedule the timing of your requests.