goombas.org
menu
main
links
all items
rss feed

Topics:
coding
games
goombas.org
horror
judgement
life
minutiae
music
rants
software
fool.
 _-
 oO
 |/
/|
/ \
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”]

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
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.
name:
email:
subject:
body:
Preview
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
no subject (Anonymous on boxing: a history)
panchang (Anonymous on may 2014 microblog digest)
Packers and movers in Gurgaon (Anonymous on may 2014 microblog digest)
QuickBooks 24/7 Support Phone Number (Anonymous on may 2013 microblog digest)
no subject (Anonymous on may 2013 microblog digest)
no subject (Anonymous on boxing: a history)
QuickBooks Technical Support Phone Number @1844-640-1482
(Anonymous on may 2013 microblog digest)
phone number for quickbooks support (Anonymous on may 2013 microblog digest)
no subject (Anonymous on boxing: a history)
Accountancy (Anonymous on may 2013 microblog digest)
QuickBooks Technician (Anonymous on may 2013 microblog digest)
no subject (Anonymous on boxing: a history)
quickbooks support (Anonymous on may 2013 microblog digest)
Loved the game (Anonymous on boxing: a history)
no subject (Anonymous on may 2013 microblog digest)
Comments RSS