https://github.com/stophecom/icon-paint-performance

Simple icon paint-performance test setup
https://github.com/stophecom/icon-paint-performance

Last synced: about 1 year ago
JSON representation

Simple icon paint-performance test setup

• Host: GitHub
• URL: https://github.com/stophecom/icon-paint-performance
• Owner: stophecom
• Created: 2014-01-09T15:14:45.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2014-01-10T17:06:01.000Z (over 12 years ago)
• Last Synced: 2025-04-01T17:09:14.495Z (about 1 year ago)
• Language: CSS
• Size: 2.99 MB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Test Paint Performance with 1'000 / 10'000 Icons.

![Setup](img/results/test-setup-m.png)

#### Versions

- 1 SVG Inline `` (used [iconmelon](http://iconmelon.com/))

- 2 Icon Font (SVG, Woff, TTF - used [fontcustom](http://fontcustom.com/))

- 3a SVG Background `background-image: url('path/to/icon.svg')`

- 3b SVG Background Data `background-image: url('data:image/svg+xml;...')`

- 4a PNG Background `background-image: url('path/to/icon.png');`

- 4b PNG Background Data `background-image: url('data:image/png;...')`

- 5 WebP Background `background-image: url('path/to/icon.webp');`

### Results

It's really hard to compare paint-performance in general. (Mostly just visual) For now I only tested in Chrome, as it is the only browser which allows you to track this kind of information.

Still, to get universal results is almost impossible as the performance depends on so many factors. My results can roughly be summarized as the following (take these results with caution):

#### Chrome 32.0.1700.72 beta

Display __10'000__ Icons

- Inline SVG and Icon Font rendered fastest

- PNG, WebP via `background-image` rendered approx. 33% slower

- SVG via `background-image` rendered approx. 100% slower

##### 1 SVG Inline

![SVG Inline](img/results/chrome32/1-paint-time.png)

##### 2a Icon Font (SVG)

![Icon Font (SVG)](img/results/chrome32/2a-paint-time.png)

##### 3a SVG Background

![SVG Background)](img/results/chrome32/3a-paint-time.png)

##### 3b SVG Background Data

![SVG Background Data)](img/results/chrome32/3b-paint-time.png)

##### 4a PNG Background

![PNG Background)](img/results/chrome32/4a-paint-time.png)

##### 4b PNG Background Data

![PNG Background Data)](img/results/chrome32/4b-paint-time.png)

##### 5 WebP Background

![WebP Background)](img/results/chrome32/5-paint-time.png)

#### Chrome Beta 32.0.1700.94 (Android 4.4.2)

Display __1'000__ Icons

- PNG, WebP via `background-image` rendered fastest

- Inline SVG and Icon Font rendered approx. 50% slower

- SVG via `background-image` rendered approx. 150% slower

##### 1 SVG Inline

![SVG Inline](img/results/chrome32m/1-paint-time.png)

##### 2a Icon Font (SVG)

![Icon Font (SVG)](img/results/chrome32m/2a-paint-time.png)

##### 3a SVG Background

![SVG Background)](img/results/chrome32m/3a-paint-time.png)

##### 4a PNG Background

![PNG Background)](img/results/chrome32m/4a-paint-time.png)

##### 5 WebP Background

![WebP Background)](img/results/chrome32m/5-paint-time.png)