I am curious about the pros and cons of using a CSS image sprite for my social media icons vs. using a custom UI font.
Which one will offer superior performance in terms of page load speed?
It seems to me that a CSS sprite may be better- as there is only a single HTTP request & the file size can probably be kept smaller than a custom UI font for social icons.
Anyone have insight on this?
On
One of the two techniques will have a slight 'superior performance in terms of page load speed', but most of the time project requirements and development time far more important than load speed.
Number of requests: Both techniques need CSS and load one file. You need to generate multiple fonts, but only one font is requested and used.
Amount of CSS: More or less the same. @font-face is more initial code but less applying the icon.
File size: More or less the same, but depends on icon size. Bigger icons need bigger image sprite. Fonts use vectors and will stay the same size. I looked up a font with 300 glyphs it is a 25KB WOFF (the SVG is double the size). A font containing one glyph is 4KB. To compare the two I should render all glyphs black on transparent in a sprite. But at what icon size?
Render speed: Negligible.
Cache: Negligible. There are CDNs for icon fonts.
I think both techniques score the same. The differences are negligible. Off course one will be slightly faster than the other. But you should measure that in your specific situation. Anyway, we know multiple requests are the bottleneck. And both fonts and sprites only need one request.
Color: Sprites can use all RGBA colors in the same icons. Fonts only have one color. You can apply effects to make fonts more special (and these effects will match the same effects on other page elements).
Shape / size: Image sprites need duplicate icons if you want to apply different sized icons (e.g. high resolution displays). Fonts can be applied in any size.
Rendering: Image sprites render pixel perfect. Fonts get applied by render engines, resulting in differences per platform. Windows utilizes the built in hinting instructions. Creating good hinting requires a lot of skill.
Use area: Image sprites can also be used by other page elements (backgrounds). Since fonts are applied as text, they have a smaller use area.
Maintainability: The icons need to be one pixel bigger. This kind of change makes you generate the sprites and update CSS. With a font changing just one font-size value will get the job done.
Development time: Above points are important design decisions when creating your own icons. That said, most developers just use the technique they feel comfortable with. Or pick one of the may sprites or fonts out there.
To come back to your question. Do you want to use multiple colors in a single image? Than an image sprite is the way to go. I would include each icon as separate Base64 image. It keeps maintenance easy. Although this will come at a cost: Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).
I'm curious what your considerations are. Looking forward to your comments!
On
1) Icon Font glyphs are going to render faster than image sprites.
2) An Icon Font can also be smaller in k size than a comparable sprite sheet if you use Fontello (free, and easy to use) to create a custom font that only includes the glyphs you are going to use in your app / site.
For example, for a recent project I created a TrueType font that contains 8 glyphs, weighs less than 8kb, and the icons scale beautifully up or down; sharp and clear.
Easily apply colors, try 80% opacity, etc.
Css sprites do improve on load times but with the speed of the internet the average viewer would never even notice the difference. This website has a full breakdown of what they are and what they do, comparisons and more. http://css-tricks.com/css-sprites/
Hope this helps :)