JPG doesn't support alpha transparency. PNGs that do support alpha transparency don't compress nearly as well as JPG. SVG has masks and clipping paths, which we can use to our advantage here.
Drag and drop tool by Shaw to help do the trick. It produces an SVG containing a mask (for the transparency) and the raster graphic put together.
It's like ZorroSVG with more features. There is also some prior art here.
You can see how the masking works more clearly in this (non-automated) Pen.
1 month ago, CSS-Tricks, Web Design