Automatic Background Image Rotation and Removal

As a rule, user interfaces, whether for mobile or desktop apps, encompass a significant amount of visual media (images and videos), necessitating close collaboration among designers and front-end developers. The process for building UIs entails a designer-to-developer handoff, at which the designer transfers to the developer blueprints produced with such tools as Photoshop, InVision, and Sketch. The developer then implements the blueprints with Cascading Style Sheets (CSS).

Rotating image backgrounds is a common task. An excellent tutorial written by Craig Buckler in July 2018 describes how to do that with CSS. With Cloudinary, you can transform images in many ways—without using CSS or involving the designer. For example:

• Remove image backgrounds.
• Rotate images.
• Place an image over another.
• Make the image background transparent so that it blends with a background color.

This article steps you through the procedures. Overall, Cloudinary shines as an end-to-end solution for visual media: it effectively processes their uploads and on-the-fly transformations, automates optimizations, and delivers images and videos responsively across all devices.

CSS, particularly the transform property, offers a direct and efficient way to manipulate images. For instance, the rotate() function within CSS can be used to rotate an image by a specified degree. This method is straightforward and doesn’t require external services, making it a great starting point for developers.

The integration of HTML and CSS is crucial in creating and manipulating elements on a web page. By structuring HTML with elements like divs and applying CSS properties, developers can achieve transformations such as rotation, scaling, moving, or skewing of elements directly in the browser. This approach, while basic, forms the bedrock of more complex image manipulations in web development.

Remarkably, you can transform images on Cloudinary by simply adding parameters to their URLs.

To rotate an image, such as this one— :

—upload it to Coudinary and then add to its URL the angle parameter with the number of degrees by which to rotate the image clockwise. An example is a_60, where 60 denotes a 60-degree rotation. The URL then reads—

Loading code examples

Programmatically, you can rotate images with only one codeline in Ruby, PHP, Python, Node.js, Java, JavaScript, JQuery, React, Angular, .Net, Android, and iOs.

Cloudinary offers dozens of transformation effects for images. For example, for a shadow effect to the preceding rotated image, add a shadow-transformation parameter (e_shadow) before the angle parameter (a_60) in the URL, like this:

Loading code examples

Also, you can customize the x and y shadow offsets and change the shadow’s color (co) by specifying the values you desire in the parameters, for example:

Loading code examples

For a displacement effect, place one image over another by adding the e_displace parameter to the URL, as in this example:

Loading code examples

For details, see Cloudinary’s demo of product personalization on Codepen.

To remove the background of an image, e.g., a photo, first activate the AI Removal Background add-on on your Cloudinary Dashboard.

You can then remove an image’s background with the following code:

In the code above, notification_url is the endpoint that receives a POST request when background removal is complete. Here’s an example:

{
    "info_kind": "cloudinary_ai",
    "info_status": "complete",
    "public_id": "bg",
    "uploaded_at": "2019-02-25T17:33:45Z",
    "version": 1551104931,
    "url": "https://res.cloudinary.com/demo/image/upload/v1551104931/bg.png",
    "secure_url": "https://res.cloudinary.com/demo/image/upload/v1551104931/bg.png",
    "etag": "6567d798ca4087468dc7d23bcb8a45ec",
    "notification_type": "info"
}

As a comparison, see—

These:	Become These!

By default, regardless of the programming language, Cloudinary automatically performs certain optimizations on all transformed images. For an enhanced user experience, before delivering them to users, further optimize your visual media by adding a couple of parameters to their URLs.

The q_auto parameter directs Cloudinary to select the optimal quality-compression level and encoding settings according to the image content and format, also the viewing browser. The resultant image, reduced in size to save bandwidth, is of excellent visual quality. See this example URL:

Loading code examples

The f_auto parameter directs Cloudinary to analyze the image content and then select the best delivery format. For example, Cloudinary delivers WebP images to Chrome browsers, JPEG-XR images to Internet Explorer browsers, and retain the original format for all other browsers. However, regardless of the browser, if the quality algorithm determines that the optimal format for certain images is PNG-8 or PNG-24, Cloudinary delivers them according to that deduction.

Loading code examples

It’s a cakewalk to rotate or remove image backgrounds with Cloudinary. For more details, check out the related Cloudinary documentation and this article, which also describes how to perform other image transformations on Cloudinary.