You can have icon files 3-4 times smaller, and large photorealistic images 2 times smaller than the regular PNG.
I assumed it would switch between the original and the compressed version. Instead it's swapping out the background to demonstrate transparency, which could probably be made more obvious.
Ok, it put them into one single zip and can't remember if it was solid or not, so it might be the cross-file compression that makes the major difference here.
BMP have formats which support 1-bit and 8-bit alpha channels http://en.wikipedia.org/wiki/BMP_file_format. Just open any file in Photoshop and save as BMP then click advanced. Not sure of browser support.
If you're seeing BMP+ZIP being smaller than PNG it only means your PNG encoder is poor. This can be easily fixed with a PNG optimizer like Zopfli, AdvPNG or OptiPNG.
https://github.com/ajslater/picopt ...will do this automatically for you.
Pictopt: A multi-format, recursive, multiprocessor aware, command line image optimizer utility that uses external tools to do the optimizing.
For an all in one GUI for Mac approach to this, try ImageOptim
1_zopflipng.png 8.466
2_zopflipng.png 18.739
3_zopflipng.png 8.012
4_zopflipng.png 91.879
5_zopflipng.png 1.117Now we'll have two similar but competing technologies and web developers will simply resort to the older formats.
As an exercise, try having your avatar only in the WebP format and see how useful it'll be.
That way you don't really care either way on the backend.
Suggests a 5x benefit over PNG for mobile app icons.
Comparing formats in a fair way is hard. "Looks almost the same" is a common fallacy — small change in quality can have dramatic change in file size, e.g. JPEG 80 and JPEG 90 look almost the same, but one is 2x larger than the other!
For example lossy WebP doesn't support full color resolution, but JPEG by default does. If you don't correct for that you're telling JPEG to save 4x as much color, and the difference is usually imperceptible, because that's the whole point of chroma subsampling.
When you compare with lossy WebP, then the right thing is to use lossy PNG as well.
I can make lossy PNG 4 times smaller than what you get from Photoshop (http://pngmini.com), so that'd make the comparison more fair, and the difference less dramatic.