Visual Showcase: 4 Rules for Website Image Galleries

web development tips

For better or for worse, the average folk no longer go to the internet to read, unless you count diatribes in 280 characters or less as reading material. Much as I’d hate to admit it, videos and images, thanks to YouTube and Instagram respectively, is where the world’s attention and time is now mostly spent. That’s not to say that texts are a thing of the past, they’re just simply not enough in a world where reading is no longer a common habit.

This is of course a long-winded way of saying that businesses have to mix up images and videos in order to keep their customers occupied. Displaying text on website is mostly an uncomplicated affair but uploading and publishing multimedia contents on your website require some considerations for optimum results. Right now though, we’ll be specifically discussing the issue of image displays in web development.

Image galleries as visual presentations

On e-commerce websites and design firms, image galleries tend to play a prominent role. It’s common on e-commerce websites for example to feature multiple images of the product being sold and for design firms, the ability to showcase their portfolio is a key marketing strategy. While technically it is possible to use other platforms like Instagram to showcase your work, forcing potential customers to switch between your website and Instagram account isn’t ideal and generally, it’s best to keep them contained within one place.

It’s with this knowledge in mind that businesses have to figure out the best way to display multiple images within their website. One way of approaching this is to implement an image gallery. As e-commerce customers lack the ability to physically interact with the product itself, image galleries can be indispensable in substituting that level of intimacy between customers and your products, but only to a certain extent. To help get you started, here are 4 guidelines you could follow when developing an image gallery for your website.

Use gesture navigation for mobile devices

In large desktop and/or laptop monitors, screen real estate might not be much of a consideration but remember that mobile internet traffic is now just as big, if not bigger, than desktop internet traffic. While it’s true that mobile phone screens are now getting bigger and bigger, they’re still small and you need to account for this by dedicating every inch of the screen for your images.

Instead of using navigation buttons, make use of gesture navigation such as swipes for mobile devices. Left and right should be used for previous and next images. You can also be creative with this by including other functionalities using gestures. For example, why not try inserting captions with a swipe down? Or displaying thumbnails for all of the images within the gallery using a swipe down? Just make sure that your users are informed of all of these possibilities before they open the gallery.

Try to make it easy for users to go back to the main site

This actually happened to me once before, I was in the middle of browsing an image gallery when I wanted to go back to the article but I simply couldn’t. This kind of mistake is a big no-no and businesses need to make sure that switching between the image gallery and the main website should be a seamless experience. For desktop, making the close gallery button more prominent should be easy while for mobile devices, using gestures as stated above could be an alternative.

Properly consider the aspect ratio and orientation of each images

Again, the important thing to consider here is the orientation for mobile devices. Landscape images fit perfectly with widescreen monitors but for the most part, smartphones are in portrait mode by default. The conundrum here is whether you should still display your images in landscape orientation, thereby requiring mobile viewers to tilt their phone to properly view the images, or you crop them to fit into the width of a typical phone screen.

If it’s the former, you need to be consistent and avoid portrait images as much as possible. I’ve been in a situation where I have to constantly switch my phone’s orientation in viewing a series of images and I can tell you firsthand that it wasn’t a pleasant experience. If you’re going with the latter, make sure that you’re not cropping any important details from your images. Go through each of them individually to make sure you’re not cutting off anything important.

Use high-quality images

This one’s a no-brainer but I’ve seen enough pixelated images to know that businesses still misses this point entirely from time to time. If you’ve got no high-quality images to show for, there’s no need to implement an image gallery. Using an image gallery only to showcase low resolution images is akin to displaying a collection of tweets in a hardcover book, the packaging is just too good for what’s inside.

Closing thoughts

Keep in mind that the image gallery deals exclusively with presentation, the content itself, which in this case comes in the form of images. A proper image gallery ensures that your images won’t be misrepresented in the transition from offline to online but it won’t be any help to you if you don’t have any quality images in the first place. Here’s a final tip to close things out, focus on making great images first, whether from photography or design, and then you could start your work on an image gallery.