Thumbnail previews of web sites: an overview

Conference presentation given 8th March 2007

Why thumbnails?

• Foreknowledge is good (i.e. Giving users an idea of what will happen when they click on a link)
  • Foreknowledge in our links database: without and with
  • Foreknowledge in our question bank
  • YouTube versus AltaVista Video Search
• and thumbnails can be a kind of foreknowledge
• … but thumbnails can be misleading foreknowledge, which is bad.
• The dumbest of dumb syndication. Not relevant to blind users, mobile device users etc. Maybe it would help to have the images written in by javascript so they don’t appear on low-featured devices.
• Making a page of links look nice, colourful. Getting oohs and aahs: Economics Network links to central banks
• Thumbnails are not useful for discovery because you don’t learn about the site except how “professional” it looks, and that’s not a reliable indicator of the quality of its educational content.
• Thumbnails are useful for re-discovery Imagine that your user wants to re-visit a site she previously found useful, but doesn’t remember what it was called. Or imagine your user looking at a gallery of sites or of learning objects and trying to find which ones she hasn’t already tried. Is it better to read a page of text or glance at some thumbnails? (Obviously you provide the thumbnails along with a proper description.)
• NB: Legal hot water? You are making a derivative work of someone else’s creative work. Probably not an issue with the Deutsche Bundesbank site but potentially disastrous if you are working in visual arts.

Services

Thumbshots.org

Free database of (120 x 90px) thumbnails of home pages of major sites (from the makers of the thumbshots.com for-pay service). This is the service we’ve been using with our Intute records (like the central banks list above).

URL of thumbshot of Friends of the Earth home page is just http://open.thumbshots.org/image.pxf?url=http%3A%2F%2Fwww.foe.co.uk%2F

Alexa Site Thumbnails

For-pay service hosted by Amazon

Snap Preview Anywhere

Free service: large previews activated by JavaScript. Bloggers find it irritating. Apparently it stops the link itself working in some browsers, and some users assume the “pop-ups” are ads. Page creator has fine-grained control over which links have the preview. You can brand it with your own logo but you also get the Snap logo (thanks for explaining that Vince)

Google Preview

Not an official Google service, but adds thumbnail previews to Google and Yahoo search results (see how search results look). Combination of browser plug-in (for FF or IE) and server that captures and sends out the thumbnails. If a search result is not the home page of a site, you will be usually shown a thumbnail of the home page. Misleading foreknowledge!

Disadvantages of these services: You won’t yet get previews of every page in your link database. Some people have their browsers configured so that images included from a different site are not shown. You have no control of the “freshness” of the thumbnails. E.g. the service might update them weekly and you might want them updated daily.

WebSnapr

Free service: feed it URLs via HTTP GET. Choice of four thumbnail sizes.

Disadvantages of this: WebSnapr branding in images. If site is not in database, you get a standard image while the site is queued for processing, so you might have to do clever scripting to make sure you do actually get an image of the intended site.

So how do you roll your own thumbnail server?

Creating your own thumbnails

These are available for free unless stated:

On Linux servers

khtml2png Requires a Linux server with K Desktop Environment and a few software libraries (a standard install of Red Hat was suitable). This is what we used.

Here are some of the thumbshots we made.

Matt Biddulph’s script requires PyGtkMoz, Gtk and the Python Imaging Library. Altered version (plus discussion of implementation) by Ross Burton.

WebShot: a Windows executable that works from the command line, so can be incorporated in PHP on Windows servers.

On Windows servers

HTML To Image: a Windows executable that does batch processing. Costs: US$50

Other

Pearl Crescent Page Saver: Firefox plugin that can be scripted from the command line. Probably need pro version which is US$15.

Technical Issues

• Rendering of Flash animation: should you show what it looks like immediately after loading, or some time after?
• Starting up a separate screen: “Welcome to K Desktop Environment” splash screen appeared in some thumbnails! Solution: introduce a delay into the script.
• Sometimes an error would cause the window to disappear. Needed a couple of extra lines of code to check for this.
• What about errors? No systematic way to identify these with khtml2png except by file size. Do thumbnail generation at the same time as link check?

Here’s part of the perl code as image I used to store thumbnails locally. The script that builds the database browse tree would then check for the existence of the relevant thumbnail and include it.

Other Issues

• Not giving a broken image link to users if the thumbnail is not available. Services such as Thumbshots, SNAP or WebSnapr give a placeholder image.