Image Effects Understanding How to Change the Aspect Ratio of an Image Unleashing the Power of Image Organizers in 2024 How to Make a Low-Quality Image Look Better Understanding Lossless Image Compression How to Set Up Image Registration in Python 8 Different Image Processing Techniques You Can Use 4 Ways to Make an Image Larger without Losing Quality 3 Easy Ways to Eliminate Duplicate Images The Basics of Face Detection in Python How to Implement Multiple File Upload in PHP Like a Pro Creating Custom Image Cropping Interfaces in Android How to Create Simple Yet Effective PHP Overlay Understanding Real-Time Image Recognition How to add a shadow effect to an image with CSS How to crop an image in Flutter with Cloudinary How To Rotate an Image with Java Image Processing with Python Rotating an image with CSS Enhancing User Experience with a Responsive Image Slider Building a Python Image Recognition System Building an Interactive JavaScript Image Manipulation Tool Image Align Centering with HTML and CSS Efficient Image Cropping Techniques with Angular and Cloudinary Ultimate Guide to Photo Gallery on Android A Comprehensive Guide to Adding Text to Images on Android Mastering Background Changes in React Applications Comprehensive Guide on Changing Background on Android Devices Mastering Image Rotation in Java A Guide to Adding Text to Images with Python A Guide to Converting Images to Grayscale with Python Introduction Creating an Image Overlay with JavaScript Rotating an Image in Python Creating a Dynamic Photo Gallery with jQuery Creating An Interactive Photo Gallery Using JavaScript Mastering Overlay in Android Mastering Angular Overlay: A Comprehensive Guide Comprehensive Guide to Overlay in Flutter Mastering Overlay React for Responsive Design Solutions Create a Blurred Image with PHP: A Comprehensive Guide Guide to Using Blur Image in Flutter Mastering Blur Image in React Native Mastering Image Blurring in Python Mastering the Art of Image Blurring Mastering the Art of Image Blurring in Java The Ultimate Guide to Blurring Images on Android Understanding and Implementing Blur Image in JQuery An Extensive Walkthrough of Blurring Images with JavaScript How to Use HTML, CSS, and JavaScript to Make an Image Slider HTML Image Tag How to Crop GIFs? How to Align Images with CSS Ken Burns Effect – Complete Guide and How to Apply It Cartoonify – Complete Guide on Cartoonify Image Effect Mastering Web Aesthetics: A Comprehensive Guide to Gradient Fades Sepia Effect: The Ultimate Guide to the Sepia Photo Effect What is Vignette? Guide to Vignette Image Editing Pixelate – The Ultimate Guide to the Pixelation Effect How to Outline an Image: Enhancing Visual Appeal and Depth Make Your Photos Pop with Image Effects Upscale Image – Developers guide to AI-driven image upscaling Image Manipulation: History, Concepts and a Complete Guide A Full Guide to Object-aware Cropping Simplify Your Life with Automatic Image Tagging How To Resize Images In WordPress How To Create a Progress Bar For Asset Uploads Animated GIFs – What They Are And How To Create Them How To Automatically Improve Image Resolution AI Drop Shadow Get Image Dimensions From URLs Automatically Add Sepia Effect To Images Automatically Make an Image a Cartoon Automatically Add Blur Faces Effect To Images Automatically Add Background Removal Effect to an Image How to Resize an Image with React How to Easily Resize an Image with React Native

Automatically Add Sepia Effect To Images

sepia effect

Adding a sepia effect to your images can give them a vintage feel, and can quickly turn your contemporary photos into ones with a flair. This post will demonstrate how to use Cloudinary to add a sepia effect efficiently, and at scale.

In this article:

What is Cloudinary?

Most image editing apps and programs, such as Photoshop, include sepia effects. However, when you have to perform this at scale, it becomes a tedious task. This is where Cloudinary can help.

Cloudinary is an end-to-end media management platform for websites and applications that enables you to quickly and easily add improvements and effects to your images and video. A wide range of cloud-based image manipulations are included in Cloudinary. When dynamic image URLs are viewed, transformations happen instantly, then are promptly cached on CDN servers for the quickest delivery.

Cloudinary effectively delivers images with a sepia effect with just one parameter and a few optional characteristics. Let’s see it in action!

Adding sepia effect to your images programmatically

Prerequisites

To start applying sepia effects to your images, you’ll first need to sign up at Cloudinary. If you don’t have an account, you can sign up for free.

In addition, you should have Node JS installed on your computer. If not, you can install it from their official webpage.

“Image

Uploading Images to Cloudinary

Before adding an effect to the image, upload it to Cloudinary. For this tutorial, we will upload the image to Cloudinary using the Cloudinary API.

Select the image you want to upload. For this, we’ll use the following beach_huts.jpg image:

Select image to add sepia effect to

Next, you’ll need to get your environment variable for Cloudinary. After logging in, you’ll be directed to the Cloudinary dashboard where you’ll see you’re environment variable :

Choose Cloudinary environment variable

Copy the ‘API Environment variable,’ then create a .env file in your code folder and paste the variable:

Copy the API environment variable

Now, create your JS script. Open your code folder and create a JS file named ‘upload.js.’ We’ll use the dotenv library to authenticate our API. We will use the Cloudinary Node JS SDK to upload the assets. First, open a terminal and install the script libraries using the following commands:

npm install dotenv
npm install cloudinary

Create script

Open your upload.js file and import the libraries:

// Reads the Cloudinary Environment variable
require("dotenv").config();

// Using V2 of Cloudinary Node JS SDK
const cloudniary = require("cloudinary").v2;

// Picking up env and configuring
console.log(cloudniary.config().cloud_name);

Call the Cloudinary upload API and specify the file you want to upload, adding this to the callback function:

