Contents
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
Images maintain their aspect ratio, but are contained within a specific rectangle.
Thumbnails can be boxed (and aligned in the vertical-center):
… or not boxed (and aligned to the top):
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)
Images get automatically cropped into a square, here are some examples:
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:
Chase Jarvis actually forces all thumbnails to be cropped in a 3:2 aspect ratio:
This obviously doesn’t bode well for vertical images (or when the focus is off-center):
3. Masonry/Waterfall grids
Images form equal columns, maintain their aspect ratio, and are all resized to have the same width. Examples:
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:
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
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:
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:
When DeviantArt switched to a justified grid, they gave a couple of solid arguments:
- Bigger thumbnails (so more emphasis is placed on the art)
- 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:
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.
