Home > Archive >  2009 >  January >  9

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. Permalink to this paragraph

A picture named panetta.jpgAt 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. Permalink to this paragraph

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.  Permalink to this paragraph

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. Permalink to this paragraph

So here's the new template... Permalink to this paragraph

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

You can see an example by viewing source on this pagePermalink to this paragraph

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. Permalink to this paragraph


Recent stories:

A picture named dave.jpgDave Winer, 53, pioneered the development of weblogs, syndication (RSS), podcasting, outlining, and web content management software; former contributing editor at Wired Magazine, research fellow at Harvard Law School, entrepreneur, and investor in web media companies. A native New Yorker, he received a Master's in Computer Science from the University of Wisconsin, a Bachelor's in Mathematics from Tulane University and currently lives in Berkeley, California.

"The protoblogger." - NY Times.

"The father of modern-day content distribution." - PC World.

One of BusinessWeek's 25 Most Influential People on the Web.

"Helped popularize blogging, podcasting and RSS." - Time.

"The father of blogging and RSS." - BBC.

"RSS was born in 1997 out of the confluence of Dave Winer's 'Really Simple Syndication' technology, used to push out blog updates, and Netscape's 'Rich Site Summary', which allowed users to create custom Netscape home pages with regularly updated data flows." - Tim O'Reilly.

Dave Winer Mailto icon

My most recent trivia on Twitter.

© Copyright 1994-2009 Dave Winer Mailto icon.

Last update: 1/9/2009; 9:39:52 PM Pacific. "It's even worse than it appears."

Click here to view blogs commenting on  RSS 2.0 feed.