Animated GIFs consist of multiple images or frames played back in sequence. They were initially designed for graphics but have evolved. They are now commonly used for different use cases on the web, such as video previews, product demonstrations or service instructions, humor, and so on. Animated GIFs are a quick and easy way to present dynamic content on web pages and applications with small sizes compared to other alternatives.
Manually transforming a large number of animated GIFs can be tasking and time-consuming. As a result, Cloudinary extends its image and video transformation prowess to work seamlessly with animated GIFs. In this article, we’ll look at ways to transform animated GIFs using Cloudinary. Without further ado, let’s get started.
Here is a link to the demo on CodeSandbox.
Create a Next.js app using the following command:
npx create-next-app cld-gif-transform
Next, add the project dependencies using the following command:
npm install cloudinary axios
The Node Cloudinary SDK will provide easy-to-use methods to interact with the Cloudinary APIs, while axios will serve as our HTTP client.
To use Cloudinary’s provisioned services, you must first sign up for a free Cloudinary account if you don’t have one. Displayed on your account’s Management Console (aka Dashboard) are important details: your cloud name, API key, etc.
Next, let’s create environment variables to hold the details of our Cloudinary account. Create a new file called .env at the root of your project and add the following to it:
CLOUD_NAME = YOUR CLOUD NAME HERE
API_KEY = YOUR API API KEY
API_SECRET = YOUR API API SECRET
This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env file using the following command:
cp .env .env.local
Code language: CSS (css)By default, this local file resides in the .gitignore folder, mitigating the security risk of inadvertently exposing secret credentials to the public. You can update the .env.local file with your Cloudinary credentials.
We need to pass the public id of the asset to be transformed as an argument to Cloudinary transformation methods. As a result, we’ll need to upload one animated GIF to Cloudinary. See here for how to upload files to Cloudinary via the Media Library.
After that, you should see the newly uploaded animated GIF and its public id in your media library.
We chose this approach of uploading files to Cloudinary to get things up and running. You can also upload files programmatically using Cloudinary’s Upload API.
Just like with image transformations, Cloudinary makes it easy to transform the style and dimension of animated GIFs on the fly using the dynamic transformation URL syntax.
The default Cloudinary asset delivery URL has the following structure:
https://res.cloudinary.com/<cloud_name>/<asset_type>/<delivery_type>/<transformations>/<version>/<public_id>.<extension>
Code language: HTML, XML (xml)Where cloud_name is the name of any specified Cloudinary account, asset_type depicts the type of asset to deliver, and delivery_type indicates the storage or delivery type. version, public_id, and extension mean the file version, its unique identifier, including the folder structure if applicable, and the file extension of the requested delivery format for the asset. In a single URL component, transformations denote one or more comma-separated transformation parameters.
Although we can manually build transformation URLs in our code to follow the syntax shown above, It is easier to take advantage of Cloudinary’s Node.js SDK to streamline the process. It provides helper methods to simplify building image transformation URLs.
Let’s apply some transformations to the GIF uploaded. Create a file called transformGif.js in the pages/api/ folder and add the following to it:
const cloudinary = require("cloudinary").v2;
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.API_KEY,
api_secret: process.env.API_SECRET,
secure: true,
});
export default async function handler(req, res) {
try {
const response = await cloudinary.image("giphy_nz4u8x.gif", {
transformation: [{ radius: "max" }, { effect: "blur:150" }],
});
res.status(200).json(response);
} catch (error) {
console.log(error);
res.status(400).json(error);
}
}
Code language: JavaScript (javascript)In the snippet above, we import and configure an instance of the Cloudinary Node.js SDK using our credentials. Next, we called the image method on the Cloudinary instance, which expects a string containing the public id as an argument. We also added a transformation object as an argument and set a couple of transformation parameters. As seen above, we set a blur effect and a maximum border-radius.
On success, we send a JSON response to the client; otherwise, an error is returned.
Cloudinary provides a lot of other transformation parameters. We’ll look at a few more in the following sections. Click here to learn more about the transformation parameters. To see the difference between the original and the transformed animated GIF, replace the content of your pages/index.js file with the following:
import { useState } from "react";
import axios from "axios";
import MainView from "../components/MainView";
import styles from "../styles/Home.module.css";
export default function Home() {
const [transformedImg, setTransformedImg] = useState("");
const [reqStatus, setReqStatus] = useState("");
const getTransformedImg = async () => {
setReqStatus("loading...");
try {
const response = await axios.get("/api/transformGif");
const imgUrl = /'(.+)'/.exec(response.data)[1];
setTransformedImg(imgUrl);
setReqStatus("Done..");
} catch (error) {
setReqStatus("An error occurred");
console.log(error);
}
};
return (
<main className={styles.main}>
<h1>Transform Gif</h1>
<MainView
reqStatus={reqStatus}
transformedImg={transformedImg}
callFunction={getTransformedImg}
btnText="Transform GIF"
/>
</main>
);
}
Code language: JavaScript (javascript)In the code above, we made use of some predefined styles. Copy the styles in this codeSandbox link to your Home.module.css file in the /styles directory.
Next, we created a Home component that defines a transformedImg state to hold the transformed image URL and a reqStatus state to keep track of the request status.
We also defined a getTransformedImg function that makes an Axios request to the /api/transformGif endpoint to get the transformed image. Cloudinary returns a new <img> element with the transformed URL as a response, so we extract just the URL rather than dangerously setting the <img> element to the DOM. The extracted transformation URL and the request status are then set to their corresponding states.
We also imported a component called MainView, which we have yet to create. It gets rendered, and we pass the required props.
Now let’s create the MainView component. Create a folder called components at the root level of the application. Create a file called MainView.js in the components folder and add the following to it:
import styles from "../styles/Home.module.css";
export default function MainView({
reqStatus,
transformedImg,
callFunction,
btnText,
}) {
const handleClick = () => {
callFunction();
};
return (
<div className={styles.container}>
<div className={styles.input}>
<div>
<img
src="https://res.cloudinary.com/ifeomaimoh/image/upload/v1656165531/giphy_nz4u8x.gif"
alt="input-gif"
/>
</div>
<button onClick={handleClick} disabled={reqStatus === "loading..."}>
{btnText}
</button>
<p>{reqStatus}</p>
</div>
<div className={styles.output}>
{transformedImg && (
<img
src={transformedImg}
alt="transformed-img"
className={styles.full_width}
/>
)}
</div>
</div>
);
}
Code language: JavaScript (javascript)The component expects the following as props:
- The request status state.
- The transformed image.
- A custom button text.
- A function that makes the request to the API route.
The MainView component then renders the uploaded GIF, the transformed animated GIF, and a button to the DOM. To keep things simple, we only copied and added the uploaded GIF URL from Cloudinary rather than having to retrieve it programmatically.
When clicked, the button triggers a handleClick function, which calls the request function.
Save the file and start your application on http://localhost:3000/ using the following command:
npm run dev
A frame is a single image combined with other images to form an animated GIF. Cloudinary has a delay parameter (dl in URLs) that allows you to set the length of time (in milliseconds) between each frame of an animated GIF.
To set a delay between frames in our animated GIF, create a new file called setGifDelay.js in the pages/api/ folder and add the following to it:
const cloudinary = require("cloudinary").v2;
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.API_KEY,
api_secret: process.env.API_SECRET,
secure: true,
});
export default async function handler(req, res) {
try {
const response = await cloudinary.image("giphy_nz4u8x.gif", {
delay: "200",
});
res.status(200).json(response);
} catch (error) {
console.log(error);
res.status(400).json(error);
}
}
Code language: JavaScript (javascript)The code is identical to what we had in the transformGif.js file, except that we now pass the public id and a delay parameter set to 200 milliseconds.
To see this in the browser, create a new file in the pages/ folder called setDelayPage.js and add the following to it:
import { useState } from "react";
import axios from "axios";
import MainView from "../components/MainView";
import styles from "../styles/Home.module.css";
export default function Home() {
const [transformedImg, setTransformedImg] = useState("");
const [reqStatus, setReqStatus] = useState("");
const setGifDelay = async () => {
setReqStatus("loading...");
try {
const response = await axios.get("/api/setGifDelay");
const imgUrl = /'(.+)'/.exec(response.data)[1];
setTransformedImg(imgUrl);
setReqStatus("Done..");
} catch (error) {
setReqStatus("An error occurred");
console.log(error);
}
};
return (
<main className={styles.main}>
<h1>Change delay between frames</h1>
<MainView
reqStatus={reqStatus}
transformedImg={transformedImg}
callFunction={setGifDelay}
btnText="Set delay"
/>
</main>
);
}
Code language: JavaScript (javascript)The code is also similar to what we have in the index.js file, except that we changed the request function to make a call to the /api/setGifDelay route.
Save the changes and open http://localhost:3000/setDelayPage in your browser.
Since animated GIFs are made up of different images, Cloudinary provides a page parameter (pg in URLs) that can be used to get single frames from an animated GIF.
To get the 10th frame of the GIF, create a new file called getSingleFrame.js in the pages/api/ folder and add the following to it:
const cloudinary = require("cloudinary").v2;
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.API_KEY,
api_secret: process.env.API_SECRET,
secure: true,
});
export default async function handler(req, res) {
try {
const response = await cloudinary.image("giphy_nz4u8x.gif", { page: 10 });
res.status(200).json(response);
} catch (error) {
console.log(error);
res.status(400).json(error);
}
}
Code language: JavaScript (javascript)The only difference between this API route and the others is that to get the 10th from our GIF, we set the page parameter to 10.
To display the derived frame in your browser, create a file called singleFramePage.js in the pages/ folder and add the following to it:
import { useState } from "react";
import axios from "axios";
import MainView from "../components/MainView";
import styles from "../styles/Home.module.css";
export default function Home() {
const [transformedImg, setTransformedImg] = useState("");
const [reqStatus, setReqStatus] = useState("");
const getSingleFrame = async () => {
setReqStatus("loading...");
try {
const response = await axios.get("/api/getSingleFrame");
const imgUrl = /'(.+)'/.exec(response.data)[1];
setTransformedImg(imgUrl);
setReqStatus("Done..");
} catch (error) {
setReqStatus("An error occurred");
console.log(error);
}
};
return (
<main className={styles.main}>
<h1>Get single frame</h1>
<MainView
reqStatus={reqStatus}
transformedImg={transformedImg}
callFunction={getSingleFrame}
btnText="Get frame"
/>
</main>
);
}
Code language: JavaScript (javascript)Save the changes and open http://localhost:3000/singleFramePage in your browser. To get different frames of the animated GIF, you can also tweak the value of the defined page parameter in the pages/api/getSingleFrame.js file.
To automatically convert our GIF to a modern video format like webM or mp4, all we need to do is change the file extension. We would still have the same animated video, but it would result in a trade-off between visual quality and file size.
Create a file called gifToVideo.js in the pages/api folder and add the following to it:
const cloudinary = require("cloudinary").v2;
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.API_KEY,
api_secret: process.env.API_SECRET,
secure: true,
});
export default async function handler(req, res) {
try {
const response = await cloudinary.video("giphy_nz4u8x", {
resource_type: "image",
});
res.status(200).send(response);
} catch (error) {
console.log(error);
res.status(400).json(error);
}
}
Code language: JavaScript (javascript)In the code above, we imported and configured Cloudinary. Then we passed the public id of the uploaded animated GIF together with the resource type as an argument to its video method, which converts the GIF to a video format that works on all modern browsers (such as WebM, mp4, etc.) The response is then sent to the client; otherwise, an error is returned.
To play the resulting in your browser, create a gifToVideoPage.js file in the pages/ folder and add the following to it:
import { useState } from "react";
import axios from "axios";
import styles from "../styles/Home.module.css";
export default function Home() {
const [transformedImg, setTransformedImg] = useState("");
const [reqStatus, setReqStatus] = useState("");
const handleClick = () => {
convertGif();
};
const convertGif = async () => {
setReqStatus("loading...");
try {
const response = await axios.get("/api/gifToVideo");
const mp4Url = /https?[^<>]*?\.mp4/.exec(response.data)[0];
setTransformedImg(mp4Url);
setReqStatus("Done..");
} catch (error) {
setReqStatus("An error occurred");
console.log(error);
}
};
return (
<main className={styles.main}>
<h1>Transform Gif to video</h1>
<div className={styles.container}>
<div className={styles.input}>
<div>
<img
src="https://res.cloudinary.com/ifeomaimoh/image/upload/v1656165531/giphy_nz4u8x.gif"
alt="input-gif"
/>
</div>
<button onClick={handleClick} disabled={reqStatus === "loading..."}>
Convert to video
</button>
<p>{reqStatus}</p>
</div>
<div className={styles.output}>
{transformedImg && (
<video controls className={styles.full_width}>
<source src={transformedImg} type="video/mp4" />
Your browser does not support the video tag.
</video>
)}
</div>
</div>
</main>
);
}
Code language: JavaScript (javascript)In the code above, we used the same structure as in the previous pages, except that we no longer need the MainView component since we’re rendering a video in this section.
We defined a convertGif function that gets called when the button gets clicked. The function initiates an axios call to the /api/gifToVideo route to get the Cloudinary response. On conversion, Cloudinary returns a video tag with multiple sources that work in different modern browsers. However, we used a regular expression to extract only the mp4 URL to keep things simple and not have to render anything to the DOM forcefully.
The extracted URL is then saved in the transformedImg state, which is subsequently rendered using the video> tag.
To preview the changes, open http://localhost:3000/gifToVideoPage in your browser and click the button to convert the animated GIF to a video. You can also check the size to see the massive reduction in size.
We’ve looked at some transformation and optimization methods and created distinct pages in our application to display each. In addition, open your pages/_app.js file and update its content to add links that’ll enable easy navigation.
import Link from "next/link";
import "../styles/globals.css";
import styles from "../styles/Home.module.css";
function MyApp({ Component, pageProps }) {
return (
<>
<header className={styles.header}>
<ul>
<li>
<Link href="/">Transform GIF</Link>
</li>
<li>
<Link href="/setDelayPage">Delay between frames</Link>
</li>
<li>
<Link href="/singleFramePage">Single frame</Link>
</li>
<li>
<Link href="/gifToVideoPage">GIF to Video</Link>
</li>
</ul>
</header>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Code language: JavaScript (javascript)Find the complete project here on GitHub.
To avoid bloating this post, we’ll stop here; however, Cloudinary also allows us to do much more with animated GIFs. For example, we can choose to use lossy compression when delivering the animated GIF files, use Cloudinary’s Multi method and Zoompan effect to create animated images from scratch, and so on.
Resources You May Find Helpful