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 background-position-y.

Two actions were performed while performance was recorded.

• Page Reload
• Hover out and in for the second icon(bulb) - 4 times

Summary of SVG Performance

Summary of PNG Performance

What's happening?

Apart from scripting time, PNG performance beats loading and rendering(layout).

Why is this?

PNG sprite helped to not load multiple images per icon. Thus there is a better loading time.

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.

Can a PNG sprite serve equivalent to SVG?

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.

One Thing To NOT Miss

Many use 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.

Entire Screenshot of SVG Sprite performance

Entire Screenshot of PNG Sprite performance

Thanks for reading