When is it better to use PNG?

Published
Updated

Media Performance

I've been writing a lot about images on the web lately, but I haven't mentioned PNG format, or when PNG might be a better alternative to its lossy counterparts. Because PNG is a lossless format, it holds up much better to being scaled up, decoded/re-encoded, and modified, so it's worth taking a look at.

Obviously PNGs are good for transparency. SVG also offers transparency, but will quickly bloat as the complexity of the image increases. I ran some simple tests to find out if and when PNG is probably good choice for non-transparent images.

The Portable Networks Graphic (PNG) compression algorithm was actually created as a replacement for GIF, which was patented and controlled by a large tech company. Open-source wins again!

Test results (all values in kb)

All values shown in kilobytes (kb). Winners indicated for each test.

ApplicationJPG (no compression)PNGPNG-8SVG
Logo Wordmark40748
Flat Pattern152351726
Paragraph Text123181021
Small Photo1862851291327
Large Photo1,2242,7421,3171,327

Takeaways

1. PNGs work well for flat designs

Flat designs like patterns and typography are a great application for PNG images. These compress well, and may in some cases be smaller than SVG. If it's a simple logo, SVG is probably a better option, because vectors.

2. 8-bit is better

In this simple study, 8-bit PNGs averaged 49% smaller than ordinary 24-bit PNGs. This was a significant reduction in the size of the image. Even with less colors, there wasn't a noticable difference in visual quality.

Thanks for reading! If you like this, share it with your friends.