Saturday 3rd May 2008
by Sajith M.RLook at the given image carefully …
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
Here the fully red star is created by:
<img class=”rating icn_star_full_19x20png“ alt=”“ 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 icn_star_full_19x20png”
See the style sheet:
.icn_star_full_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)
Tags: amazing, idea, images, master image, youtube
Found your site on google, couple searches, Bookmarked!
Congratulations for the brilliant blog posting! I found your post very interesting, I think you are a brilliant writer. I added your blog to my bookmarks and will return in the future. I want to encourage you to continue that marvelous work, have a great daytime!
i use Youtube to watch Taylor Swift videos. I always watch movie clips on Youtube. What an awesome site. ‘
I love watching videos online specially on Youtube. There are lots of music clips, movie clips and instructional videos on Youtube. I love em all.
jajaja
http://s.ytimg.com/yt/img/master-vfl136487.png
Wow, that is absolutely amazing. Its a fantastic idea…
I might give it a go!
Thanks for the article
Thanks for sharing this; your input is appreciated and has made me change my opinion slightly. About the 3rd paragraph though, could you expand on that a little? I’m a bit confused about what you mean (so maybe others are too).
This method is also promoted in the Yahoo Dev’s top ways to speed up your website. It’s weird though they optimized their http requests so much while their source code is in many places so unoptimized. http request must be a big issue when sites get a lot of traffic.
Very nice site!
http://training.cvc4.org/pharm1/14189/4.html
How i may contact admin this site? I have a question.
iijiivei
Hi
I am trying to call the mysql stored procedure from the php code given below
query($sql1);
while ($data1 = $query1->fetch_row())
{
echo $data1[0].”\n”;
$sql2 = “call getCapitals(\”".$data1[0].”\”)”;Deutschland
//SQL which does the same thing:
//$sql2 = “select concat(country, \”, capital: \”, capital) from countries where country like ‘”.$data1[0].”‘”;
$query2 = $mysqli->query($sql2);
while ($data2 = $query2->fetch_row())
{
echo $data2[0].”\n”;
}
$query2->free(); // unsuccessful attempt to clear the results and get the next SP going
}
?>
Once i Execute the code i am getting the following result
Result:
Deutschland
Fatal error: Call to a member function fetch_row() on a non-object in C:\wamp\www\SMS\Smart\Test\Test.php on line 27
I think the problem is that the stored procedure calling is occurring only once.
Could you please help me to solve this problem?
Thanks in advance
Pradeep
This technique is called CSS Sprites. It reduces http requests. Its an optimization technique for very large sites.