The Clown Car Technique for Responsive Images

Re:The Clown Car Technique for Responsive Images by estelleweyl on Sunday April 21, 2013 @05:27PM (#5586472)

The clown car technique -- used for foreground images in your HTML documents, works best when the SVG contains only background images . If you use <image>, all the images in the SVG will be downloaded.

Yes, the SVG does "waste" a single HTTP request -- you get two http requests: one for the SVG file and one for the image it downloads that matches the media queries within the SVG. However, you can use a data URI within your HTML to eliminiate the call to the SVG file. An example of this (in CSS) is here: http://jsfiddle.net/estelle/ZHrb2/

The reason I called it Clown Car technique was because we're stuffing a whole bunch of images into a tiny little file.

I am looking into this technique not just to solve the <picture> RWD image issue, but also as a way to manage images. We currently separate content (html) from presentation (css) from behaviour (js). I like the idea of managing my assets separately as well. Thinking this helps along those lines.

[ Parent | on HN ]

Re:The Clown Car Technique for Responsive Images by sbouafif on Monday April 22, 2013 @01:32AM (#5587941)

I like the idea of separating the content from the presentation and the behaviour. But I'd really like to automate this.

Is there a way in SVG to concatenate strings? (I never really used SVG and can't find something on this in Google) .

Using JS I generally use the data attribute in html to set the image name and add _small, _big, _huge depending on the window size. The JS script will automatically set the right image. It's great but doen't work if there's no JS support.

[ Parent | on HN ]