Clown Car Technique for Responsive Images
An inventive, albeit bleeding edge, solution for responsive images utilising an SVG files' in-built support for media queries.
The Clown Car Technique is a new approach to handling images in responsive web design. In the absence of an official, web standards defined solution (the best of which at present seems to be Florian’s Compromise) the web design community is left searching for solutions that can be used now.
The Clown Car Technique is one such solution, which makes use of an SVG file and its’ built-in support for media queries. The technique uses an empty SVG that doesn’t contain any actual graphics (referred to as the “car”) but applies a raster background image to the SVG via media queries (referred to as the “clowns”).
Whilst the technique is amazingly inventive as I read the article I increasingly felt it was such a bleeding edge solution I would not feel comfortable implementing it on our own projects. For the time being we’ll continue to handle responsive images as best we can in the absence of an ideal solution.
