Combine the transparency of a PNG with the compression of a JPEG. Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an
<img src="image.svg"/> tag, or as a
This techinique is tested & working in all modern browsers, IE9+ and Safari 9+. Run the image test yourself to see if it works in required browsers. Inline seems to be the best option for compatibility, in which case you should use external assets so that they can be cached.
This Pen is a fork of Shaw's Pen Pixels.svg (Pixels to SVG Conversion via <canvas>).