Bootstrapping thumbnails, revisited

Friday, January 09, 2009 by Dave Winer.

Update: After posting this, I learned of a Digg-authored format that does the same thing, and I've adopted it. I'm leaving the rest of this here to form a record, but the format it describes is not implemented. 

At the very end of last month I started a thread here about adding thumbnails to photo pages in such a way that web apps such as Tweetree, and others that can display graphics inline, can grab info about the thumbnail directly from the HTML of the page that the full image is displayed on. If we're going to have a future of graphics-capable Twitter-like services, or if Twitter itself is going to grok images, then thumbnails are not just nice-to-have but must-have. And a machine-readable way to link to them from the original HTML is needed. 

My first impulse was to create a <link> variant, but to do so would have meant adding width and height attributes. I could have omitted them, but that's ridiculous -- all image processing apps have that information at-hand, and if you don't put it in the HTML, then the client has to do an HTTP reference to get the data, and that's a waste of bandwidth. Better to put the info in one place rather than have N clients fetch it for themselves.  

However, Zach Beane objected that you can't just invent elements for <link>, so I took a different route and defined an XML namespace for a new thumbnail element. Later, Sam Ruby suggested that HTML allows for arbitrary attributes to be added where they make sense as long as their names begin with "data-". I didn't know about this. So I'm going back to the initial simpler approach and use a <link> element. 

So here's the new template... 

<link rel="thumbnail" type="image/jpeg" href="http://static.flickrfan.org/afp/thumbnails/2008/12/28/trpar2329681.jpg" data-width="150" data-height="87"> 

You can see an example by viewing source on this page. 

Update: Over on FriendFeed, Paul Buchheit, one of FF's founders, says that Digg has a format that does most of what I'm doing here. There are some weird things about it, like why specify the title in a <meta> element when HTML already has a <title> but I think I have to go with the Digg format. The philosophy: "One way to do something, no matter how flawed that way is, is better than two, no matter how much better the second way is." It's a corollary to Postel's Law, being conservative in what you send. I asked Paul if FF is supporting the Digg proposal.