We’ve been recently using a lot of organic shapes for images in our designs. I’ve been producing them using SVG clip paths, which result in a fully animatable result that works with any image.
In cases where you have a Photoshop-savvy person available, I would recommend first doing this kind of stuff just as well optimized PNG’s, unless you need to animate them.
But for most of our clients things just need to work with images uploaded to WordPress, no editing required.
Why the square image?
I’m forcing the image to always be square with padding-top: 100% for aesthetic purposes. Since clients can upload images of varying sizes the results can look quite nasty with extremely landscape/portrait images. They should still work, but just look weird.
The trick with the SVG’s
For the clip path to work nicely you’ll need a very specific type of a clip path – a relative one instead of an absolute path. In practice that means the path needs to exists within a “percentage” space instead of absolute pixel space.
I used to do this conversion manually, by creating the path within a 1 x 1 Artboard in Illustrator, but thankfully some noble soul came up with a tool for the conversion.
Before using
I’ve used this technique several times in production, so I’d deem it production safe. It doesn’t work with IE 11, but the internet must look pretty wild for IE 11 users, so I don’t think they care about organic shapes.