Wednesday, May 20, 2009
I just saw the background image of YouTube and was amazed to discover that it has all the commonly used graphics on a single image. I don't know how many people have actually noticed that or used this technique, but it looks brilliant to me. Its superb to fit in so much in a png image which is less than 10KB and then using CSS to display the appropriate parts of the image for each div block.
It is common to use such images for hover buttons, where you just change the position of the image for hover effects. This ensures that you don't have to wait for the hover image to be loaded to see the effect. But, I never ever thought of encompassing all my graphic objects in a single image file and then displace the image as required using the background-position property in CSS. It would definitely make the page load much faster than having to download a plethora of small images which are scattered all around.
The YouTube background includes the header logo, the favorite rating stars, the button backgrounds, small buttons, gradients etc. Most of the images in this common background are used in all pages of the website and thus, its a good choice to group them all together as a single image and reduce the overall page load time.
If you want to view the background image, right click on a static background area (the gray header near the search box is a good choice) and select (in Firefox) view background image or (in IE) save background image. I'm sure, you would be surprised to see the huge png image. Alternatively, you might just want to visit this link to view the image.