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:


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

Three different ways to do progressive JPEG encoding

There are two different kinds of JPEG images: progressive JPEGs and non-progressive JPEGs. These categories have nothing to do with the JPEGs’ political beliefs. They’re all about the order in which they’ve been encoded.

Read more
Using smart-cropping for automatic art direction

Note: this article was originally published in Smashing Magazine.

Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive images breakpoints? A year later, he had an answer: ideally, we’d set responsive image performance budgets to achieve “sensible jumps in file size”. Cloudinary built a tool that implemented this idea, and the response from the community was universal: “Great! Now – what else can it do?” Today, we have an answer: art direction!

Read more
As video use and requirements grow - so do the challenges
Video is an increasingly important component for websites and apps, as consumer demand for and consumption of video content is growing. It’s not only for wired devices, though. More and more, consumers are accessing video where they want it, when they want it, on whatever device that happens to be nearby.
Read more
An interview with Jason Grigsby about Responsive Images

In the conclusion of this three-part interview the Jason Grigsby, we examine what the future may hold for images on the web. Previously: Part 1, Part 2.

EP: I want to go back to the idea that we started with, that images are fundamentally complicated; that they’ll always present us with problems. What do you think we are going to be working on and talking about in five-to-10 years with regard to images?

Read more
Improve user experience with responsive websites and applications
This article originally appeared on Inc. Magazine and is reprinted with permission.

Back in the day, responsive website design wasn't the business imperative that it is now. In fact, just having a functioning website was all that it took to set you apart, and if it had images that loaded correctly within a few minutes, then that was a nice bonus. Needless to say, but I'll say it anyway, those days are long gone.
Read more