How to make a great thumbnail

Last Updated: Nov 28, 2012 08:05PM PST

The role of your thumbnail is to graphically epitomize the entirety of the contents it represents, while setting the tone of your website as a whole — conceptually, visually, and stylistically. In other words, it must look great even if the content it represents

does not.

Communicate a single subject — The original thumbnails were religious works of art, called icons; a symbol or image that represented something of great significance, communicating one thing clearly and precisely. By keeping your thumbnails visually and conceptually simple, your representational power will increase accordingly.

Well-defined edges — The edge is like the frame around an artwork; it informs you where the art ends. Obscure artifacts along the borders call unwanted attention to themselves and distract the eye with details, which hinders the image from being regarded as a whole. Ensure that the edges of your thumbnail are clear and high in contrast.

The art is the interface — On Cargo, your website runs in a browser window; not inside a “web design.” In other words, the content itself becomes the interface, using thumbnails as your site's main navigational devices; functionally and visually. Treating them as such greatly increases the relationship between content, form, and function in your website.

Don't skimp on quality — Thumbnails are relatively small graphics, giving you some leeway in regards to image quality, so there's not really an excuse for heavy JPG compression artifacts or less than perfect image resolution, which rapidly deteriorate the overall feel of your website. If you're using Photoshop's Save for Web, exporting thumbnails at 100% quality is no problem.

The increasing importance of context — On Cargo, you're essentially curating a solo show of your own work. The more thumbnails you add, the more you define the overall look & feel of your site. Try making screenshots and fine-tune new thumbnails in the context of the whole.

Thumbnails need design too — Approach the design of your thumbnail as you would all of your work, so you may want to apply the same ambition, technique, and philosophy that went into the work it represents. For example, if your thumb has a different aspect ratio than the poster it represents, consider designing a version of the poster that works within the dimensions of your thumbnail.

Reduce to the Max — Your thumbnail is one of many elements on a viewer's screen. Try to eliminate whatever detail you can so that it becomes as much like a single “object” as possible. Reducing the amount of detail contained in your thumbnail contributes to a more direct user experience.

Looks vs Brains — It's clear that the thumbnail needs to visually represent the content, however, the accuracy in this respect does not need to be at the expense of the attractiveness or esthetic quality of the image. One could say that it's equally, if not more, important for your thumbnail to look good than to literally embody what it represents.

—

Notes

If you save an image from your graphics application at the same size (or smaller) as that of your Cargo thumbnail size setting, Cargo will not touch the file or launch the cropping tool: it will simply put it in place. This method ensures complete control over the quality of your thumbnails.

If you're saving images out of Photoshop, it sometimes helps to add a little bit of sharpening, since most of the time you'll be downsampling images from a large size to your smaller thumbnail size. Try something like this:

Filter → Sharpen → Unsharp Mask

Amount: 65%

Radius: 0.5 pixels

Threshold: 0 levels

Another great trick is to apply the Unsharp Mask filter, then Undo it, and then select Edit → Fade Unsharp Mask, which lets you play with a kind of gradual redo. (Sharpening should be the last modification before saving your image.)