[pornel]

There are a few ways of making fully backwards-compatible "lossy" PNG: http://pngmini.com/lossypng.html

You can have icon files 3-4 times smaller, and large photorealistic images 2 times smaller than the regular PNG.

[ZeroGravitas]

The hover effect on your demo images confused me.

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.

[cpncrunch]

Also you can use svg, which is supported by the current versions of all browsers today, and the files will likely be smaller than webp, jpeg or png.

[dvirsky]

Rendering icons as SVGs is pretty horrible in terms of performance on mobile devices.