Get­ting cre­ative with JPG cutouts

net magazine - - PROJECTS -

Cre­at­ing trans­par­ent JPG files with SVG is pos­si­ble and can be done di­rectly in the web browser. Check out Chris Coyier’s ar­ti­cle in which he shows, step-by-step, how to cre­ate trans­par­ent, cutout JPG files. ( css-tricks.com/trans­par­ent-jpg-svg/)

First, he cre­ates a vec­tor path that ad­dresses the shape of the im­age he wants to dis­play. The next step is about em­bed­ding SVG code into the HTML file and adding the clip-path prop­erty. Why we should even think of ap­ply­ing this tech­nique into our work­flow? The an­swer is sim­ple: the size of the im­age file. If we com­pare im­ages with trans­parency lev­els saved as PNGs to their JPG equiv­a­lent, we can see that the lat­ter weighs less. As we all know smaller files are bet­ter from a per­for­mance and UX per­spec­tive.

Although this method has many ben­e­fits, it’s still ex­per­i­men­tal. But, for now, it is at least a good way to ex­plore CSS clip­ping and dis­cover new ways to cut out im­ages.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.