Which is faster in regards to loading time, unicode or img?

I’m creating a comparison table in html that I’m going to use on a wordpress site. It will have about 50 rows and 5 columns.

In about 50 % of the cells there will be either a check-mark or an x-mark.

Read More

My goal is to optimize the table for loading speed

I’m in the blue about if I should use a low sized image of each, and then put it into each cell of the table. Or use unicode, i.e = ✔ and = ✖

In case I use unicode I also will put in this (or similar):

<td id="x01">&#x2716</td>

Then I will put in the id in a css file.

#x01 {
    color: #ff6969;
}

I will use a similar approach for the check-mark.

My question here is really: which is the best practice?

I also looked into Font Awesome at github but I’m not sure whether that wordpress is the best place to use it.

Thanks in advance for any help regarding this matter.

Related posts

Leave a Reply

2 comments

  1. The following shows the differences between unicode vs images for bullets:

    http://nadeausoftware.com/articles/2007/11/latency_friendly_customized_bullets_using_unicode_characters

    It seems to me to be fairly negligible either way. Unicode seems faster but we are talking so marginal its likely unrecognizable.

    Latency
    Img: 50 rows @.0011 = .055 seconds
    Unicode: 50 rows @.0005 = .025 seconds

    I would think loading 50 rows of data plus the 2 hundredths of a second difference for the image vs unicode would hardly be the best way to save load time… If you are creating your table dynamically or running some algorithm to compare records from say a database I would be far more concerned with the indexing and query you would be using.

  2. I’d voted for unicode, only if you can find all the symbols you need, this site is helpful – http://www.nice-entity.com/

    There isn’t any problem to use Font Awesome with WordPress, but you have to load the entire library of Font Awesome, even if you only use a few icons. You must be interested in this web app – https://icomoon.io/ it allows you to pick only the icons you need and generate the customized web font pack, to speed up your page loading time.