Skip to content

The 4 types of thumbnail grids: what’s the best way to display thumbs on your photography website?

Photography websites usually display thumbnails on gallery pages, and on search results pages. But each type of thumbnail layout comes with its own pros and cons. If you want to display your image thumbnails in the best possible manner, read on to fully understand your options and to get inspired from other photographers.

Here’s a recap of the main thumbnail grid layouts:

 

1. Standard grids

thumbnail grid example 01 standard

Images maintain their aspect ratio, but are contained within a specific rectangle.

Thumbnails can be boxed (and aligned in the vertical-center):

standard thumbnail grid example 02

… or not boxed (and aligned to the top):

standard thumbnail grid example 01

This type of grid is usually preferred when you need to display some info underneath each thumbnail (filenames, captions, buy buttons etc.), although the other grid layouts can handle that too.


 

2. Fixed aspect ratio grids (usually square)

thumbnail grid example 02 square

Images get automatically cropped into a square, here are some examples:

square thumbs photo website example 01 square thumbs photo website example 02

Because of the fixed square layout, the entire grid looks much cleaner and more aligned. But you’re definitely doing a disservice to the images (because you’re not using their original aspect ratio).

The obvious example here is Instagram. Even though they now allow images for any aspect ratio, the Instagram profile grids still crop images in a square format:

square thumbs instagram example

Chase Jarvis actually forces all thumbnails to be cropped in a 3:2 aspect ratio:

fixed aspect ratio thumbs example

This obviously doesn’t bode well for vertical images (or when the focus is off-center):

fixed aspect ratio thumbs overcropping example

 

3. Masonry/Waterfall grids

thumbnail grid example 03 masonry waterfall

Images form equal columns, maintain their aspect ratio, and are all resized to have the same width. Examples:

masonry thumbnail grid photo website example 02 masonry thumbnail grid photo website example 02 masonry thumbnail grid photo website example 03

Vertical images appear larger, which is not ideal most of the times (especially since the majority of images are usually horizontal/landscape).

The waterfall layout has been made hugely popular by Pinterest:

masonry thumbnail grid photo website example 04 pinterest

 

Grids can be used not just for image thumbnails, but also for listing posts or products. The “Essential Grid” plugin (which is very powerful) supports waterfall/masonry grids. So does Envira Gallery.


The term “masonry grid”, then just know it’s a misconception, they’re usually just waterfall grids. A masonry layout would be similar to a brick wall (built by masons), there aren’t any image grids built this way.

So although “waterfall” would be more correct, the term “masonry grid” has become more popular, so be sure to search for this term when looking for a plugin.

 

4. Justified grids

thumbnail grid example 04 justified

This is my favorite type of grid: images maintain their aspect ratio, and are resized to have the same height. So it’s somewhat similar to masonry/waterfall, but the horizontal images get the spotlight. Vertical images get smaller instead. Examples:

justified thumbnail grid example 01 justified thumbnail grid example 02 justified thumbnail grid example 03 justified thumbnail grid example 04

Some platforms obviously don’t allow choosing a grid layout. But if you’re using WordPress, you’re in luck, there are plenty of plugins.

To build justified grids, this is the best plugin out there: Justified Image Grid.

One of its FAQ pages perfectly illustrates why a “justified grid” is better than a “waterfall grid”:

“The natural reading direction of most countries is horizontal, either left-to-right or right-to-left. When you tell a story with pictures, you do it in your reading order. For example, wedding photos. Can you imagine that in a vertical layout? How can you tell which image is next? There is no natural flow except a sense of infinity by scrolling and scrolling. Indeed, it’s good for galleries where the order is not important, that’s why it works so well for Pinterest and Tumblr. When you look at a JIG gallery, your eye movement is the same as during reading, it’s what your eyes are programmed to. Do you think it’s a coincidence that Flickr (the largest photo site), Shutterstock, Google image search, Google+, Google Photos, 500px front page all use this horizontal layout?”

The popular Envira Gallery allows you to create both Masonry/Waterfall and Justified image grids (demo).


Flickr, Google images and many other companies use a justified grid layout:

justified thumbnail grid example 05 flickr justified thumbnail grid example 06 Google images

When DeviantArt switched to a justified grid, they gave a couple of solid arguments:

  1. Bigger thumbnails (so more emphasis is placed on the art)
  2. The old/standard grid created uneven and irregular gaps between thumbs, whereas the justified grid uses more of the screen space. The compromise was that image details (title, metadata etc.) have to now be displayed on hover instead.

A few more examples of companies using justified grids: Getty Images, Alamy, iStock.

So I think we have a winner! :-)

 

Custom grids

Besides those 4 common layouts, there are exceptions.

These websites display images in a custom grid, with no particular alignments, with some images intentionally displayed larger than others:

custom thumbnail grid example 01 custom thumbnail grid example 02

 

Conclusion

So there you have it. If you have full control over your site layout (like you do when using WordPress and its full range of plugins), choose the thumbnail grid that’s best suited for your type of images. In most cases, the justified grid is the way to go.

Regardless of how your thumbnail grids look, don’t forget this is just “fashion”. The quality of your images matters more. Dedicate some time to edit down your portfolio and to properly sequence your images.

Off-topic or inflammatory comments may be moderated.
Please add VALUE to the web, thanks!
 

Level up your photography website
with the free guides & resources!

ForegroundWeb free resources preview

You'll get a free eBook (on photo website mistakes), many checklists and guides about improving your site's design and SEO, video recordings of website teardowns, podcast interviews, and more. Plus... fresh free articles, actionable tips and curated links from around the web - sent directly to your inbox (twice a week).