Many front-end developers, including me and my company, have grown accustomed to using SVGs in our web projects. They're incredibly convenient - no resizing needed, no optimization hassles. Just grab the code and use it however you want. But lately, I've started exporting decorative illustrations and icons as PNGs again. And you know what? It really makes a difference!
An SVG can be around 1 - 2 KB if it's well-made by a designer. But a PNG of the same image? It can be as small as 500 bytes. Yes, bytes. That's a significant reduction in file size. So if you can, why not?
Quality Differences: Are They Noticeable?
You might be thinking, "But won't the quality be ass-bad?" There may be a slight difference in quality between PNG and SVG in some specific cases. However, in most cases - especially with icons and small illustrations - the difference is practically none. High-density and retina displays handle these images so well that users won't see any loss in quality.
If you're worried about that, then hey, make two sizes and put them in a element; you can still get a smaller total size than an SVG.
Also, remember, that we are talking about illustrations and icons - graphics that is there to fill up some space, to add ambience and will be scrolled past, not looked at.
The Real-World Impact
On a modern machine with a stable internet connection, this difference might seem trivial. I mean, a 1 KB difference - why care? But consider a page loaded with many icons, which is pretty common nowadays. Those extra kilobytes add up. For users on older devices, with choppy internet connections, or in areas and ISPs still relying on HTTP/1, the difference between a 1 KB SVG and a 500-byte PNG becomes noticeable. Every byte matters when you're dealing with limited bandwidth or high latency.
Server Performance Matters Too
Here's another angle we don't talk about enough: server usage. We noticed that CPU usage on our servers dropped when we started optimizing pictures more. While we saw around a 40% reduction in CPU usage when perfectly resizing and reformatting larger images, there's no reason why tiny pictures wouldn't contribute to performance gains as well. When your server is serving millions of tiny images a day, those savings really add up.
40% is a lot and this is just a single setup. We know there are maybe billions of combinations of computer parts and software, but what’s sent over network is processed by CPU and you can count on change with different file sizes.
Best Practices for Implementation
If you're going to switch back to PNGs, here's what I recommend:
-
Use
: This ensures images are only loaded when they enter the viewport, saving bandwidth and improving load times.
-
Avoid CSS Backgrounds: Using
tags allows for better accessibility and performance optimization (CSS backgrounds load images immediately).
- SEO Concerns: You don't want icons appearing in image searches - simply provide an empty alt attribute. This mitigates any chance of that happening.
The Extra Effort Is Worth It
Yes, this approach might require a bit more work. You'll need to check the quality of your images and possibly deal with multiple sizes or responsive setups accounting for different display densities. But trust me, it's worth it. In the highly competitive landscape of the internet, we might literally be fighting for 0.05 seconds of load time. That tiny fraction can influence whether a user chooses to stay on your site or go elsewhere - to choose your client or someone else.
Many developers underestimate how critical these performance tweaks are. It's not just about clean code or beautiful design; it's about delivering the best possible experience to every user, regardless of their device or connection speed.
Conclusion
So, give PNGs another shot for your decorative illustrations and icons. The file size savings can lead to faster load times for users and reduced server strain on your end. In an industry where every millisecond counts, this simple change can make a meaningful impact.
Sometimes, revisiting old methods with fresh eyes (and new encoding algorithms in this case) can lead to better results. Start using PNG instead of SVG again, and see the difference for yourself.
Top comments (2)
I'm really interested in the idea of prioritizing PNGs for icons and illustrations! The file size difference seems huge, and that makes a lot of sense for improving site performance.
As a developer, exploring the full capabilities of an app can lead to incredible insights and innovations. Instander, the popular Instagram alternative, offers a suite of developer options that allow you to tweak and enhance your user experience. These hidden tools are designed to give you more control and customization, making it a valuable resource for developers looking to optimize their app usage and development strategies.