Should panoramic images be part of the HTML5 specification?

Noodling thoughts. The humble <img> element is one of the oldest parts of HTML. It allows you to put a static image in a document. Later revisions allowed for animated images - like GIFs. And the <map> element made parts of the image clickable.

But what about interactive images? Like panoramas and photospeheres?

Here's a 360° image. You can drag it to see all around.

That uses the fantastic Pannellum JavaScript Library. At the moment, there's no native way to represent that in HTML. If you use an <img> you'll get a flat, equirectangular image like this:
360 view of the inside of the concert hall.

Here's two possible ways I've just thought of...

(These are just sketches of ideas - think of them as a starting point for user research, rather than a completed product.)

Extend <img> to be like <video>

An HTML5 video element looks something like this:

<video controls=false autoplay=true>

That tells the browser to start playing the video, but not to show any playback controls in the UI. Panoramic images could use something like:

<img panorama=true photosphere=false xdegress=270 src="...">

That is, this image is a panorama - but not a sphere - with 270 degrees of movement on the horizontal axis.


<img panorama=true photosphere=true startx=120 starty=330 src="...">

Display a photosphere, make the initial view start at the following co-ordinates.

Use <picture>

As I've said before, I'm no fan of the <picture> element. I think it is inconsistently designed compared to other parts of HTML5.

Perhaps we could use it like this:

  <source type="image/jpeg;panorama=true" srcset="pano.jpg">
  <img src="flat.png" alt="your browser doesn't support panoramics">

That gives the MIME type of the image an extra parameter. Obviously, you'd need to put in other configuration options something.

What next?

A quick search didn't show anyone working on this as a proposal. That normally means either I'm not looking in the right places, or no one else is interested.

If you think this could be developed into a future standard, please let me know!

Share this post on…

9 thoughts on “Should panoramic images be part of the HTML5 specification?”

  1. I don't know, but it would be cool if it tied in with an audio spec that allowed synchronised 360 sound recording as part of the pano creation:-)

  2. If having it be part of the spec would avoid having js libs make silly, often arbitrary decisions on how to handle client variations I’d be all for it.

  3. You mean 360 equirect images like the one in the example? Would you want to support 3D too, would this git in with the WebXR device API?

  4. says:

    I built something similar a while ago. Uses WebVR. Seems overkill to use an API that accesses VR hardware for a simple use case like this. (or any JS library for that matter)

  5. says:

    Whichever way is more future-proof including 3d as an option.
    Also what about a projection="equirectangular" attribute, since again, future-proofing?


What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">

Discover more from Terence Eden’s Blog

Subscribe now to keep reading and get access to the full archive.

Continue reading