How to Embed Panoramic Images in WebPages?

Most of the Smartphone today are having at least 5MP of camera in built. They produce very high resolution images. There is no problem when you are uploading them to social media because they have in built mechanism to reduce the image size and fit those in to webpage.

When you are embedding those images in your own webpage, situation is different. One option is manually re-size them and insert. But in that case image will be having lesser definition. Another practical way is, you can insert a thumbnail and display the full size image upon clicking.

What if you are dealing with a panorama image? Most of the Android phones were having panoramic image capturing for years and recently iOS also joined the club. They have weird aspect ratio and it’s quite difficult to fit in to a webpage. Reducing resolution is also not an option because in that case viewer won’t be able to enjoy it.

There is an amazing image viewer which is giving solution to all the above image embedding problems. Further it’s letting you to embed ebooks and even web pages. Let’s take a closer look in to Zoom.it brought to you by Microsoft.

how-to-embed-large-images-in-webpages-4389201

Getting Started with Zoom.it

  • Go to Zoom.it home page.
  • Upload your image or eBook to web storage space. Best suggestion is DropBox public folder.
  • Now copy the link to image and past it in text box in Zoom.it home page, then click create.
  • Then it will fetch the image, convert it and display in Zoom.it image viewer.
  • There you can zoom it in and out, see it full screen and home button will reset the layout.
  • You can share this as a link or embed it in your webpage using options in the page.

How to Embed Zoom.It in WordPress Blog Post?

This will work just fine for most web pages. But if you are a WordPress blogger like me, you might face difficulties when embedding given script in your post. Sometimes it’s getting disappeared etc. For that here is a good solution.

  • Download openzoom-zoomit WordPress plugin from here.
  • When you are embedding Zoom.it image in your post use below code.
  • [zoomit id=”6VoqM” width=”auto” height=”400px”]
  • Here zoom.it id is the highlighted part in share URL. http://zoom.it/6VoqM

Now it will work just fine. If you need to alter the width and height, change parameters in zoomit tag. Remember guys, this will override functions in your native image gallery, you may won’t like it. Try this and tell us what you feel about zoom.it by dropping a comment below. Here is an example before i go.

Tags: #Blog #Microsoft #Web