Question

Many many sites uses this technique (facebook, google as well)

For example, open facebook.com

Save this page (not as *.MHTM but HTML with images) (mean login page)

It saves:

facebook_files(dir)
facebook.html(file)

Then inside the folder, You can see one GIF file which containts all primary images for the page.

The question is: How to read many chunks inside one file??
And how to call this approach?

Answer 1

Those images are called “sprites”. Take a look a this article on them.

The basic idea is that whenever you want to use an image from the sprite, you have an element which just shows part of the big sprite image. So each “image” in your page is actually a div with this image as the background, just offset so the right part shows through.

The main advantage is that your page needs fewer requests and so loads faster.

There are some tools online that make using sprites easier. I haven’t used any of them so can’t recommend one, but using a tool would save you a lot of work.