{"id":17773132,"url":"https://github.com/stophecom/icon-paint-performance","last_synced_at":"2025-04-21T23:32:02.643Z","repository":{"id":13088849,"uuid":"15770070","full_name":"stophecom/icon-paint-performance","owner":"stophecom","description":"Simple icon paint-performance test setup","archived":false,"fork":false,"pushed_at":"2014-01-10T17:06:01.000Z","size":3132,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T17:09:14.495Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stophecom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-09T15:14:45.000Z","updated_at":"2020-04-05T07:51:44.000Z","dependencies_parsed_at":"2022-08-28T07:42:42.963Z","dependency_job_id":null,"html_url":"https://github.com/stophecom/icon-paint-performance","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stophecom%2Ficon-paint-performance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stophecom%2Ficon-paint-performance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stophecom%2Ficon-paint-performance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stophecom%2Ficon-paint-performance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stophecom","download_url":"https://codeload.github.com/stophecom/icon-paint-performance/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250150838,"owners_count":21383233,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-26T21:42:19.821Z","updated_at":"2025-04-21T23:32:02.347Z","avatar_url":"https://github.com/stophecom.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Test Paint Performance with 1'000 / 10'000 Icons.\n\n![Setup](img/results/test-setup-m.png)\n\n#### Versions\n- 1 SVG Inline `\u003csvg\u003e` (used [iconmelon](http://iconmelon.com/))\n- 2 Icon Font (SVG, Woff, TTF - used [fontcustom](http://fontcustom.com/))\n- 3a SVG Background `background-image: url('path/to/icon.svg')`\n- 3b SVG Background Data `background-image: url('data:image/svg+xml;...')`\n- 4a PNG Background `background-image: url('path/to/icon.png');`\n- 4b PNG Background Data `background-image: url('data:image/png;...')`\n- 5 WebP Background `background-image: url('path/to/icon.webp');`\n\n### Results\nIt'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.\nStill, 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):\n\n#### Chrome 32.0.1700.72 beta\n\nDisplay __10'000__ Icons\n\n- Inline SVG and Icon Font rendered fastest\n- PNG, WebP via `background-image` rendered approx. 33% slower\n- SVG via `background-image` rendered approx. 100% slower\n\n##### 1 SVG Inline\n![SVG Inline](img/results/chrome32/1-paint-time.png)\n\n##### 2a Icon Font (SVG)\n![Icon Font (SVG)](img/results/chrome32/2a-paint-time.png)\n\n##### 3a SVG Background\n![SVG Background)](img/results/chrome32/3a-paint-time.png)\n\n##### 3b SVG Background Data\n![SVG Background Data)](img/results/chrome32/3b-paint-time.png)\n\n##### 4a PNG Background\n![PNG Background)](img/results/chrome32/4a-paint-time.png)\n\n##### 4b PNG Background Data\n![PNG Background Data)](img/results/chrome32/4b-paint-time.png)\n\n##### 5 WebP Background\n![WebP Background)](img/results/chrome32/5-paint-time.png)\n\n\n#### Chrome Beta 32.0.1700.94 (Android 4.4.2)\n\nDisplay __1'000__ Icons\n\n- PNG, WebP via `background-image` rendered fastest\n- Inline SVG and Icon Font rendered approx. 50% slower\n- SVG via `background-image` rendered approx. 150% slower\n\n##### 1 SVG Inline\n![SVG Inline](img/results/chrome32m/1-paint-time.png)\n\n##### 2a Icon Font (SVG)\n![Icon Font (SVG)](img/results/chrome32m/2a-paint-time.png)\n\n##### 3a SVG Background\n![SVG Background)](img/results/chrome32m/3a-paint-time.png)\n\n##### 4a PNG Background\n![PNG Background)](img/results/chrome32m/4a-paint-time.png)\n\n##### 5 WebP Background\n![WebP Background)](img/results/chrome32m/5-paint-time.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstophecom%2Ficon-paint-performance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstophecom%2Ficon-paint-performance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstophecom%2Ficon-paint-performance/lists"}