// Calling upload API
cloudniary.uploader
.upload("./assets/beach_huts.jpg", {
    // Default resource type is image if your even if your don't specify
    // it
    resource_type: "image", public_id: "beach_huts"
})
.then((result) => {

    // Provide output in a formatted string
    console.log("sucess", JSON.stringify(result, null, 2));

})
.catch((error) => {
    console.log("error", JSON.stringify(error, null, 2));
});

Here, not only are we calling our API, but we’re also using promises to handle the success and failures of the API. By default, Cloudinary provides a random public_id (the name of the asset in Cloudinary) to assets. We’re explicitly defining it as “beach_huts.” This will allow us to retrieve and keep track of the image.

Run the code using Node JS:

node upload.js

Run the code using Node.js

Your image has successfully been uploaded to Cloudinary! You can view the image in any URLs returned in JSON:

View image as a return url

You can also view your image by going to the Media Library tab on your Cloudinary account:

View image in media library as well

Adding sepia effect to images

To add sepia effect, we’ll use the same functions and libraries. The only thing we’ll be doing is retrieving the image.

Create a .env file and add your environment variable. Then, create a file named retrieve.js and import the same libraries:

Retrieve the image

Before we can add the effect to the image, retrieve it. Call the Cloudinary API and specify the public_id of the image, adding it to the console:

// Retrieving image
const img = cloudinary.image("beach_hut");

console.log('images', img)

Running the code will result in a URL:

Running the code will result in URL

Opening the URL will yield the image:

View image as a return url

Modify the Cloudinary call by adding an effect parameter and specifying the ‘sepia’ effect:

const img = cloudinary.image("beach_huts", {effect: "sepia"});

Here’s the final code:

// Reads the Cloudinary Environment variable
require("dotenv").config();

// Using V2 of Cloudinary Node JS SDK
const cloudinary = require("cloudinary").v2;

// Picking up env and configuring
console.log(cloudinary.config().cloud_name);

// Retrieving image
const img = cloudinary.image("beach_huts", {effect: "sepia"});

console.log('images', img)

Running the code yields the following image:

Image with sepia effect programmatically added

Conclusion

You’ve successfully used Cloudinary to apply sepia effect to images, dynamically. Cloudinary’s aesthetic effects are an easy way to alter how your images appear on your website or application. You can alter the format, blur and pixelate them, improve their quality, adjust colors, apply filters, and much more. All this is possible with a free Cloudinary account. In addition, Cloudinary offers SDKs (Software Development Kits) for backend, frontend, and mobile development. You can read about the SDKs available in the Cloudinary Documentation.

More from Cloudinary:

QUICK TIPS
Colby Fayock
Cloudinary Logo Colby Fayock

In my experience, here are tips that can help you better apply sepia effects and manage image transformations at scale using Cloudinary:

  1. Use named transformations for reusability
    Instead of specifying transformations like effect: sepia inline, use Cloudinary’s named transformations feature. Create a predefined transformation called sepia_effect in the Cloudinary console, and call it by name. This approach makes it easier to manage complex transformations, keeps your code clean, and ensures consistent effects across multiple projects.
  2. Chain multiple effects for unique styles
    Combine sepia with other effects to create unique visual styles. For example, add a vignette or grayscale effect in a chained transformation. This adds a subtle vignette and converts the image to grayscale, giving it an antique, cinematic look. Chaining transformations provides flexibility to create more sophisticated image effects without manually editing each image.
  3. Apply transformations during upload to save processing time
    If you know that a sepia effect will always be applied to certain images, add the sepia effect transformation during the initial upload. By applying transformations during upload, you save processing time during image retrieval and eliminate the need for multiple transformation requests, reducing latency in image delivery.
  4. Use conditional transformations for greater control
    Use Cloudinary’s conditional transformations to apply a sepia effect only if specific criteria are met. For instance, apply the effect based on the image’s dimensions or format. This is useful when managing large image libraries, ensuring that only qualifying images are processed, which helps optimize costs and performance.
  5. Incorporate dynamic effects based on user interactions
    Consider adding sepia effects dynamically based on user interactions, such as hovering over an image or selecting a specific filter on your site. Use Cloudinary’s real-time transformation URLs to trigger these effects without needing to regenerate the image. This adds interactivity and enhances user engagement.
  6. Create image variants for responsive design
    Use Cloudinary’s automatic responsive breakpoints to create multiple sepia variants of an image at different resolutions. This approach ensures the best-quality sepia images are delivered based on device type, improving load times and maintaining visual consistency across all screen sizes.
  7. Monitor transformation usage and optimize
    Regularly review your Cloudinary usage reports to see which transformations are used most often and optimize accordingly. If sepia is a popular transformation, consider pre-rendering these versions and storing them as separate assets to reduce dynamic transformation costs.
  8. Take advantage of Cloudinary’s AI-based enhancements
    For more sophisticated transformations, use Cloudinary’s AI tools, like content-aware cropping, to apply sepia only to specific parts of an image. This approach is great for creating professional, selective-focus effects, giving your visuals a refined and custom look.
  9. Set up caching rules for frequently accessed images
    If you’re applying sepia effects to images that are frequently accessed (e.g., marketing banners or landing page visuals), use Cloudinary’s caching capabilities. Setting up proper caching rules ensures that transformed images are served quickly, improving page performance and reducing server strain.
  10. Automate batch processing for large-scale projects
    When working on a large set of images, use Cloudinary’s batch processing API to automate the addition of sepia effects. By automating this process, you can standardize your visuals across multiple assets, maintain consistent quality, and save time on repetitive image edits.

These tips will help streamline your workflow and ensure that your sepia transformations are effective, efficient, and scalable for any project.

Last updated: Oct 3, 2024