Home > Archive >  2009 >  January >  10

How to include a thumbnail in the HTML of a page

Saturday, January 10, 2009 by Dave Winer.

A picture named reagan.jpgIf we had a registry for emerging web standards, we would have added one to it yesterday. The emerging format has been proposed by Facebook, supported by Digg and ratified by FriendFeed, and yesterday -- Scripting News. The format allows a photo-oriented web site or individual web page to include a thumbnail, so that when it's referred to by a site such as Digg or FriendFeed the representation may include that thumbnail. Permalink to this paragraph

I support this because: 1. I have such a website. 2. And I believe that sites like Digg, FriendFeed, Twitter are more attractive and useful when they include little bits of color graphics. It's the same principle that guided Apple to create the Macintosh in 1984, almost 25 years ago, when the current form of user interface was character-based. Permalink to this paragraph

To support this format, include a <link> element like this: Permalink to this paragraph

<link rel="image_src" href="http://static.flickrfan.org/afp/thumbnails/2009/01/10/trwas2108818.jpg" type="image/jpeg" data-width="150" data-height="122" /> Permalink to this paragraph

And some other metadata, as explained on the Digg site. Permalink to this paragraph

View source on this page to see a real-world example. Permalink to this paragraph

I tested it with both Digg and FriendFeed and found that it works, although there at least one place where FriendFeed could support it, but they don't, yet.  Permalink to this paragraph

Update: James Holderness says this came from Facebook, and Digg says so on their site, but the page they link to doesn't seem to say anything about thumbnails. I searched and found a citation here, but he doesn't link to any Facebook spec. I think it's fair to say Facebook supports it. I'll test now. Result: Yes! Here's a screen shot of how they appear in my Facebook profile. So they must be added to the list, which I will do now. 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/10/2009; 2:59:10 PM Pacific. "It's even worse than it appears."

Click here to view blogs commenting on  RSS 2.0 feed.