4 ms·
> In the second, the raster images are background image. Only the required image is downloaded. The author neglects to point out that every image will waste a
by benjoffe 13y ago
> In the second, the raster images are background image. Only the required image is downloaded.
The author neglects to point out that every image will waste a http request downloading the svg file so this is going to give poorer performance than having the logic in your css (perhaps he considered it too obvious).
- instakill 13y ago*She
- duskwuff 13y agoSurely this can be solved by embedding the SVG in a data: URI?
- neilk 13y agoOr embedding it directly into the HTML - almost any browser that can show SVG can also handle it as markup. But, the benefit of this technique (as far as I can tell) is decoupling, and any kind of embedding re-couples the data. Maybe in an acceptable way, if you can do it at a deploy step. It depends on what the use case is.
- michaelbuckbee 13y agoThat would reduce the number of HTTP requests to one (but would also have the side effect of pulling in ALL of the different sized files)
- mistercow 13y agoWhy? It's not including the images in the data URI, just the SVG. That should act identically to downloading the SVG as a separate file (minus the extra HTTP request), unless I'm unaware of some very dumb quirk.
- estelleweyl 13y agoincluding 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 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.