What are drawbacks of using data URI instead of sprite images?
ccsprite, css, http, less
Solution
If any image changes, the entire css file has to change. This breaks HTTP cache. With a sprite image, the css file itself would be served from cache, and only the changed image would have to be downloaded again.
It may be better to generate a css file only for the data:URI images, and another for the regular CSS stuff. This way, regular css updates don't require re-downloading the data:uri images.
Second problem is with foreground images, those that are served with `<img>` tag in the html. If it is a frequently used image, it will unnecessarily increase the size of the html.
Problem
Consider this conditions for my website: I don't support IE8 and below so browser support is not a problem. I also use gzip that would avoid data overload in CSS in cases that I copy and paste data URI images in my CSS file. I only have one CSS file that is generated by LESS. To make it easy, I use LESS variable for each image data URI. - I put images variables in a separated LESS file to keep my codebase clean With all this I am still not sure if it's best approach for loading images. Loading small images with this approach reduces number of HTTP requests and also we don't have to maintain a sprite image. Is there any drawback in this approach you can think of?