Cloudinary Blog

Adding borders to images

by Nadav Soferman
Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and text elements really depends on the feeling the designer is trying to convey through the design. 
In this blog post we wanted to tell you about a new cloud-based transformation available through Cloudinary - adding borders to images. Yes, you can use CSS3 or image masks to simulate borders around images, but the first is supported only on modern browsers and the latter clutters the HTML. In addition, if you plan on embedding images in emails or documents you can pretty much say goodbye to borders (certainly for images with rounded corners). For such cases, you can use Cloudinary's extremely simple image transformation API to add borders directly to the original image.
Consider the following photo. It was uploaded to Cloudinary using 'autumn_leaves' as its public ID:
Adding a border around the image is straightforward. Simply specify the 'border' parameter ('bo' for URLs) using a CSS-like format. In the following example '4px_solid_black' means a 4 pixels wide black border.
Same example in Ruby on Rails:
<% cl_image_tag("autumn_leaves.jpg", :width => 0.15, :crop => :scale, 
                :border => { :width => 4, :color => 'black' }) %>
The border's color component also accepts RGB format. The following example rounds the corners of the image using the 'radius' parameter ('r' for URLs) and adds a 6 pixels solid green border ('#00390b').
Same example in PHP:
<?php echo cl_image_tag("autumn_leaves.jpg", array("width" => 0.15, "crop" => "scale", 
       "radius" => 20, "border" => array("width" => 6, "color" => "#00390b"))) ?>
Cloudinary also supports adding semi-transparent borders. This is accomplished using the RGBA color format. The Alpha hex value ranges between 00 (fully transparent), to FF (opaque). The following example generates a semi transparent 10 pixels wide green border. We also use Cloudinary's chained transformations to make the image elliptic ('max' radius), rotate the image by 5 degrees and add an underlay blue background image (while resizing it and increasing its brightness).
Same example in Django:
import cloudinary
img = cloudinary.CloudinaryImage("autumn_leaves.jpg")
          dict(width=0.15, crop='scale', radius='max', 
               border=dict(width=10, color='#00390b60')), 
          dict(underlay='site_bg', width=250, height=200, effects='brightness:50')])
And one last example - the following URL generates an image based on a Facebook profile picture that was automatically fetched by Cloudinary. The image is resized and rounded, and a black border is added. We then use an overlay to add Cloudinary's logo with a semi-transparent wide border. As with all of the Cloudinary managed images, the resulting image is persistently stored in the Cloud and then delivered and cached through a fast CDN.
By the way, you can also add the border as an incoming transformation so the original image is stored in the cloud already with the border. Here's such an incoming transformation, this time in Node.js:
cloudinary.image("itail.jpg", { type: 'facebook', transformation: [
                 { crop: 'fill', width: 150, height: 180, radius: 10, 
                   border: { width: 2, color: 'black'}},
                 { overlay: 'cloudinary_logo_white', width: 90, 
                   gravity: 'south_east', radius: 5, y: 7, x: 7, 
                   border: { width: 6, color: '#afcee990'}}]})


If you are a regular reader of our blog, you know that Cloudinary keeps enhancing on various fronts. One of these fronts is our ever increasing set of image manipulation capabilities. In this blog we introduced a cool new enhancement that you might find useful. We have more in our pipeline. If you want to see a new image manipulation capability added to Cloudinary, just drop us a line.

Recent Blog Posts

How to generate waveform images from audio files

by Meir Feinberg
How to generate waveform images from audio files

Many social networks, websites and messaging applications allow users to upload a wide variety of media files, and although the majority of files are in the form of images and video clips, a significant minority are audio files. When the website or application subsequently needs to display a thumbnail that describes the uploaded content, images can be cropped and resized down to scale, and a single frame from a video clip can be converted to an image and then also cropped and resized down to scale.

Read more
5 ways to optimize images for effective social sharing

As a website/app developer or owner, you’ve undoubtedly experienced your fair share of glitches and mishaps when it comes to users or site visitors sharing your content. Many outlets such as news and media sites, social networks, or e-commerce sites include the option to "like" or "share" content such as blog posts or images. Once shared, the social network site displays a snippet of the shared content alongside a featured image. This way, your site content gets maximum exposure in social networks and attracts additional visitors.

Read more
Google's new logo might not be as small as claimed

The Internet was abuzz last week after the announcement of Google’s new logo. What caught our eyes more than the artistic changes was this sentence on Google's blog: "building a special variant of our full-color logo that is only 305 bytes, compared to our existing logo at ~14,000 bytes". Sounds exciting! But is it correct?

Read more
Transcode, convert, resize, crop and manipulate videos

Videos are becoming more prolific with people having the capability to capture videos with a wide variety of cameras, including smartphone cameras that are available almost everywhere. Web and mobile applications that display videos online can be faced with a challenge when the videos are created or uploaded from different devices and in various formats, and then need to be delivered in a multitude of resolutions and aspect ratios to various web browsers, laptops and all kinds of mobile devices in HTML5 web friendly video formats.

Read more

Taking the labor out of baby books

by Nicole Amsler
How Baby's Firsts save development time with Cloudinary
Cloudinary helps Baby’s Firsts App deliver images quickly and preserve consistency from app to print. Baby’s Firsts is a free iPhone app that helps parents collect photos, instantly share photos via Facebook, Twitter and Flickr, and produce photo albums of their baby’s first year. Using more than 300 creative, developmentally timed reminders to capture key moments and milestones, the easy-to-navigate app enables parents to store photos in the cloud and create customized photo pages that are then transformed into heirloom-quality, printed baby books. 
Read more

Lossy compression for optimizing animated GIFs

by Meir Feinberg
How to optimize animated GIFs with lossy compression

Animated GIFs keep getting more and more popular, but they are generally very big files with slow loading times and high bandwidth costs, while the format itself is quite old and not optimized for modern video clips. As developers, you need to allow users to upload their animated GIF files, but you also need to deliver them optimized, which can be a complex, time consuming process.

Read more