Cloudinary Blog

Adding rounded corners to images and cropping images to circles

 
Twitter and Facebook. One adds rounded corners to their user’s profile pictures. The other doesn’t. Can you recall which service is the one adding rounded corners?
 
At the moment, the right answer is Twitter, though if you guessed Facebook you weren’t far off. Both services have on-and-off relations with rounded cornered images, and Facebook tried different designs before backing out of rounded corners for the time being.
 
Overall, it’s a matter of fashion, though having images with rounded corners seems like a very common graphics design requirement these days.
 
So how does one goes on adding rounded corners for his originally rectangular images?
 
The main approach today is adding a rounded-corner mask to the image on the client’s side, using either CSS or image mask overlays. 
 
With Cloudinary, you now have a new approach - add rounded corners to the original image and serve it to the browser in its final form. This approach offers some very nice benefits.
 
While the client-side masking approach usually works, it certainly has its drawbacks.
Supporting older browsers is non-trivial and the HTML can get cluttered. In addition, this method fails when generating PDFs or sending emails. Email clients today simply do not support advanced CSS techniques. 
 
For example, you may notice that emails sent from Twitter use rectangular thumbnails and not rounded ones, breaking the website’s graphics design concept. We assume that this is due to these technical difficulties. Their graphics design team can’t be too happy with this.
 
Last but not least, client-side masking is non-trivial for mobile applications where it’s more complex to transform the images or add masks on the device itself.
 
So how can Cloudinary help?
 
We recently added support for rounded corners transformation in the cloud, and it’s a snap to use. Simply add the new ‘radius’ parameter to have your images delivered with rounded corners. You can even use this technique to have a completely circular or oval crop. How cool is that? 
 
Here’s a quick example for generating a 150x100 PNG of an uploaded sample image while adding rounded corners. Either by using our dynamic URL API (delivered through a CDN) or in Rails:
 
 
 
White Chicken White Chicken - Rounded
 
  <%= cl_image_tag("white_chicken.png", :width => 150, :height => 100,
                                    :crop => :fill, :radius => 20) %>

You can also easily chain additional transformations together. For example, a 100x100 PNG of a Facebook profile with face detection based cropping and rounded corners:


Rounded face

Using this method you can also achieve completely circular and ellipses crops. It certainly adds a nice graphical touch.

Below is an example of a 150x100 ellipse of the original image. Simply passing ‘max’ as the radius parameter:


Ellipse

You can of course use face detection and circular cropping to get nice circles with faces of your users. To allow transparency, remember to convert your original images to PNGs, by simply using the .png suffix. Here is how it looks on a colored background:



We’d be happy to hear how you used Cloudinary’s rounded corners crop in your website. And - what other graphical effects would you like us to support?

Recent Blog Posts

Cloudinary offers ongoing support to Scene7 customers in their DAM business goals.

With the imminent shutdown of Scene7 after rebranding by Adobe as part of Dynamic Media, dozens of leading eCommerce companies, among them the world’s top three eCommerce brands, have migrated to Cloudinary as a viable alternative to Scene7. And for good reason: time is of the essence and Cloudinary promises not only a smooth migration flow and continuity of their rich-media initiative, but also numerous superb capabilities.

Read more
Applying Your Own Duotone Effect Filter With Cloudinary

The trendy duotone effect is ubiquitous in today’s websites and illustrations for good reason: it highlights content well, rendering it pleasing to the eye, especially on minimal web platforms. The sky is the limit as to how much you can play with colors while applying a duotone effect. You could keep trying them out until something stands out.

Read more
New q_auto Setting For Content-Aware Video Compression

It’s widely known that video is the most effective way of communicating your brand to your audience. It is also an extremely varied medium. Take a look at the existing videos in your media library, you’ll find videos with differing lengths, colors, brightness and density of content. All of these videos need to be optimized in a different way. Cloudinary’s new automatic video quality can intelligently analyze each and every video to encode it using the most optimized settings, ensuring the best trade-off between file size and visual quality, whilst also maintaining a consistent experience throughout. All you need to do is set the quality parameter to auto (q_auto in URLs) and Cloudinary will take care of the rest.

Read more
Automatic Video Transcoding

Delivering video files to users can be a much more complex undertaking than many people stop to consider. There are a large variety of video formats and codecs to choose between, and various optimization parameters for encoding the videos. Parameters such as bitrate, key-frame-interval, and frame-rate will have an effect on the visual quality and bandwidth requirements when delivering the video file. To make matters worse, there are so many potential viewing devices out there (desktops, laptops, tablets, mobiles, wearables, etc). Each of these devices have different browsers or apps, and they all support different formats and codecs!

Read more
Dynamic Video Platform: 7 Use Cases

Increasingly, companies large and small, across all industries are enhancing their customer and brand experiences through video. We’ve just launched our dynamic video platform and shared our thoughts on the differences between traditional online video platforms (OVPs) and dynamic ones when it comes to creating, managing, and delivering compelling and engaging videos.

Read more