Everything is Broken

I was just idly playing on the youtube site, and I discovered a neat trick which their designers used. All the images from the page (with the exception of the video previews) are held in a single image, which is then re-positioned on the page using CSS to create the illusion of several images. To see the big image, click on the grey bar at the top for example and select View Background Image. Or you can just click on this link:

http://s.ytimg.com/yt/img/master-vfl55102.gif

Now check out the upload button for example. You can see this is made up of a section of the long yellow bar, and then the yellow lozenge at the top of the image overlaid to create the left and right rounded corners of the button. Very cool.

This approach means that the site only ever has to load a single image for all the design, and consequently the pages have a much quicker load time. Genius. Why didn’t I think of that …

This entry was posted on Sunday, September 14th, 2008 at 11:04 am and is filed under General IT. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.