Programmable Media

Transformation tutorials

Last updated: Dec-11-2024

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

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: