all items
rss feed

/ \
Ugh, stop twitching
images on youtube
coding 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.
[link to this] [See more on “coding”]

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
Only anonymous comments are available for now until I get the user system up and running again. Not many people were logging in anyway, so enh.
Permitted HTML tags: <b>, <i>, <u>, <tt>. Also permitted is the <q> pseudo-tag which is meant to delimit quotes from other messages.
To prove you are sentient, please type "sentient" into this box

what's this?
This is Jim Crawford's blog. Details and contact information.

On Twitter: @mogwai_poet

recent comments
ISO 9001 Certification in Bangalore (Anonymous on eye-tracking)
3d printing services (Anonymous on troboclops - hate edge)
packers and movers vadodara (Anonymous on troboclops - hate edge)
Hoters (Anonymous on may 2014 microblog digest)
Office Installation and Setup Guide - Octa One Networks (Anonymous on may 2014 microblog digest)
QuickBooks Customer Service (Anonymous on may 2013 microblog digest)
HBR Case Study Solution (Anonymous on may 2014 microblog digest)
packers and movers (Anonymous on may 2014 microblog digest)
packers and movers (Anonymous on may 2014 microblog digest)
packers and movers (Anonymous on may 2014 microblog digest)
packers and movers (Anonymous on may 2014 microblog digest)
packers and movers (Anonymous on may 2014 microblog digest)
packers and movers (Anonymous on new smush album)
packers and movers (Anonymous on new smush album: a smush before smush began)
packers and movers (Anonymous on ds-10)
Comments RSS