Decrease PNG size by faking opacity

Because the PNG format can compress solid colors more efficiently than opacity (info at the end), if we flatten any opacities before exporting the image, it can drastically reduce file size.

For example, when the fills in this image are set to white with an opacity of 50%, the exported PNG weighs in around 45kb.

opacity.png

But if I replace the opacities with a sample of the color created by the opacity:

Finder - images - Screen Shot January 21, 2016 at 11-38 AM.png

...the file size comes down to around 25kb.


Further Reading

Benjamin Charity

Self-motivated UXE technical lead focused on building highly scalable systems for both the web and mobile platforms. Currently focused on Design Language Systems and Component Libraries.