estelleweyl

Thanks. Will look into that next week

including the data uri for the svg only makes sense. to include the data uri for all the images would be the same weight as downloading all the images plus about 10%.

The method at this link: http://estelle.github.io/clowncar/bgonly.html only does two http requests, the svg and the image used. We can bring that down to 1 by using data URI for the svg logic only.

In which way does it break user experience. Would like to know so I can try to address that and figure out a work around.

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.