Alpha rgb blacken & trim threshold:

0

How to handle color of fully transparent pixels:


Upload transparent PNG File:


Compression:

65%

Result:

Should I use SVG or Canvas?

SVG is easier to implement and doesn't need any JavaScript. But if you plan to animate the image, each frame will be recalculated by the browser if you rotate or scale it - which might be slow.

Canvas needs some JavaScript to work and maybe some time for pre-calculation (at least for huge images this will be noticeable). Use this if you want to animate the image later on. A Canvas will act just like a transparent PNG - nothing to be recalculated once it is filled with pixels.

Code SVG (with external JPG source, use for inline):

Code SVG with embedded JPG source, this can be put inline in HTML code.

Now it gets deep: complete SVG with embedded image as "optimized encoded" data URL!

You can use this Data-URL as image source. It will gzip better than base64-encoding the svg - containing already a base64-encoded image - again.
Big thanks go to Taylor Hunt for pointing out how to do this properly.
They're very easy to use: Take a look at this pen

Code Canvas:

Take a look at this pen

Image Base64 (for Data URLs):

you might notice that some JPGs, especially with large empty areas yield a lot of repetitions in the base64 code and you wonder why that is, because you always thought of JPG to be a highly compressed image format. But the JPGs the browser creates don't have optimized huffman tables (the option you can check in Photoshop "Save as Web" => "optimized")