Images are an essential communication medium, and a noisy background can distract from the subject. This article explains how to remove the background of an image with Cloudinary and Pixelz, outlining a practical approach that starts with building a React app to upload an image and then proceeds to remove its background. The process requires a paid Cloudinary plan to access the background-removal features, which is a premium Cloudinary offering.
Getting Started: Cloudinary Setup and Background-Removal Preset
First, sign up for a free Cloudinary account. On the Management Console, choose Settings > Upload for the page with upload settings. Scroll to the Upload presets section and click Add upload preset at the bottom of the section. Click Media analysis and AI in the left-navigation area and, on the page that’s displayed, choose Pixelz from the pull-down menu under Background removal.
Next, create environment variables to hold the details of your Cloudinary account. Create a file called .env at the root of the project with the content below. These two settings will serve as the default if you set up the project on another system. By default, this local file resides in the .gitignore folder, mitigating the security risk of inadvertently exposing secret credentials to the public.
In your src folder, create a file named cloudinaryConfig.js for accessing the environment variables and for preventing repeated process.env calls throughout the project. Add the code below to the cloudinaryConfig.js file. Now write a helper function for uploading an image to Cloudinary before starting the background-removal process. The uploadImage function uploads the file as specified to Cloudinary by making a POST request to Cloudinary along with the file name and the name of the upload preset you created earlier.
Project Structure and Basic React Components
In your project's src folder, create a folder called components. The formItemLayout is an object that contains the size specifications for the label columns in the form to be created. Failure to validate the submitted form triggers the onFailedSubmission function. If the data in the submitted form is valid, the onFinish function is called. Absent a selection of an image, onFinish displays an error message. Otherwise, the uploadImage function declared in api.js uploads the image to Cloudinary.
You’ve rendered the ImageSelector component so that you can select an image for upload. As mentioned earlier, the background-removal process is asynchronous. To keep checking the URL in the response for the updated image is an unproductive use of time. The server.js file handles the incoming requests and sends the appropriate response. If you already have one, log in. You’ve declared a request listener for handling requests, i.e., extract their content and then retrieve the public ID and version specified there.
Exposing Your Local App to the Internet with Ngrok
Everything looks good, except that your setup is local. To expose your app, which is running, to the internet, leverage the cross-platform app Ngrok. Run the Ngrok http command to specify the port number you’d like to be exposed. Afterwards, start Ngrok, which will display in your terminal the public URL of your tunnel and the status and metrics that pertain to the connections made over your tunnel.
Configuring Upload Presets and Completion Notifications
Now that you’ve built the tunnel and your app is running, configure your upload preset in Cloudinary so that the preset will let you know when the image-removal process is complete. On the Management Console, choose Settings > Upload and scroll to the Upload presets section. Click Edit next to the upload preset you created earlier and then click Upload Manipulations in the left-navigation area. Link a localhost app to your Cloudinary account’s Management Console with Ngrok.
Image background removal is a game-changer for photos used in e-commerce, marketing, or personal projects. Cloudinary’s image background removal is an AI-powered tool that simplifies the process, offering precision and speed. Removing backgrounds from images allows you to focus on the subject, enhancing the image’s versatility and appeal.
Why Cloudinary Background Removal Stands Out
In 2025, Cloudinary background removal stands out for its powerful yet intuitive design. This AI tool uses advanced technology to remove backgrounds effortlessly. Creating flawless images with Cloudinary background removal is easy. Cloudinary’s background removal tool uses advanced machine learning and natural language processing (NLP) to remove backgrounds quickly and accurately. Image background removal opens up endless creative possibilities. With Cloudinary background removal, you get fast, accurate results that work for any project.
Common Questions and Practical Guidance
Q1. Answer: Yes! Cloudinary’s free plan includes background removal for testing. Q2. Answer: Absolutely. Q3. Answer: Cloudinary’s AI excels at removing complex backgrounds, such as intricate patterns or hair. Its deep learning algorithms ensure a clean, accurate result. Q4. Answer: Yes! We hope this article helped you understand how to use Cloudinary background removal for clean, professional visuals.
Images are used for a variety of use cases; advertising, preserving memories, and highlighting beauty to name a few. Sometimes, a perfect image might be ruined by a flaw such as an undesirable object or from harsh lighting. Although you can accomplish background removal through traditional tools, these tools require large amounts of time. Many free online tools state they can automatically remove backgrounds, but these tools often yield random and sporadic results. With Cloudinary, you can automatically perform background removal effects, at scale. It uses machine learning and artificial intelligence to quickly and accurately identify the main foreground before removing the background.
Additionally, you must have the Node JS SDK installed on your PC, and register for the “Cloudinary AI Background Removal” add-on. Then choose the best plan for you. Let’s start by creating a JS script that uploads images to the cloud. To do this, you’ll first need your Cloudinary environment variable. Then, create a project folder on your computer. Open the folder and create a file with an .env extension. Next, set up your upload environment. You’ll use two different libraries, the Cloudinary Node JS SDK and the dotenv, allowing the development environment to use your Cloudinary account credentials to upload assets. Open the terminal and navigate to your project folder. Now set up the upload script. You’ll notice the image name carried over from upload. Now, let’s look at how to update images in the cloud. First, upload a sample image to the cloud. Create a new file in your project folder named Update.js, and use the same libraries from previously. Additionally, you can use the API to remove backgrounds from images on the fly. Using the same code as above, simply call the image using cloudinary.image and specify the effect parameter as "background_removal".
With Cloudinary, you can apply different transformations to your images on the fly. To scale our transformation, you’ll first upload your assets to Cloudinary. For this demonstration, however, we will use the sample images provided by Cloudinary. Login to Cloudinary and navigate to the Media Library tab. View the uploaded images using the URLs provided in the terminal. Background removal is a common use case that allows you to optimize your images as needed. Cloudinary is a powerful media-management platform that uses automation and machine learning to streamline workflows. Over a million developers choose Cloudinary to manage their media-bulk uploads of raw photos to on the fly transformations that create optimizations, media variants, and responsive delivery on all devices. To learn more, visit the Cloudinary Documentation.
Remove-The-Background adds-on, a third-party image processing extension, supports background removal performed by Pixelz. This feature can be integrated either during upload or via Admin API for already uploaded images. The final result may replace the original image, with a backup kept automatically. Notifications can indicate when editing is complete, and images can be further transformed using Cloudinary’s transformation URLs. Cloudinary’s Remove-The-Background add-on helps preserve a site’s professional look, without in-house designers or lengthy editing processes. You can choose from various editing profiles, including keep/remove shadow and transparent/white backgrounds.
Choose our background remover for its intuitive interface, offering automatic optimization and formats like AVIF, JPEG-XL, and WEBP. Whether it’s 3D animations, interactive product displays, or real-time filtering, Cloudinary’s API provides a wide range of image enhancement capabilities. Automatic optimization guarantees that images are delivered in the highest quality and most suitable format for the user’s device, browser, or connection. You can batch remove backgrounds from web images, sign up for a free API to automatically remove backgrounds, or contextually remove just faces or confidential information. Explore many image formats done automatically and enjoy full support for cutting-edge formats. Crop Mode: Content-Aware.
In summary, Cloudinary background removal combines AI-powered accuracy with seamless integration into modern development workflows, making it feasible to deliver clean, professional visuals at scale.
tags: #cloudinary #background #removal