Programmable Media
Menu

Transformation tutorials

Last updated: Oct-09-2024

This page offers a library of short video tutorials introducing you to image and video transformations.

On this page:

Get started with transformations

Transformation Basics
Learn the basics of a transformation URL

Transformation Builder
A quick overview of the Transformation Builder

Gravity Crops for Images
Indicate which areas to keep when cropping

Enhance and Restore Images
Use enhance, restore, upscale and improve effects to make your images shine

Transformation Overlays
Add transformation overlays to assets on the fly using the Node.js SDK

Content-aware Image Cropping
Smartly crop an image using content-aware AI

Content-aware Video Cropping
Smartly crop a video using content-aware AI

Videos to Animated Images
Convert videos to animated image formats on the fly

Advanced transformation features

Text Overlays
Place text on top of your images using the transformation editor

Complex Transformations
Combine transformations to generate a 3D canvas

Named Transformations
Simplify & standardize complex delivery URLs

Named Transformations using TX Builder
Create re-usable transformations with the Transformation Builder UI

Advanced Image Components
SDK components to improve your user's experience

Trim Videos in Node.js
Trim videos using the Node.js SDK

Splice Videos in Node.js
Splice two videos together using the Node.js SDK

Zoompan Effect
Apply the Ken Burns effect to zoom and pan on an image

Video Transformations
Build an e-commerce video showcasing products, in Node.js

Crop and Resize Images in React
Crop and resize images using React with Cloudinary

Crop and Resize Videos in React
Crop and resize videos using React with Cloudinary

Crop and Resize Images in Python
Crop and resize images using Python with Cloudinary

Remove Backgrounds and Add Drop Shadows
Remove image backgrounds and add drop shadows in a React app

AI Generative Fill using Next.js
Extend images using generative AI in a Next.js app

Color Accessibility in JavaScript
Make your images accessible to color blind people

Transformations for social media

Create Social Media Cards in Next.js
Dynamically create social media image cards using Next.js

Create Social Media Cards in Svelte
Dynamically create social media image cards using Svelte

✔️ Feedback sent!

Rate this page: