CODEWITHSUNDEEP
htmlimagecssfonts
Anup Mishra
Anup Mishra

Reputation: 149

What I should use font icons or sprite images?

What I should use font icons or sprite images for better performance? What will be load faster and light weighted?

Upvotes: 2

Views: 981

Answers (2)

L. Merlo
L. Merlo

Reputation: 381

there are two crucial points where I feel icon fonts can have an advantage:

  • Overall file size
  • Internet Explorer support

When you have a set of icons that you’d like to use on a given project, the larger the set of icons, the more likely an icon font will have a smaller overall file footprint.

Talking about performances, during a recent test I made on a set of about 30 icons, the icon fonts can reach a boost of about 240% compared to sprite images. Also, icon fonts work as far back as IE6.

On the other hand, vector icons are resizable up and down without losing quality, extra sharp on retina displays. It can also support multi-color icons.

I recommend this post for any further reference.

Hope this could help, L.

Upvotes: 2

OverCoder
OverCoder

Reputation: 1603

You use font icons or sprite images when you have a lot of small separate images, you basically bundle them into one image so one request is done to get all the images.

Typically those are used for small icons for buttons, or icons in the navbar, and similar stuff. For example StackOverflow's editor buttons on the top (the bold, italic, etc.) probably use font images for that:

SO editor buttons

Imagine the case where you have had to load something like 10 different images just for that bar of buttons, that would be very inefficient.

Another example is emojies. There are thousands of emojies out there, imagine if you have to load each one of them in a separate request.

Currently with the modern websites, usually font icons are used much more than sprite images.

This also reduces the server load as well. It's all for efficiency purposes, and because we use small images to represent buttons instead of text sometimes.

Upvotes: 1

Related Questions