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)
  • 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.


Free database of (120 x 90px) thumbnails of home pages of major sites (from the makers of the 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

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.


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


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.

2 Responses to “Thumbnail previews of web sites: an overview”

  1. danbri Says:

    “””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.”””

    I’m tempted to argue the contrary, though it depends on how much weight you put on “indicator”. I’d guess, despite many good looking sites that are full of nonsense, that there is some-correlation between effort having gone into looks, and effort having gone into content. Especially if the site has already passed some basic level of folly-filtering (eg. was blogged by a friend, or under a trusted tag, or linked from a trusted catalogue).

  2. Martin Poulter Says:

    Thanks Dan,
    I was just trying not to over-sell the value of thumbnail previews. I think they’re valuable, even though I can see people arguing that you don’t learn anything from a tiny, downsampled picture. I think it’s useful to know in advance if a site has c2007 web design or c1997 web design.
    If you think I should sell this angle more, then that’s a positive that I welcome.

  3. tomgidden Says:

    Personally, I’m not a fan of these thumbnails, but that’s just me! Anyway, if you’re generating your own using something like khtml2png, it might be worth checking out this post on my blog:

    Sure, there’s not much you can do to improve legibility at such a small size, but I find it can improve thumbnail quality slightly on standard LCDs, while being barely perceptible on a CRT. Unfortunately, it also limits the thumbnail to non-lossy formats like PNG, as I assume JPEG cruftiness will spoil the effect. I do my avatar photos, favicons and other similar thumbnails with it, and I think it helps.

    (I’ve also just realised that my sole contributions to The Ancient Geeks is blog spam. Whoops)

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: