Cloudinary is pivoting from storage

Cloudinary is moving way beyond just being a "CDN with an API" and leaning hard into AI-driven asset orchestration. If you're still using it just to host images and get a URL, you're basically using a Ferrari to drive to the mailbox. The real power now lies in their AI transformations—specifically how they're integrating generative fill and automatic cropping that actually understands the subject of the photo, not just the center of the frame.

I've been integrating their new AI capabilities into a Next.js project recently, and the productivity jump comes from offloading the "visual logic" from my frontend code to the URL parameters. Instead of writing complex CSS for object-fitting or manually cropping thumbnails for different viewports, I'm just piping transformation strings.

Here is a practical example of how I'm handling dynamic product imagery now. Instead of storing five versions of an image, I store one high-res original and use the g_auto (gravity auto) and c_fill parameters. The AI detects the "interesting" part of the image and crops around it automatically:

// Instead of static assets, I'm building dynamic URLs
const getOptimizedImage = (publicId, width, height) => {
  return `https://res.cloudinary.com/demo/image/upload/w_${width},h_${height},c_fill,g_auto,f_auto,q_auto/${publicId}`;
};

The f_auto,q_auto combo is a non-negotiable for me now—it serves AVIF or WebP based on the browser without me having to write a single line of conditional logic.

One huge productivity win is their Generative AI background removal. I used to spend hours in Photoshop or writing messy Python scripts with rembg to clean up product shots. Now, I just add e_bgremoval to the transformation string.

If you're using Cursor to build your frontend, don't let it write the image logic in React. I've found that if I tell Cursor: "Use Cloudinary's URL transformations for cropping and optimization rather than CSS object-fit," the resulting code is much cleaner and the LCP (Largest Contentful Paint) scores drop significantly because the server is doing the heavy lifting.

A few gotchas I hit during the transition:

The "AI Credit" Trap: The generative transforms (like background removal or generative fill) consume "AI Credits" which are separate from your standard bandwidth/storage. If you put a generative transform in a loop on a high-traffic page, you will burn through your monthly quota in hours. Always cache these results or use a permanent URL.

Z-Index and Layering: When using AI-generated overlays, the coordinates can sometimes be slightly off depending on the aspect ratio of the source image. Always test with a variety of source dimensions before pushing to production.

URL Length: Once you start stacking AI effects, your URLs become monstrous. I highly recommend using "Named Transformations" in the Cloudinary dashboard. You define the AI logic once in the UI, give it a name like product_hero, and then your code just looks like:

<img src="https://res.cloudinary.com/demo/image/upload/t_product_hero/sample.jpg" />

This keeps the codebase clean and allows the design team to tweak the "AI look" in the dashboard without me having to redeploy the app.