“Combine the transparency of a PNG with the compression of a JPG”

Original Source: https://codepen.io/shshaw/full/LVKEdv

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.
These create raster masks. I’ve written about how vector clipping paths can be useful here too.

Direct Link to Article — Permalink

“Combine the transparency of a PNG with the compression of a JPG” is a post from CSS-Tricks