CODEWITHSUNDEEP
htmlcss
user2952265
user2952265

Reputation: 1630

PNG or CSS icon - What has greater performance?

I'm dealing with tiny unicolored pixel icons for a website. What solution will have greater performance, a sprite sheet with all icons and theirs hover states or icons that are built with pure CSS.

example CSS

PNG

my_incon.png

CSS

.icon{
       width:  20px;
       height: 20px;
       Background: red;
       ....
     }

Upvotes: 2

Views: 341

Answers (2)

Justice Erolin
Justice Erolin

Reputation: 2879

CSS will be of greater performance for the following reasons:

  • Little network overhead. Each PNG would have headers that need to be downloaded.
  • Browser "paint". A PNG would require the browser to paint the pixels after analyzing the file. CSS wouldn't need to as it would just be rendered out to the browser.
  • Simultaneous downloads. Each PNG would be downloaded on a separate HTTP call, but CSS is downloaded once and rendered out.

Upvotes: 1

Shadi Alnamrouti
Shadi Alnamrouti

Reputation: 13258

CSS sprite will have a greater performance. If you test your website using http://gtmetrix.com/ then you will find that less calls to the server will boost the speed of the website and I guess CSS sprite has lesser calls to the server.

Upvotes: 0

Related Questions