Responsive images using the video element
Whilst at the beyond tellerand conference the , I was listening to Mat Marquis talking about responsive images and the current progress on getting a method to implement them into the HTML5 specification. It was during this talk that I had an idea on how they might be implemented now, without any need for a JavaScript polyfill.
Warning! This article contains a horrible hack.
It is important that you heed this warning because what I’m about to tell you is probably a BAD IDEA.
In his talk, Mat mentioned the media attribute that can be added to the source element of a video element. This allows you to specify a media query for each source, which will only be loaded when that media query condition is met. I wrote about this myself back in in responsive HTML5 video.
This works for audio an video files now. These are media. Images are media. Therefore would it work for images?
It turns out that no, it doesn’t. If the file that the source element’s src attribute points at isn’t a video file (I used a video element for testing since it has a visual component and audio doesn’t), the browser refuses to display it.
Fair enough I thought.
And here’s the hacky horrible bit: what if I converted the images to video files, and tried that?
So I found a free online file converter and used it to convert my images to WebM video files. I then added a simple media query to one of the source elements and gave it a go.
<video>
<source type="video/webm" src="african-elephant-small.webm" media="all and (max-width:36em)">
<source type="video/webm" src="african-elephant-med.webm" media="all and (max-width:48em)">
<source type="video/webm" src="african-elephant-large.webm">
</video>
Bingo it works!
Check for yourself (the example uses WebM files only).
This is no surprise really, since the source files are now valid video files. So now only the appropriate image will be loaded depending on the whether the media query is matched or not, which is part of what we want from a native responsive images solution.
But of course this is horrible and one shouldn’t convert images to video files as not only do the resulting video files have a larger filesize than the images themselves (although this could probably be optimised), you also need to have at least WebM and MP4 versions for different browsers, and it just feels wrong and goes against the idea of doing things “properly.”
Nevertheless, it’s still interesting!
Addendum –
There are some interesting comments below, which of course point out that this “solution” has no alternative text, and also reiterating the fact that the images will also need to be provided in MP4 format.
Mike MacKay mentioned the possibility of using the .htaccess file and MIME types to spoof the content type. I tried this put it didn’t work as the browser still expects the media to be encoded correctly.
What the .htaccess file could be useful for is defining a specific file extension for such image-video files should you take the terrible decision to use this solution at all!
We could, for example, define two new file extensions: .vwpic (for WebM videos) and .vmpic (for MP4 videos) in the .htacess file:
AddType video/webm vwpic
AddType video/mp4 vmpicRenaming our video-image files to have the appropriate extenions, and then we could set the code to something like:
<video>
<!-- Sources for WebM video -->
<source src="african-elephant-small.vwpic" media="all and (max-width:36em)">
<source src="african-elephant-med.vwpic" media="all and (max-width:48em)">
<source src="african-elephant-large.vwpic">
<!-- Sources for MP4 video -->
<source src="african-elephant-small.vmpic" media="all and (max-width:36em)">
<source src="african-elephant-med.vmpic" media="all and (max-width:48em)">
<source src="african-elephant-large.vmpic">
</video>
Again I’m not saying that this is a good idea, but it can be done.
9 Responses
neat. Biggest downside – no alt text.
Pingback: Bruce Lawson’s personal site : Reading List
Very true.
I always liked that feature of video and that is where picture is a 1:1 mapping. Another downside of course is environments that don’t have webm, so you need to convert your images to mp4 and webm.
Of course a well done video could be an image sprite of sorts, too, without the large bitmap size of sprites. As you can jump to a certain time in the video this could be used.
I am quite sure though that lots of video elements would be brutal in terms of performance.
Very cunning, I would say. Readers’ don’t try this at home.
Pingback: RICG at TPAC 2012 | Responsive Images Community Group
Wow, great idea, i’m waiting the future of responsive images.
Pointless. Even the ability to download an image is lost. What is it all for?
Thanks for taking the time to post such a constructive comment Apathetic.
You can in fact still download the image, albeit in video format.
As for what’s the point, I never claimed there was one, but it’s a bit of fun, showing that things are possible even if this isn’t the correct way to go about it, showing how thinking differently can come up with an idea, maybe someone will take something from this and have a better idea. Who knows?
Either way, it’s a lot more constructive than trolling other people’s articles.