Cloudinary Blog

Automatic and custom image rotation

The Need for Cloud-Based Auto-Rotated Images
Several years ago, a good friend of mine showed me a cool graphic design concept for his new web-based startup company. It looked pretty great. What really caught my eye was the designer’s unique use of visitor profile photos. You see, when a visitor registered to the service and uploaded his photo, the designer envisioned a large, faded, B&W, slightly rotated version of the same profile photo being used as the background image for the visitor’s personal home page. I thought for a minute and told my friend to let this one go. 
 
While the effect looked great, installing a server-side image manipulation software just for the creation of a background photo seemed like an excessive effort for an early-stage, self-funded startup. I still have mixed feelings about this particular piece of advice. Today, I have a chance to make some right out of this wrong, with the addition of image rotation to Cloudinary’s cloud-based image manipulation capabilities. If we had Cloudinary back then, applying these effects to an image while rotating it would have been a no brainer. 
 
In order to auto-rotate an image, simply use the new 'angle' parameter, or 'a' for URL based transformations. It accepts an integer of either positive or negative number of degrees to rotate the image by.
 
The following example rotates an uploaded image by 25 degrees clockwise in addition to resizing it to 30% of the original size:
 


    
 
Same example in Ruby on Rails:
<%= cl_image_tag("sheep.jpg", :width => 0.3, :crop => :scale, :angle => 25) %>
In PHP:
<?php echo cl_image_tag("sheep.jpg", array("width" => 0.3, "crop" => "scale",
                        "angle" => 25)); ?>
 
And with our jQuery plugin:
$.cloudinary.image("sheep.jpg", {width: 0.3, crop: "scale", angle: 25});
 
 
You can also chain multiple transformations to reach nicer effects. As always, this can be achieved using either a simple URL or a one-liner piece of code with your preferred Cloudinary client-side library. The following example scales down the uploaded image, rounds its corners, adds a watermark and auto-rotates the image by 15 degrees counter-clockwise:
 


Automatic image rotation

Real-world photos usually have a clear orientation. Occasionally, you’ll run into image that can be depicted just fine in both landscape and portrait modes. One example might be an architectural floor plan or a design for an apartment. Let’s see how such images might fit a graphic design that leaves room for 300x200px photos.
 


  

As you can see the landscape plan fits almost perfectly into the 300x200 rectangle. However, the portrait one on the right doesn’t effectively use the given space and requires lots of padding on its right and left sides.
 
Such drawings are oblivious to orientation and hence we can rotate them without affecting their content. For such images, we can get a perfect fit by letting Cloudinary automatically rotate the image, when needed. Simply pass 'auto' (or 'auto_right') and 'auto_left' as the 'angle' parameter. This parameter tells Cloudinary that it can rotate the image left or right when the aspect ratio of the original image doesn’t match the requested target ratio.
 
Here’s the same example, this time with auto rotation:
 
 

  
 
As you can see, the result is a much better display of the drawing, with considerably less padding required. All that, without any effort or coding on your side.
 
Same example in Ruby on Rails:
<%= cl_image_tag("portrait_plan.jpg", :width => 300, :height => 200, 
                 :crop => :pad, :background => '#cddae4', :angle => :auto) %>
If you use CarrierWave in your a Rails project, you can add the following to your versions:
cloudinary_transformation :angle => :auto
View The SpaceIncidentally, we saw the need for auto-rotated images at the website of one of Cloudinary’s customers. The service, View The Space, a smart online tool that helps generate leasing activity for landlords and brokers, embeds such architectural designs and floor plans within its website.
 
Custom and automatic image rotation are now available for our free and paid plans. Note that although some samples above are in Ruby, the same can be done in other Cloudinary client libraries - PHP, Python & Django, Perl, .NET and jQuery.
 
If you enjoyed our new image rotation capabilities, make sure you check out Coudinary’s face detection based cropping, corners rounding and watermarks overlays.
 
 

Recent Blog Posts

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more