Responsive images using the video element
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
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!
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.
.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
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.