Today I am releasing my first ever open source package, Thumbsnag, on GitHub.

Thumbsnag came about during my development on SimpleGifts and I figured it would be a great opportunity to give back to the community I have built my career upon.

So what is Thumbsnag?

Simply, Thumbsnag will process a given HTML document for representative imagery. It uses a combination of OpenGraph tags and body image analysis to determine what images best represent, or “visually describe”, the current document.

How are you using it on SimpleGifts?

On SimpleGifts we allow users to input suggested gift items to their wish list. Part of that entry can include a URL where buyers will find the item for sale. To pretty up1 the design and improve the experience we really wanted to include images of the actual items.


Having the user input or upload an image is far too tedious and so we really wanted to automate that task. Thumbsnag will process the page, filter out images that don’t qualify as a great fit, and return a set of all image candidates. Easy!

Moving forward

It’s a bit open as to where I will take Thumbsnag moving forward, but it will definitely be based on real world usage.

In initial testing I have found that it is still finding less than optimal images in its result set (ads, logos, etc.). I believe there’s some more work to be done here in analyzing context of the image before allowing it to be the returned. For example, sidebars will rarely contain an image that should qualify as “representative.”

Additionally, I’d like to add in more meta information to each image result returned so that a developer can use some of their own logic to pick the best image for their specific application. If there are 5 images returned for a page, it would be helpful to know where they came from in the document, their dimensions, and maybe even something like a calculated quality score.

All said it was really cool to go from concept to code to releasing to the public. Thanks to all of you whom have done the same!