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
- Cloudinary: an efficient and effective image-editing tool
- Automation of image edits with Cloudinary
- More about image editing
- References on media optimization
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.
Image with the default quality setting (46 KB)
Image with the low quality setting and the size reduced to 34 KBAutomatic 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:
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.
g_auto:classic
g_auto:backpackThis 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:
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. Transforming 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:
- Automating File Upload and Sharing
- Uploading PHP Files and Rich Media the Easy Way
- AJAX File Upload: Quick Tutorial & Time-Saving Tips
- Clone WhatsApp Technology to Build a File Upload Android App
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:
- Reimaging DAM: The Next-Generation Solution for Marketing & Development
- Digital Asset Collaboration Be DAM'd
- Adding Structure to Your Asset Metadata
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:
- PHP Image Compression, Resize, and Optimization
- Python Image Optimization and Transformation
- Top 10 Mistakes in Handling Website Images and How to Solve Them
- Image Optimization for Websites: Beautiful Pages That Load Quickly.
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:
- The Great JPEG 2000 Debate: Analyzing the Pros and Cons to Widespread Adoption
- Progressive JPEGs and green Martians
- Check for WebP Browser Support to Dynamically Deliver Images
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:
- Introducing Smart Cropping, Intelligent Quality Selection, and Automated Responsive Images
- Responsive Images With 'srcset', 'sizes'. and Cloudinary
- Programmatically Convert Raster Images to Vector Graphics
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:
- ExoPlayer Android Tutorial: Easy Video Delivery and Editing
- How to Generate Waveform Images From Audio Files
- Auto-Generate Subtitles Based on Video Transcript
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:
- How to Get Killer Page Performance With Angular Lazy Loading
- Lazy-Load React and Boost Page Performance for Your Apps
- Progressive Web Apps: Architecture and Examples
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:
