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/w500,fauto/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:
Copy to clipboard
cl_image_tag("woman.jpg", array("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:
Copy to clipboard
cl_image_tag("woman.jpg", array("quality"=>"auto:low"))
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](https://res.cloudinary.com/cloudinary-marketing/image/upload/w700,cfill,fauto,qauto,dpr2.0/WebAssets/blog/g_auto-skater-before-after.png

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:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:classic", "height"=>175, "width"=>175, "crop"=>"thumb"))
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:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:backpack", "height"=>175, "width"=>175, "crop"=>"thumb"))
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

Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more
Product Videos 101: What Makes Them Great?

A product’s benefits and usage, including its value proposition, features, and instructive details, are best demonstrated through video. Product-video types vary, depending on the funnel, channel, and audience, the most popular ones being demos, reviews, installation, and how-tos.

Read more