Look at the given image carefully …

Youtube Master Image

Did anybody see the above image anywhere ? The Answer might be No. But you might see small parts of this picture. The amazing picture’s name is Youtube Master Image. The Youtube Website contains this single image only, and it uses part by part for different occasions with css ( sytle sheet) property background image and *scroll *position.

You know the whole youtube website is created with a single image !!!

For example, you see the rating pictures just below the youtube video

Youtube Ratings

Here the fully red star is created by:

<imgclass=”rating icnstarfull_19x20pngalt=”style=”vertical-align: top;src=”http://s.ytimg.com/yt/img/pixel-vfl73.gif/>

Here the src is merely a 1 pixel image. The actual star lies in the style class “rating icnstarfull_19x20png”

See the style sheet:

.icnstarfull_19x20png { transparent url("http://s.ytimg.com/yt/img/master-vfl38353.gif") no-repeat scroll -373px -38px }

Here scroll -373px and -38px exactly points the red star in the master image.

And for youtube logo, it uses same background image (master image) with another scroll location. Scroll is set to 0px for logo

Like that, all the images, thumbs up , thumbs down, border, scroll back, previous next buttons etc etc are displayed from this single picutre.

Amazing Idea Right ?

(Post your comments please)