How to Use a Panorama Photo on Your Website


Panoramic photos have skyrocketed in popularity since the introduction of iOS 6. People can now take a panoramic shot with their smartphones to capture events, locations and images they couldn’t otherwise take. It probably isn’t surprising to learn these images now appear on websites, engaging users by bringing them into another world.

A panoramic photo — also called a wide-angle photo — is the perfect choice for images of landscapes, large manufacturing buildings and even office space. The image’s size varies but is almost always wider than what you’d normally use for a website image. Because of this, you’ll have to treat them slightly differently than you would a standard size photograph.

Here are six ways you can use panoramic photos on your website to add interest and draw site visitors into your world.

1. Show Your Product in Action

One way you could utilize panoramic pics is by taking your product to the streets and showing it in action. For example, if you sell sneakers, you might shoot a photo with a person sitting on a ledge, dangling their legs down while wearing the shoes. Think about similarly unique ways to highlight your product. Because you’ll have a wider range, you’ll need to fill the lens with an interesting background and put something in the foreground that works with the scale.

A. Testoni uses a wide-angle with a focus on a couple’s lower half, featuring A. Testoni shoes. Note how the photographer sets the tone with the Italian-looking sidewalk and the perfect highlights and shadows. This detail blends into the background and makes the objects pop. Even the colors chosen for the shot are done so with an eye to detail that grabs user attention.  

2. Tell a Story

When you have a limited scope for your photos, you may not be able to tell the full story of your product or your brand. However, with a 360-degree view or a wider angle, you’ll naturally capture more of the scene. Think about how much more powerful a shot of your entire shop floor is than an image of one single machine. Perhaps you want to take a picture of the fields where natural ingredients for your products are grown. Use panoramic photos to tell a more in-depth story about your brand. 

3. Show Examples

One unique way to utilize panos is to take several images that, when put together, create a strong impression of what your company does. This is your chance to showcase your best work. This tip works particularly well for companies that offer large-scale projects, such as those in building and construction industries. 

Canopy Solutions offers a series of panoramic photos, with a slideshow that automatically flips to the next image. Site visitors are drawn to this eye-catching display of the company’s different canopies, such as ones for the outside of an office building, a restaurant patio area, a shopping center and an outdoor parking space. Each image is unique and shows a different aspect of what the company does.

4. Create a Video Slideshow

A video allows to tell a unique story. You can use all panoramic shots or just a few panos mixed with standard photos. You may need to do some fancy resizing or start small and then zoom out for full effect. For example, if you want to introduce people to your brand, you might include shots of some of your employees, the building where you all work or even a series of panoramic images that show your brand’s growth over time.

5. Add Interactivity

Not only is the outside world clamoring for your site visitors’ attention, but your competitors may be as well. Anything you can do to engage them when they land on your page ups the chances they’ll stay.

One way to make a site interactive is by adding 360-degree panoramic photos. Allow the user to zoom in on the picture, zoom back out, play around with angles and experience your world in an almost virtual reality (VR) experience. 

Gucci has an interesting take on the 360-degree panorama. As you scroll down, a vintage Gucci handbag comes into view. Text appears. The bag rotates so that you can see it from different angles, such as each side and the top. It’s highly interactive and keeps the user moving through the page. 

6. Utilize TouchPanView

On sites such as Google Maps, you’ve probably noticed you can use a pinch-and-open technique with your fingers to zoom in and out of an image. You can create a similar feature with a panoramic photo on your own site. The feature is fully compatible with mobile devices, which many of your visitors likely use. For those who don’t use touch screens, you’ll want to add a mouse option for them to interact with the image.

Turn Your Site Into a Work of Art

Adding high-end panoramic images takes your web design to a new level. Instead of the same old photos aligned next to your text, you can create an interactive wonderland where the text appears as the user moves their mouse or hovers over certain areas. With a little creativity, you’ll have a site that people want to visit and share with their family and friends. 

Lexie is a UX content strategist and web designer. She enjoys copious amounts of coffee (with a dash of milk) and walking her goldendoodle. Check out her design blog, Design Roast, and follow her on Twitter @lexieludesigner.

How to Use a Panorama Photo on Your Website

Don't have an account?
sign up

reset password

Back to
log in

sign up

Captcha!
Back to
log in
Choose A Format
Story