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.
<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.)
<img> to be like
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.
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.
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!