Getting creative with JPG cutouts
Creating transparent JPG files with SVG is possible and can be done directly in the web browser. Check out Chris Coyier’s article in which he shows, step-by-step, how to create transparent, cutout JPG files. ( css-tricks.com/transparent-jpg-svg/)
First, he creates a vector path that addresses the shape of the image he wants to display. The next step is about embedding SVG code into the HTML file and adding the clip-path property. Why we should even think of applying this technique into our workflow? The answer is simple: the size of the image file. If we compare images with transparency levels saved as PNGs to their JPG equivalent, we can see that the latter weighs less. As we all know smaller files are better from a performance and UX perspective.
Although this method has many benefits, it’s still experimental. But, for now, it is at least a good way to explore CSS clipping and discover new ways to cut out images.