|
| menu |
| main links all items rss feed Topics: coding games goombas.org horror judgement life minutiae music rants software |
| fool. | |
|
| images on youtube | ||
Posted 2008-01-03 20:02:35 by
Jim Crawford
If you view the page source for a Youtube video, for instance the Smush “music video” for Starsitter, you'll find that nearly every img element on the page links to the same transparent single-pixel GIF. So what's the deal? Here's an example: <img src="/img/pixel.gif" alt="" class="arrowRight" height="16" width="16">By itself, this creates a 16x16 square of empty space. The trickery is in the style definition for arrowRight: background: transparent url(/img/master.gif) no-repeat scroll -423px -20px;Take a look at master.gif. They're setting that mother of an image as the background image of the 16x16 space, and aligning it such that the only 16x16 pixels showing are the ones showing an arrow pointing right. I imagine the reason they're doing this is to cut down on the bandwidth and time overhead the browser usually incurs by retrieving each image in a separate HTTP request. Another advantage is that putting all the images in the same GIF allows the compression algorithm to find redundancies across all the images. For the record, disadvantages include: the additional bandwidth and time overhead incurred by the lengthier code required to refer to each image, breaking the site for browsers that don't support CSS or don't support it properly, and the ongoing cost of implementing and maintaining a more complex solution. Only the last disadvantage is even a little compelling in this instance, and I'd imagine it's easily offset by the coder morale boost of working with such a neat trick.
|
| comments |
| re: images on youtube |
| Posted by Anonymous (sugigrl) on 2008-01-03 20:15:40 I vote neat! |
| no subject |
| Posted by Anonymous (Adam) on 2008-01-04 16:30:56 It's actually a pretty well-known trick, called "CSS sprites". It can also be used to do stuff like image rollovers without javascript, by using the :hover attribute with a different background-image style, but the browser support for :hover is not as consistent... |
| no subject |
| Posted by Anonymous (Rusty) on 2008-01-05 12:47:42 Those tricksy youtubers! Speaking of which, do you happen to know a good way to actually download a youtube video? I've seen software that can supposedly do it but I don't really trust it. |
| re: no subject |
| Posted by Jim Crawford
on 2008-01-07 18:53:56 There were a dozen or so web tools that downloaded youtube videos. I used to use whichever of them came up first in a google search for "download youtube videos." A couple months ago, I noticed that none of them worked any more. Maybe somebody's solved the problem by now, but I haven't done the research to find out. |
| add a comment |
| what's this? |
| This is Jim Crawford's blog. Details and contact information.
On Twitter: @mogwai_poet |
