Should panoramic images be part of the HTML5 specification?
HTML5 images standards web · 9 comments · 400 words · read ~266 times.
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: 
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:
HTML
<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.
Or
<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:
<picture>
<source type="image/jpeg;panorama=true" srcset="pano.jpg">
<img src="flat.png" alt="your browser doesn't support panoramics">
</picture>
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!
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:-)
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.
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?
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)
There is some prior art, @SamsungInternet for GearVR was experimenting with an extension to video for displaying Equirectanangular 2D and 3D videos appropriately:
<video src=”/360.webm" type=”video/webm; dimension=360;">
samsunginter.net/docs/video-360
@fernandojsg and @superhoge have interest in this space, too, and did some experimentation. It's a big thing we hear creators asking for. blog.mozvr.com/custom-element…
Whichever way is more future-proof including 3d as an option. Also what about a projection="equirectangular" attribute, since again, future-proofing?
It would make my life a LOT easier. That said, the krpano library is superb for this.
There is prior art on the old Samsung Internet for GearVR:developer.samsung.com/internet/gear-…
In general it's something the Immersive Web groups would be interested in since this would ideally have some kind of XR integration.