Choosing the right image gallery format for your website

 

Classic slideshow? Thumbnail grid perhaps? When it comes showing images on a website, there are options to consider. We’ve looked at the benefits of all these techniques so you can decide which format will best display your images.

 

The Vertical Stack

By far the simplest way of getting images onto the page, the vertical stack is the technique of choice for the modern blog. Images are as wide as the column there in, so you’ll usually get a nice big image.

vertical-1.gif
 

Interface

There’s nothing more natural and immediate than scrolling down, so this method is as accessible as they come.

Portrait images

You might run the risk of portrait images being taller than the screen your using, so you might not see the entire image. Limit the maximum width of your column to remedy the issue.

vertical-2.gif
 

Best for

If you only have a few images, too many and the endless scroll can get a bit dizzying.

The Slideshow

Don’t fancy the long scroll? One of the benefits of a slideshow gallery is that they require no scrolling whatsoever. You can keep your gallery nice and tidy and all in one screen. Slideshows can introduce some movement to your page, especially if you make use of fade or slide transitions. Beware automatically rotating slideshows: they can be annoying to some.

 

Interface

You’ll need to make it obvious to people that there’s more than one image to see. So make sure you add some visual clues – thumbnails below or navigation controls will work well.

Portrait images

A fixed height slideshow is perfect for landscape images, but portrait images will be smaller. An adaptive height slideshow can also be a bit unruly and disorienting.

 

Best for

Landscape images, and keeping your interface in a single view.

The Carousel

A close relative to the regular slideshow, the carousel gives users a bit more of a clue that there are multiple images to flick through. There are a few ways it can done, but usually you’ll see a glimpse of the next/previous image at each side of the main image on display.

carousel-11.gif
 

Interface

A lot more intuitive to use, and good if you don’t want navigation controls covering up your image.

Portrait images

Again, it depends on whether it’s fixed height or not, but portrait images could be quite small.

carousel-21.gif
 

Best for

Landscape images with minimal navigation.

The Grid

The grid layout is perfect for quickly searching through a large collection of images. Click on any Image and it will pop-up at a larger size.

grid1.gif
 

Interface

It’s a much more useful interface for browsing lots of images, as the eye can dart round the page and quickly move on.

Portrait images

Work equally well.

Best for

Showing a large quantity of only landscape or portrait images.

 

The Mosaic

The mosaic thumbnail grid has risen to popularity thanks to sites like Pinterest and for good reason. It’s a good way to show a mix of landscape and portrait images that can quickly be scanned by the eye. See it in action on the Pinterest website.

mosaic1.gif
 

Interface

Good for browsing lots of images.

Portrait images

Portrait images fit nicely in the grid and can be enlarged and shown at a larger size.

Best for

Showing a large quantity and mix of landscape and portrait images.

 

The Full-screen Takeover

Large pop up images have been around for a long time, and you can often see the page you left behind through some sort of transparent overlay. But there’s a growing trend for pop up galleries that take over the entire screen and feel much more immersive. See it in action on the Guardian website.

fullscreen1.gif
 

Interface

An immersive experience often including navigation controls.

Portrait images

Will be big!

Best for

Showing any proportion of image as large as possible.

 

How to decide

Look at the images you have to work with, are they all landscape, perhaps a 50/50 mix of portrait. You might have lots of images or just a few. Take a content first approach and choose a gallery that fits with the images you have.

We hope this will give you some food for thought when planning your next online image gallery!

WRB