I have a set of about 10 monotone icons 25x25 or less. Which has better performance:
1) Embed them in CSS with data URIs
2) Load them as a font (IcoMoon, etc)
Loading as a font seems like it might be less beneficial because it makes an http: call, unless I... 2b) Embed the font files themselves.
I've been using IcoMoon for the last month on this project, but it's a bit tedious if I need to make changes to the SVGs and reupload to the app. The CSS is also quite a bit messy when dealing with fonts vs. images. It seems like I might save headache with base64 encoding the SVGs and be done with it.
So what would you say is the best way? Or an alternative to those? I'm optimizing for Webkit, Mozilla and IE8+.
It depends™.
It seems like data URIs are slower on mobile, but icons less than 1KB can have better perf when embedded. It also depends on how often the images are used per-page — data URIs apparently have to be decompressed each use, so if you’re using them many times a page that might affect performance.
Unfortunately no one seems to have compared data URIs and @font-face icon fonts for mobile performance yet. Ideally, do some real-world RUM testing and publish your findings ^_^ If you do, please also check embedding an icon font in CSS as a Base64-encoded data URI :D
Finally, there are some Grunt plugins that can automate the workflow for you, and using [data-icon]
-style embedding for the icon font decreases the CSS mess (attr() is supported in IE8+).
PS Sorry for the ramble, I want this info too…