Transparent PNGs are slow to load. We may be able to implement an icon font, similar to github and other sites, which is always loaded at the system level. If adopted across all apps, this should improve performance and responsiveness across the board. Initially I'll start with the dialer app and see if I can find any concrete wins.
I tried fontawesome, its font icon works fine with building blocks (in general case) http://fortawesome.github.com/Font-Awesome/ They take open license and provide many good tools for font icons. Demo: I've write some showcase with firefox building blocks that come with font-awesome icons http://ffos.ap01.aws.af.cm/public/ffosbb/index.html syntax: you can embed icon with <i class="icon-beaker"></i>
Hey Fred - Very nice demo! As part of this I think we'd need to get UX on board because we'd likely have to totally change the workflow. As a next step I think we should *try* to get some kind of benchmarks comparing a system font to normal images. Would you be interested in coming up with some benchmarks to see if this is a worthwhile goal?
searched some discussions about webfont vs png Icon fonts could speed up your page loading time by *14%* compared to images http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14 Evaluate tool: The post use 'google speed' and 'yslow' to test a web site load time with replacing img(650kb)/web font(11kb) The post shows some icon font advantages: retina ready, pixel perfect at every scale and styleable with css 1. scale to any resolution (looks good in high density displays, responsive, which support future version goals) 2. in a single file (Downloading a single file is much better for the user than having to download multiple tiny images) Ref: * font icons vs png icons http://stackoverflow.com/questions/12514236/font-icons-vs-png-icons * web font DEMO https://pictonic.co/#main-demo
another worth to check tool: that can bind some Icon fonts into a single file http://www.fontello.com/
Thanks for the info! I think we need to do some actual tests with gaia apps to see what kind of gain we would get. I should be able to look into this in the next week or so.
Ok, the perf numbers are in. I tested two bare-bones apps. App A was using an icon font, which was loaded into the system. App B used images. Each app had four different icons. App A constantly loaded ~395ms. App B constantly loaded ~420ms. (420 - 395) / 4 = 6.25. I would say that we would see a gain of about ~6ms per icon converted to a font. In addition to the increased ability of being able to scale the icons, I would recommend that we move forward with a more full implementation of this.
Attachment #726833 - Attachment is patch: true
One of the advantage as well is the advantage that if someone opt-in using them to look like the system and those are updated to fix some glitches they will automatically have the 'system' look and feel. Sounds a good thing to me.
Kevin, is this being considered in the upcoming Haida work?
Assignee: kgrandon → nobody
Priority: -- → P3
Whiteboard: c= , → [c= p= s= u=]
As far as I know, Arnau is doing some work with the status bar. Once that lands, we'll land it in other places. I think this is being tracked differently, and there may be other bugs - so we may want to close this one out.
Closing per comment 11.
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 901989
You need to log in before you can comment on or make changes to this bug.