Cloudinary Blog

Adding rounded corners to images and cropping images to circles

by Nadav Soferman
 
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

Apply conditions to dynamically manipulate images.

It's great to have the capability to manipulate images on the fly by using dynamic URLs to customize the images to fit the graphic design of your site or mobile application. However, what if you want to manipulate an image depending on a specific image characteristic (like its width or aspect ratio) or its contents (does it contain a face?). What you need is a way to apply a transformation to an image only if a specific condition is met. Take for example a situation where you have allocated space on your page for a user uploaded image with a width and height of 200 pixels. Furthermore, if the image contains a face you would like to zoom in and focus on the face itself, otherwise you would like to fit the entire image into the available space:

Read more
Moviepilot focus on core business and reduce costs
 
Moviepilot Inc. is a media company that hosts a website and social publishing platform designed to bring together movie and TV fans, and help studios trigger, fuel and amplify positive conversations about entertainment topics. The site invites fans to create content, such as writing articles and producing videos, which are then curated on the site and distributed to more than 30 million fans worldwide. The site boasts more than 20 million unique visitors per month, with 87 percent of visitors accessing the site on mobile devices. The company is headquartered in Venice Beach, Calif., and has an office Berlin, Germany, where it was originally founded.
Read more
Powerful facial detection for image manipulation

Many of the photos displayed on the internet these days are of people. If your website or mobile application displays photos that include people, you will want to make sure that their faces are included in the delivered images when cropping and manipulating them to fit your graphic design and responsive layout. You may even want to further manipulate an image according to the faces present, for example, adding a harlequin mask overlay on all of their eyes, where each mask is adjusted to the correct size and orientation (although not a typical use case, it's a cool example of using advanced facial attribute detection):

Read more