How to Embed Panorama Images on a Website


Capturing a photo has gone to another level these days, people instead of a normal shoot they prefer to capture 180 degree images using Panorama feature. Just tap the camera icon choose Panorama under Options or open the specific app that allows you to capture panorama images, and pan the camera slowly from one side to another to create a high-resolution panoramic photograph. Here is a sample panorama picture captured by camera.


Here I will show how to embed these kind of large Panorama images on website without re-sizing it. Well I think you know that normally we can’t do that, we need to take some help from other third part vendor such as or Google Map. These panoramic photos are around 8000 x 1500 pixels in size and thus too big to fit normal webpage. You can either re-size the photo to the lower one for embedding or use one of the following method to embed them at their original resolution:

How to Embed Panorama Images on a Website

Method 1: Using powered by Microsoft

Upload your panorama image to Flickr (SkyDrive or any image from internet) and paste the image URL inside and tap on create new). This is a Microsoft service that adds a beautiful viewer to any high-resolution image that you can easily embed into other websites. The viewer has a full-screen mode and is also compatible with mobile and touch-screen devices.

Method 2: Using Google Map

You are very familiar with Google Maps and would not be nice if you can use the same interface to embed panoramas instead of maps? Fortunately, the Google Maps API allows such creative uses and you can build a Google Maps based viewer for your panorama in seconds.

Use Google Maps to Embed Large Images

  • Download the free Google Maps Image Cutter app – it is a zip file so just extract it a folder on the desktop.
  • The app will cut any large photograph into tiles that are later displayed inside a Google Maps. Double-click the GMapImageCutter.jar file to open the app. Jave must be installed on your PC.
  • Choose File->Open and select any large photograph on your hard drive. Leave the Tile Count as default and click the Create button.
  • You will now see an HTML file and numerous small images (tiles) in a sub-folder that has the same name as your original image. Upload the entire folder to your website and embed the HTML file in your web page using the IFRAME tag.
<iframe width="800" height="600" frameborder="0" 
 scrolling="no" marginheight="0" marginwidth="0" 

Method 3: Using Java Script

Here the Java Script comes to the role, below are the sites that allows you to embed panorama photos in your webpage without the need flash. Visit them to get the ides how to use them because every website has different way to server the facility.

  • TouchPanView – Lets you fit any large image into a giving div and visitor can use the mouse or touch gestures to interact with the panorama. IE and mobile friendly.
  • Panorado JS – This is an HTML5 Panorama viewer with tons of options to customize the viewer. Free for personal use.
  • Panorama Viewer – Another jQuery based panorama viewer but one offers auto-scroll in the horizontal direction. No option for vertical dragging.
  • Cyclotron – Simple jQuery plugin for adding panoramas with support for horizontal dragging but no on-screen controls.

After reviewing all the methods, i would suggest you to go for, as there is nothing like limited bandwidth, no licensing restrictions, supports high-resolution images of virtually any size and more. Drop a comment mentioning which method you have selected and why.