Responsive images using the video element

←Back to listing

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 vmpic

Renaming 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.