Back then we have seen the designers giving us image sprites and then the background positions being changed accordingly for each icon and on-hover. There needs no mention that SVGs have captured all the attention as soon they pitched in.
Let's peek into the performance of these. A couple of svg icons were taken and then converted into svg sprite and png sprite.
On svg page, change
fill:color for hover color and in png page, change
Two actions were performed while performance was recorded.
- Page Reload
- Hover out and in for the second icon(bulb) - 4 times
Apart from scripting time, PNG performance beats loading and rendering(layout).
PNG sprite helped to not load multiple images per icon. Thus there is a better
An svg is multiple pieces of dom elements where as an image is one dom element.
Rendering time will be a lot better due to this single element.
Painting time remains almost the same as the user would see exact same result on hover.
Yes, with a bit more work(at least in case of icons). But the same on-hover effects, responsiveness can be achieved through PNG sprite as well.
content:'\000' for icons. May not be a good way. The reason being, the entire font with many other characters is being downloaded along to achieve this. Always download a minimal font file. In the most optimized sites, one can observe that font files are the largest bundles. The font files should come under 2-3kb.
Find the github link for the exact files that were used to create the performance reports.
Thanks for reading