“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

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *