Cloudinary Blog

Image-Editing Basics and a Tutorial for Automation With AI

Image-Editing Basics and a Tutorial for Automation With AI

You likely find yourself continually editing images for enhancement by eliminating flaws and tweaking the overall presentation, typically with software tools. Examples of basic editing are straightening, cleaning, and cropping images, as well as adjusting the contrast, exposure, and white balance. With advanced software like Cloudinary, you can automate not only editing tasks, such as quality adjustment and encoding, but also delivery.

This article addresses the following topics:

Basics of Image Editing

This section explains how to perform basic image edits with standard software. More advanced tools are available for fine-tuning or modifying image elements.

Even if you need not adjust all the elements described below, follow their order during the editing process.

Straighten, Clean, and Crop Images

Straightening images involves rotating or flipping them, typically for more realistic or more natural content. Unless you desire a specific effect, straighten images along the horizon to make it flat.

Cropping reduces the size or dimensions of an image by deleting part of it. Crop to remove unwanted elements or change the image's composition or border shape, e.g., from a rectangle to a square. Eliminating distracting or unnecessary details can dramatically beef up images.

Cleaning images removes minor imperfections, such as dust, lens flares, and artifacts. Most software programs offer gadgets for cleaning images, often called “spot healing” or “clone stamping” tools. Typically, those tools replace the spot you want to heal with a sample of the surrounding pixels. With other tools, you can select a location on the image you want to clone as a replacement.

This article shows you how to, in mere seconds, automate the removal of photo backgrounds with artificial intelligence (AI).

Adjust the White Balance

White balance is the amount of white in an image that affects its colors. In most image-editing software, white balance defines the type of lighting that was available during the photo shoot, e.g., daylight, flash, or cloudy, which either auto-corrects for the conditions that applied during the shoot or simulates them.

When working with images, especially photos, it pays to set the correct balance from the start. Note that white balance is easier to correct in RAW files than in JPEG files because more digital data is stored.

Adjust the Exposure and Image Contrast

To adjust the exposure, modify the image’s brightness or darkness. Overexposure generates a washed-out look; underexposed images look murky or shadowy. While making adjustments, be careful not to overmodify the image to avoid creating noise or artifacts, hence a grainy appearance.

The contrast of images defines how close or far apart the tones are. High-contrast images might have both very bright and very dark tones, resulting in blocky shapes. Low-contrast images often look gray and muted with softer shapes. In general, aim for a middle contrast to spotlight the important elements without a jarring look.

Adjust the Color Vibrancy and Saturation

Color vibrancy and saturation are similar to white balance, except that they typically adjust on a cyan, yellow, and magenta scale instead of white. Adjusting the vibrancy of an image modifies its neutral colors while maintaining the brighter colors. Doing that brings forward more of the colors in your images, reducing the gap between the bright and neutral hues.

Changing the saturation modifies the intensity of all the colors. Such a step enhances the overall vividity and can make images look sharper or dreamlike.

Adjust the Sharpness

Sharpening images can deliver a more crisp appearance. If certain aspects of your image are slightly out of focus or if you want to blur some parts to focus on a specific element, adjust the sharpness.

Adding text to images is another common task. To dynamically overlay text on images, follow the steps described in this article.

Cloudinary: an Efficient and Effective Image-Editing Tool

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload your images, apply built-in effects, filters, and modifications, including image edits.

Additionally, you can transform images programmatically with SDKs for all popular programming languages or simple URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes—a huge convenience and time saver.

Automation of Image Edits With Cloudinary

Below are four automatic edits you can apply with Cloudinary to images. Each of the subsections links to a Cloudinary Cookbook page with more details on the editing technique.

Automatically Deliver Images in Optimal Formats

You can have Cloudinary automatically define the format of your images for improved viewability and efficient delivery. The delivery format varies according to the client that is in use, such as a browser. Simply upload the image to Cloudinary and add the f_auto parameter to the URL. Cloudinary then delivers the image in WebP, JPEG-XR, or JPEG-2000, as appropriate.

![sample](https://res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg}

Automatically Adjust Quality and Encoding

Through machine learning, Cloudinary can automatically optimize the quality of images by selecting the best encoding settings and compression level according to the image format, content, and the devices on which you plan to display them. To direct Cloudinary to do that, upload the image, add the q_auto parameter to its URL, and, optionally, specify the quality level with best, good, eco, or low. A couple of examples:

Ruby:
Copy to clipboard
cl_image_tag("woman.jpg", :quality=>"auto")
PHP v1:
Copy to clipboard
cl_image_tag("woman.jpg", array("quality"=>"auto"))
PHP v2:
Copy to clipboard
(new ImageTag('woman.jpg'))
  ->delivery(Delivery::quality(Quality::auto()));
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(quality="auto")
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {quality: "auto"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {quality: "auto"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {quality: "auto"})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation quality="auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation quality="auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("woman.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("woman.jpg")!, cloudinary: cloudinary)
automatic quality
Image with the default quality setting (46 KB)
Ruby:
Copy to clipboard
cl_image_tag("woman.jpg", :quality=>"auto:low")
PHP v1:
Copy to clipboard
cl_image_tag("woman.jpg", array("quality"=>"auto:low"))
PHP v2:
Copy to clipboard
(new ImageTag('woman.jpg'))
  ->delivery(Delivery::quality(Quality::autoLow()));
Python:
Copy to clipboard
CloudinaryImage("woman.jpg").image(quality="auto:low")
Node.js:
Copy to clipboard
cloudinary.image("woman.jpg", {quality: "auto:low"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality("auto:low")).imageTag("woman.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('woman.jpg', {quality: "auto:low"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("woman.jpg", {quality: "auto:low"})
React:
Copy to clipboard
<Image publicId="woman.jpg" >
  <Transformation quality="auto:low" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="woman.jpg" >
  <cld-transformation quality="auto:low" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="woman.jpg" >
  <cl-transformation quality="auto:low">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto:low")).BuildImageTag("woman.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality("auto:low")).generate("woman.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto:low")).generate("woman.jpg")!, cloudinary: cloudinary)
quality low
Image with the low quality setting and the size reduced to 34 KB

Automatic Smart Cropping

Cloudinary automatically crops images with content-aware, AI-based features by selecting faces, individual features, or areas of interest. To trigger that task, apply the gravity filter (g) with the features you want to preserve.

This example with the g_auto setting crops the most interesting area, as determined by AI:

auto gravity

Another example: to avoid irrelevant objects instead of the product in product images taking center stage, define the product as the focus. The picture on the right below has the backpack in focus.

Ruby:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", :gravity=>"auto:classic", :height=>175, :width=>175, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:classic", "height"=>175, "width"=>175, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('veducate/spencer-backman-482079-unsplash.jpg'))
  ->resize(Resize::thumbnail()->width(175)->height(175)
    ->gravity(Gravity::autoGravity()
      ->autoFocus(AutoFocus::focusOn(FocusOn::classic()))));
Python:
Copy to clipboard
CloudinaryImage("veducate/spencer-backman-482079-unsplash.jpg").image(gravity="auto:classic", height=175, width=175, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("auto:classic").height(175).width(175).crop("thumb")).imageTag("veducate/spencer-backman-482079-unsplash.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <Transformation gravity="auto:classic" height="175" width="175" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <cld-transformation gravity="auto:classic" height="175" width="175" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="veducate/spencer-backman-482079-unsplash.jpg" >
  <cl-transformation gravity="auto:classic" height="175" width="175" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:classic").Height(175).Width(175).Crop("thumb")).BuildImageTag("veducate/spencer-backman-482079-unsplash.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("auto:classic").height(175).width(175).crop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:classic").setHeight(175).setWidth(175).setCrop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg")!, cloudinary: cloudinary)
g_auto:classic Transformation Applied to It
g_auto:classic
Ruby:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", :gravity=>"auto:backpack", :height=>175, :width=>175, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:backpack", "height"=>175, "width"=>175, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('veducate/spencer-backman-482079-unsplash.jpg'))
  ->resize(Resize::thumbnail()->width(175)->height(175)
    ->gravity(Gravity::autoGravity()
      ->autoFocus(AutoFocus::focusOn(FocusOn::backpack()))));
Python:
Copy to clipboard
CloudinaryImage("veducate/spencer-backman-482079-unsplash.jpg").image(gravity="auto:backpack", height=175, width=175, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("auto:backpack").height(175).width(175).crop("thumb")).imageTag("veducate/spencer-backman-482079-unsplash.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <Transformation gravity="auto:backpack" height="175" width="175" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <cld-transformation gravity="auto:backpack" height="175" width="175" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="veducate/spencer-backman-482079-unsplash.jpg" >
  <cl-transformation gravity="auto:backpack" height="175" width="175" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:backpack").Height(175).Width(175).Crop("thumb")).BuildImageTag("veducate/spencer-backman-482079-unsplash.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("auto:backpack").height(175).width(175).crop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:backpack").setHeight(175).setWidth(175).setCrop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg")!, cloudinary: cloudinary)
backback
g_auto:backpack

This tutorial shows you how to apply smart cropping.

Automatic, Intelligent Breakpoints

Image breakpoints in responsive web designs determine where to break an image in case of insufficient space on the user’s screen or viewport for a full display.

By adding a few codelines in Ruby, PHP, Python, Node.js, or Java to your app or webpage, you can direct Cloudinary to automatically generate image breakpoints through its API. You can also create breakpoints for user-generated images.

See this example in Node.js:

Copy to clipboard
cloudinary.v2.uploader.upload("woman_glasses.jpg", 
        { responsive_breakpoints: [{
          create_derived: false, bytes_step: 20000,
          min_width: 200, max_width: 1000,
          max_images: 20}], public_id: "woman_glasses"}, 
        function(error, result) {console.log(result); });

More About Image Editing

You can edit images in many other ways. Below are a few excellent resources:

The HTML5 <canvas> element is useful for animating website visuals, such as by adding small dynamic features or creating videos, through a combination of HTML, CSS, and JavaScript.

Create Beautiful HTML5 Animations With the Canvas Element defines HTML5 animation and explains the process for building simple animations along with examples and best practices. Also spelled out are the steps for creating and displaying dynamic content with Cloudinary.

By removing backgrounds from images, you can customize content and zero in on the elements you want to display. Manipulating backgrounds is especially important when creating crisp, eye-catching product images.

How to Automatically Remove Photo Backgrounds in Seconds With AI elaborates on the Cloudinary features with which you can easily remove backgrounds and, if you wish, replace the deleted elements with others to enhance appeal.

A popular way for displaying a site’s related content is through slideshows with which you can group images for albums, product galleries, or presentations. For a seamless experience, pick the slider and other controls with usability and optimal design in mind.

Top 7 jQuery Sliders and Three Ways in Which to Create Your Own showcases seven popular jQuery sliders and three resources for creating your own.

You can transform the images for your site in many ways to make them stand out or to depict ownership. For example, watermarks can prevent theft; badges can add a personal touch to user icons or profiles; and text overlays, from captions to hero banners, can extend content or appeal.

*Adding Image Watermarks, Credits, Badges and Text Overlays to Images * demonstrates how to add watermarks, badges, and text overlays to your site images with built-in Cloudinary features.

Before making purchases, visitors would want to see product details, which are readily available at brick-and-mortar-stores but not on e-commerce sites. A breakthrough has arrived, thanks to the capability of adding 360-degree product views online.

Learn how to do that with Cloudinary’s 360-Degree Product Viewer.

Cropping images to highlight their significant elements can be a time sink, especially if you have a high volume of images, optimizing which being crucial for site responsiveness and performance. Cloudinary’s content-aware, smart-cropping capability is what you need.

Shopify is one of the most popular e-commerce platforms, enabling you to quickly build an online store. However, optimizing the images there and adding a product gallery would significantly enhance the user experience. By integrating Cloudinary into your Shopify store, you can accomplish all that, hassle free.

For details, see Integrating Cloudinary Into Your Shopify Store.

Overlaying text to images is an excellent way to add captions, banners, or design graphics there. Historically, to do that dynamically requires a working knowledge of CSS or JavaScript. With Cloudinary, you can add and style text easily with URL parameters or simple methods in many programming languages.

For details, see *How to Overlay Text on Image Easily, Pixel Perfect and With No CSS/HTML *.

While building e-commerce sites on the popular Magento platform with its robust back-office system, you can apply extensions that facilitate site-management tasks. An example is the Cloudinary plugin, newly updated with enhanced support for product galleries, video, and digital asset management.

Taking Cloudinary’s Magento Extension to the Next Level explains Cloudinary’s Magento extension and the procedures for customizing product pages, media assets, and galleries.

References on Media Optimization

Cloudinary offers several lucid and comprehensive publications on media-optimization and delivery techniques and tools. See below.

File Upload Guide

This article discusses the types of file upload and Cloudinary’s automated capabilities for uploading files in 13 popular programming languages.

Here are the key articles:

Digital Asset Management Guide

Digital asset management (DAM) involves strategizing the tasks for organizing and improving the accessibility of your media assets. In particular, DAM champions the creation of a centralized library of media that offers a single source for your branding, marketing, and other content assets.

Cloudinary’s The Ultimate Digital Asset Management Guide delves into the importance, capabilities, and beneficiaries of DAM. Also detailed are the past and future of DAM and its common use cases.

Here are three related articles:

Image Optimization Guide

Properly optimized images help make your site look polished and professional to users and search engines, improve the user experience and site performance, and reduce the maintenance load.

This article explains what image optimization entails, walks you through the related processes in Cloudinary, and recommends a few practices for ensuring the best possible user experience.

Here are the key articles:

Image Formats Guide

This article discusses the differences between raster and vector and the pros and cons of traditional image formats like SVG and TIFF and that of modern ones, e.g., WebP and AVIF.

Here are the key articles:

Responsive Images Guide

Responsive images are optimized according to your visitor’s device—mobile device, laptop, or smart TV—for consistent quality and user experience. See this article for details on how to create and adopt responsive images on Cloudinary.

Here are three other key articles:

Video Optimization Guide

The videos on your site dynamically engage visitors with meaningful content in a common, accessible format. However, videos files can be large and, if posted indiscriminately, can negatively impact site performance and user experience. So, be sure to optimize videos before posting them.

This article explains how to optimize HTML5 <video> elements with Cloudinary.

Here are three other key posts:

Lazy Loading Guide

This article covers how to lazy-load web content to improve site performance in React, JavaScript, or Angular; and how to leverage Cloudinary SDKs for automation.

Here are three key articles:

HTML5 Video Player Guide

Many HTML5 videos are captivating and engaging. However, the player you choose for them can significantly affect how well they blend into your site and how easily you can edit their content.

This article describes the installation processes of ten popular HTML5 video players, highlights their capabilities, and compares the players’ pros and cons.

Here are three other key articles:

Recent Blog Posts

Five Ways to Effectively Manage Online Media

The digital economy is driven by highly visual experiences. After all, viewers process images 60,000 times faster than text. Therefore, it’s no surprise that top-notch visual media has been an essential component of a captivating e-commerce experience for years. Nor is it surprising that visual media’s importance only rose during the COVID-19 pandemic, a reality for all retailers, including our client Levi’s.

Read more
Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more