Why does YouTube use a 1px by 1px transparent image for the icons on their navigation menu? They then set the final icon as the background image of the 1px image using css.
Why do they use that technique?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Why does YouTube use a 1px by 1px transparent image for the icons on their navigation menu? They then set the final icon as the background image of the 1px image using css.
Why do they use that technique?
I think they’ve done this to improve performace.
You see, they’ve given the tag a background using css, the background is done using a sprite to reduce HTTP requests and improve the speed at which youtube loads, the claim that they’ve done this to prevent people from stealing their images is utter rubbish.
The next part I may find a little difficult to explain, so I’ll try my best, sorry if I lose you here:
The image tag was used as there has to be something actually there to give a background to, and having an image there makes sense (as there is actually an image there, it’s just generated using CSS not HTML), for example they could easily have put a div tag there, but it doesn’t make more sense to put a div tag there than an image tag (even if the img they place there is a 1px by 1px empty image)
They could have also done it to improve consistency, for example they’ve also used this on various other parts of their site, see the youtube logo top left, same technique used except with alt text, here the blank image is needed because otherwise the alt text would be displayed there (you can get rid of the image using firebug to see what I mean); here the image tag is used to improve accessibility without compromising speed (you get the speed of sprites and the accessibility of an tag’s alt attribute)
Hope that makes sense