As browsers are finally starting to agree on CSS3, many web developers are rubbing their hands in excitement over their new, image-less web designs. They’re clean. They’re scaleable. They’re powerful.
With border-radii, box-shadows, font-faces and the like, now we can convert our designer’s beautiful design into lines of code, instead of packing our pages with img tags.
Two related questions:
- Is there a point when the stylesheet(s) get so large that they actually [negatively] affect performance to a noticeable degree?
- In a web application with lots of icons (in the range of 16px to 48px size), how noticeable would the performance boost be by using an icon font?
Is there a point when the stylesheet(s) get so large that they actually [negatively] affect performance to a noticeable degree?
It’s just common sense really. If your stylesheet(s) become quite large then that will have just as negative an effect as having lots of images. In general terms a stylesheet (with lots of CSS3 and fancy bits) will be faster to download than a load of images.
I’d recommend taking it case-by-case and deciding whether CSS or images provides the better solution taking into account download speeds, browser support requirements, desktop vs mobile and so on.
In a web application with lots of icons (in the range of 16px to 48px size), how noticeable would the performance boost be by using an icon font?
Unless you were talking about hundreds/thousands of icons then there really isn’t going to be a hugely noticeable difference in performance. Remember with icon fonts you’re also probably having the user download some custom fonts.
Again it’s really a case of using what is best for the current project.
I don’t think there is a definitive answer to your question but hopefully what I’ve said clears it up a little for you.