Built natively into Cloudinary, Moderation reviews assets in real time and determines whether they should be approved, flagged, or rejected based on your unique brand guidelines. No manual review queues. No generic moderation rules. Just consistent, scalable brand control.

Because as visual content volume grows, the risk of off-brand, noncompliant, or low-quality imagery grows with it — and manual review simply doesn’t scale.

Here’s what Cloudinary Moderation does, and why we built it.

Automatically Align Every Asset With Your Standards

Most brands have clear visual guidelines. Few can enforce them consistently at scale.

As content flows in from sellers, partners, creators, and customers, review bottlenecks grow. Standards drift. Risk increases.

Cloudinary Moderation transforms static brand guidelines into automated standards.

You can define brand rules such as:

• Quality, resolution, and size.
• Composition requirements like centered products or background standards.
• Logo placement and spacing consistency.
• Tone, lighting, and stylistic alignment.
• Blocking overlays, watermarks, or promotional badges.
• Detecting AI-generated or web-sourced content.
• Compliance and safety parameters.

Every asset receives a clear outcome:

• Approved
• Needs Review
• Rejected

And every decision is explainable, transparent, and fully auditable. Teams can override when necessary, ensuring humans remain in control where it matters most.

This is brand governance in action.

Accelerate Marketplace and Seller Growth

For marketplaces and e-commerce platforms, inconsistent imagery slows catalog expansion and undermines customer trust.

Sellers upload thousands of assets daily. Manual moderation becomes expensive and unpredictable. Standards vary. Listings stall.

Cloudinary Moderation checks marketplace requirements automatically, including:

• White background.
• Proper product framing and padding.
• Minimum resolution and sharpness.
• No unauthorized text overlays or watermarks.

Assets that fall within defined sensitivity thresholds are routed for review, balancing automation with precision.

The result:

• Faster listing publication.
• Reduced operational costs.
• Cleaner, more cohesive product pages.
• Improved browsing confidence and conversion.

When growth depends on onboarding speed, moderation becomes a growth engine.

Power UGC and Partner Content Workflows in Near Real Time

User-generated and partner-uploaded content introduces even greater variability.

Low-quality photography. Screenshots instead of original images. Misclassified categories. Off-brand aesthetics.

Cloudinary Moderation evaluates content at upload, delivering near real-time decisions with mapped rejection reasons. This enables:

• Faster partner and contributor onboarding.
• Clear feedback loops for users and contributors.
• Reduced moderation queues.
• Improved content quality from day one.

Instead of slowing growth, moderation accelerates it.

Reduce Compliance and Reputation Risk

Brand risk rarely originates from your internal creative teams. It emerges from external content sources, like unlicensed images, AI-generated assets, sensitive or unsafe visuals, even unauthorized logos.

Cloudinary Moderation proactively identifies these risks before they reach production.

With explainable decisions and override capabilities, organizations gain defensible governance embedded directly in the content lifecycle.

Moderation shifts from reactive cleanup to proactive protection.

Native to Cloudinary. Faster Time to Market.

Cloudinary has long empowered teams to manage, transform, and deliver visual content at scale.

With Moderation, Cloudinary now helps determine whether content should be used at all, and gives you the tools to fix it when it falls short.

Because Moderation is built directly into Cloudinary, assets can be evaluated, fixed, or enhanced using Cloudinary’s transformation and GenAI capabilities, and approved within the same platform. This turns moderation from a gate into an optimization loop.

Instead of rejecting content and sending it back through fragmented processes, teams can correct, re-evaluate, and publish faster — all within Cloudinary.

Embedding intelligent standards directly into your visual workflows marks a shift from media management to full lifecycle brand governance.

You can:

• Scale content without losing control.
• Reduce manual review and subjectivity.
• Shorten time to market.
• Fix and improve assets instead of discarding them.
• Maintain consistency across regions and teams.
• Protect customer trust before issues go live.

Because in a world driven by visual experiences, brand integrity isn’t optional.

It’s foundational.

Ready to Scale Your Brand With Confidence?

Cloudinary Moderation is now available within the Cloudinary Console.

Learn more about Cloudinary Moderation, get started for free, or contact us to see how AI-powered, brand-aligned moderation can transform your visual reviews.

The post Introducing Cloudinary Moderation: AI-Powered Brand Protection for Every Visual Asset appeared first on Cloudinary Blog.

The saga of JXL adoption has been a surprisingly dramatic one. While Google was one of the main proponents of the format — it was created in a collaboration between Google Research and Cloudinary, with guidance from the broader JPEG committee — this didn’t imply that Google Chrome would become an early adopter. But now it looks like in 2026 all pieces of the puzzle might finally come together.

In past blog posts, I have made the case for JPEG XL several times already. In a nutshell: superior image compression performance while ensuring a high fidelity (in particular for HDR images), legacy-friendly reversible JPEG recompression, and a very complete feature set including progressive decoding make it the most promising modern image format.

Cloudinary supports JXL since November 2020 already. But of course server-side support alone is not sufficient to be able to actually use it on the Web…

Browser Support, a Rollercoaster Ride

The story of JXL browser support has been one with quite some ups and downs. Let me give a brief summary of the main turning points.

Promising Start

In a promising start, experimental Chrome support for JXL was implemented in May 2021, followed by Firefox in July 2021. This was very early — the standard itself wasn’t officially published until March 2022, though the “final draft” (FDIS) of the file format specification was approved by the committee in April 2021, so the format was effectively frozen already.

In both browsers it was disabled by default and a configuration flag had to be manually changed to actually get JXL support. The general expectation was that this was temporary, and once the standard would be published and the implementation would be mature and well-tested, the feature would be enabled by default.

The libjxl implementation improved, bugs were squashed, the standard was finalized. Things were looking good.

Halloween Announcement

But then, exactly on Halloween 2022, a controversial announcement was made by the Chrome developers, saying they were planning to remove JXL support, citing “not enough interest from the entire ecosystem.”

Shortly afterwards, Mozilla announced in January 2023 that their position on JXL was “neutral,” i.e., they wouldn’t add support for it unless the other browsers would do that.

In February 2023, all JXL code was removed from Chrome.

JXL is Dead

At this point, it looked like the story was basically over for JXL support in browsers, and thus probably for JXL in general as a widely-supported image format. After all, browsers are such a critical part of so many workflows and use cases, that no image format can be considered ubiquitous and interoperable if it doesn’t have universal browser support.

Considering the market share of Chrome and Chromium-derived browsers such as Edge, a veto from Chrome essentially is a death sentence for any web feature.

Resurrection by Apple

In a plot twist, in June 2023 Apple announced that they were planning to add JXL support to their entire ecosystem, including iOS, macOS, and Safari. In September 2023, JXL support was rolled out in Safari.

The following months we saw a rapid increase in the number of image requests coming from browsers with JXL support in Cloudinary’s overall traffic.

Safari Rollout

The proportion of web clients with JXL support jumped from only a fraction of a percent beginning of September 2023 to a peak of around 25% around Christmas. It slowly grew to around 28% and has been fluctuating around that ratio for about two years now, with peaks above 30%.

(As a side note: This 28% browser support number is higher than the 12% reported by “Can I Use” or as cited in Arjen Karel’s excellent recent blog post about JPEG XL and Core Web Vitals. Likely this is caused by North America and Europe/U.K. being overrepresented in Cloudinary’s traffic — together over 75% of our traffic — which bumps up the proportion of iPhones in our logs.)

(As another side note: In case you’re wondering where those peaks are coming from: on desktop, about 10% of browsers support JXL, while on mobile, it is about 40%. On working days about 60% of our traffic is from mobile devices, while on weekends and holidays it is around 75%. The plot shows the numbers for Tuesdays, so it mostly shows “working day traffic,” except around holidays. In particular around the end of the year, this causes spikes in the plot.)

In the same period, the number of JXL images Cloudinary delivered per day also increased significantly, from practically none (around 50,000/day) in the summer of 2023 to around one billion per day at the time of writing. The spikes in overall amount of traffic are always very noticeable around Black Friday.

JXL: A Safari-Only Format?

Of course Safari’s support for JXL brought back hope for getting JXL support back into Chrome and Firefox. Alas, for both Interop 2024 and Interop 2025, making JXL an interoperable web format was proposed, but the proposals were not selected by the browser devs.

So it looked like JXL would become a Safari-only image format, similar to J2K and HEIC.

Meanwhile, Broad JXL Adoption Grew

JPEG XL was conceived with a diverse range of applications in mind from the start, as outlined in its use cases and requirements document. While web delivery is a key area, it is not the sole focus. Unlike formats such as WebP or AVIF, which were created specifically to optimize web bandwidth, JXL’s intended scope is much broader.

DNG: JPEG XL in Photography Workflows

Introduced in June 2023, version 1.7 of Adobe’s Digital Negative format, DNG, makes it possible to use JXL as a payload codec for RAW sensor data. In particular, both lossless and lossy JXL can be used. With legacy JPEG, lossy compression wouldn’t make sense for RAW files, since the precision would be too low to allow for adjustments in post-production. But JXL effectively has no precision limits and can do very high-fidelity lossy compression, which is a very attractive option for photography workflows.

Samsung introduced JXL as a payload in Expert RAW in the Galaxy S24 in January 2024, while Apple added JXL as a payload in ProRAW in the iPhone 16 Pro in September 2024.

More recently, hardware implementations of a JXL encoder have become available in November 2025, based on a design by Shikino High-Tech in collaboration with the JPEG committee. This will likely lead to consumer and professional camera vendors announcing new products that support JXL as a capture format in the near future.

PDF: Images Inside Documents

At PDF Days Europe 2025, Peter Wyatt, CTO of the PDF Association, announced that JPEG XL was selected as the preferred solution for HDR images embedded in PDF. He also mentioned other features of JXL that could be useful in PDF: wide gamut, ultra-high resolution, up to 32 bits per channel and up to 4099 channels.

It’s worth pointing out that JXL was designed with printing use cases in mind, including support for CMYK and spot colors. In that respect, there’s an obvious difference between JXL and image formats derived from video codecs, such as WebP, HEIC, and AVIF.

DICOM: Medical Imaging

In healthcare imaging (think MRIs, CTs, etc.),  JXL can be used as a payload codec in DICOM since the 2024d release. The defined JPEG XL transfer syntaxes include lossless, lossy, and JPEG recompression variants. According to pathologists at Mayo Clinic, for whole slide imaging (WSI) the file size reduction that can be achieved using JXL is 50-60%. The WSI archives at Mayo alone are growing by about 4000 terabytes per year, so such savings represent a substantial cost reduction.

In September 2025, Philips announced the first digital pathology scanner with native DICOM JXL output. Recently AWS HealthImaging also added JXL support.

Geospatial and Other Scientific Imaging

The Geospatial Data Abstraction Library (GDAL), released by the Open Source Geospatial Foundation (OSGeo), is a translator library for raster and vector geospatial data formats. It’s part of the backbone of many GIS applications, from Google Earth to OpenStreetMap. In November 2022, GDAL 3.6 was released, which added support for JXL and JXL payloads in GeoTIFF.

Also in other scientific applications JXL brings advantages, in particular for lossless or near-lossless compression of high bitdepth images, and for multispectral images for which Spectral JPEG XL was recently introduced.

Image Authoring Tools

All major image authoring tools support JXL as an import and export format: Adobe Photoshop and Lightroom, Affinity, Acorn, ACDSee Photo Studio, paint.net, GIMP, Krita, Darktable, and so on.

Many of them added support already back in 2022.

Operating System Support

Linux distributions were the first to add JPEG XL support at the OS-level. The integration of libjxl in both GTK (GNOME) and Qt (KDE) allowed some distributions like KaOS and OpenMandriva to add out-of-the-box JXL support as early as 2021. Popular distributions including Ubuntu now have JXL support included in default installs.

As mentioned before, Apple rolled out full support for JXL in September 2023 — not just in Safari but also at the OS level.

In March 2025, Microsoft added OS-level support for JXL in Windows 11.

Back to Browsers: Is JXL Support Finally Landing?

For a year or two, there was pretty much no news from Chrome and Firefox, and it looked like Safari would remain the only browser with JXL support. But in September 2024, something started changing. Bobby Holley, the CTO of Firefox, stated that “Firefox will consider a Rust implementation of JPEG XL. This announcement triggered the development of a Rust-based JXL implementation jxl-rs.

In November 2025, Rick Byers, Area Tech Lead on Chrome, announced:

“Since JPEG XL was last evaluated, Safari has shipped support and Firefox has updated their position. We also continue to see developer signals for this in bug upvotes, Interop proposals, and survey data. There was also a recent announcement that JPEG XL will be added to PDF. 

Given these positive signals, we would welcome contributions to integrate a performant and memory-safe JPEG XL decoder in Chromium. In order to enable it by default in Chromium we would need a commitment to long-term maintenance. With those and our usual launch criteria met, we would ship it in Chrome.”

This was obviously a big turning point. Within weeks, the jxl-rs decoder was integrated in both Chrome and Firefox. Also, JPEG XL was selected as an “investigation effort” for Interop 2026.

Right now, chances are that you’re reading this on a browser that can decode JXL images. In Safari or iOS, JXL is already supported for a while now. On Chrome, it is available behind a flag since M145, which was released on February 10th, 2026. The relevant flag is:

chrome://flags/#enable-jxl-image-format

There’s a test page on the JPEG XL community website to check if your browser supports JXL.

While experimental JXL support behind a flag has been in Chrome before, it looks like this time it will actually be shipped. At the time of writing, no date is known yet for having JXL enabled by default, but it seems likely that this will happen in 2026.

Timing and Interoperability

It’s interesting to compare the timing for the three modern image formats recently introduced. In case of both WebP and AVIF, generally speaking the format could be used on the Web well before it could be used in most other contexts. For JPEG XL, it’s more or less the other way around:

WebP, created by Google, was supported in Chrome even before the format was finalized — lossless mode, alpha transparency and animation didn’t exist yet in the early lossy-only version of WebP that Chrome initially supported. While Google was actively promoting the use of WebP on websites, for example by making sure that a Lighthouse Performance Audit would list any images that are not being served in WebP, broader ecosystem adoption outside web browsers (or even outside Chrome) was slow. This is perhaps not surprising: the format was not designed to have a broad scope in terms of use cases, and even though it is open source and royalty-free, it is a single-vendor proprietary format “owned” by Google, not by an international standards organization.

Format Frustration

However this lack of broader support for WebP has caused much user frustration, to the extent that it became a meme. Saving an image from a website and then using it in software other than a browser is something that works effortlessly with JPEG or PNG, but with WebP, it often still doesn’t work, e.g., even at the time of writing, inserting a WebP in a Google Docs results in “unsupported image type.”

While any new format inevitably causes friction, for JXL the order of adoption is pretty much the opposite of how it went with WebP. After being introduced in Chrome and being promoted as the format of choice for web images, it took a decade for “interest from the entire ecosystem” to emerge. In contrast, JXL is already supported in all image editors and viewers well before it can be used in Chrome. From the point of view of interoperability — which is, after all, the main point of standardization — this might be a good thing, actually.

Conclusion

Maybe it’s not surprising that it is hard to get yet another image format supported, when JPEG and PNG are considered “good enough” for most workflows. Both born in the 1990s, they have the undeniable advantage that by now they “just work anywhere”. For any new format, it’s hard to overcome inertia and inevitable initial interoperability issues, which make it attractive to just stick to the old formats.

Yet, as discussed above, JXL adoption in the broad ecosystem — photography, digital art, medical and scientific imaging, and so on  — actually was relatively swift. Adoption in browsers, on the other hand, was a roller coaster ride. But it looks like 2026 will be the year in which JXL is fully on track to become a worthy successor to good old JPEG and PNG. Knocking on wood, this dramatic saga will be concluding with a happy ending.

The post 2026, the Year of JPEG XL appeared first on Cloudinary Blog.

If you’ve been using Cloudinary to transform images, you’re probably familiar with the original Studio and the Transformation Builder. Both have been valuable tools for applying transformations to your images through an intuitive UI. Now, we’re introducing a new Studio that combines the best of both tools and adds powerful new capabilities.

The post Introducing the New Cloudinary Studio: Enhanced Image Transformation at Your Fingertips appeared first on Cloudinary Blog.

• Live Demo: https://vibecoder-storefront.vercel.app
• GitHub Repository: https://github.com/musebe/vibecoder-storefront

Why Messy Uploads Kill Conversion

The core problem with user-generated content (UGC) marketplaces is that they can look messy. An uploaded photo of an expensive shoe? Great! But the photo was taken on a dimly lit kitchen table with a cluttered background, and since the buyer can’t see all the intricate details, they’re more likely to click away.

For developers, bridging this gap at scale is a nightmare. There are, unfortunately, three bad options. You can force users to learn photography (impossible). Manually review and edit every asset (unscalable). Build brittle server-side processing queues (expensive and slow!).

A zero-touch “Art Director” can fix uploaded photos so you don’t have to. In this guide, I’ll walk you through how to create one.

The Virtual Mastering Architecture

Instead of building a traditional editing pipeline that generates duplicate files for every change, you’ll use a metadata-first architecture with:

• TanStack Start as the interface. It handles the secure, signed ingestion and enables type-safe server functions.
• Cloudinary Programmable Media as the intelligence. It restores, expands, and contextualizes the asset using generative AI.
• Virtual mastering as the state. Store the AI transformation recipe in the asset’s metadata, keeping the original file pristine while serving image worthy of being studio-grade.

The Agentic Workflow

By decoupling the raw asset from its mastered state, you’ll create a self-healing pipeline:

1. Ingestion. The user uploads a raw image via a secure, signed handshake.
2. Restoration. The agent automatically detects blur and compression artifacts (e_gen_restore).
3. Contextualization. The agent strips the messy background and generates a professional studio setting (e_gen_background_replace).
4. Hydration. The gallery fetches the raw asset and metadata recipe to reconstruct the “mastered” view instantly, without waiting for search indexing.

Initializing the TanStack Engine

Before you build the intelligence, you’ll need a high-performance home for it. You’ll utilize TanStack Start because it bridges the gap between client-side interactivity and secure server-side operations without the bloat of traditional frameworks.

The Project Scaffold

Run the following command in your terminal to create a fresh, type-safe workspace. This sets up the router, TypeScript, and Tailwind CSS automatically.

npm create @tanstack/start@latest vibecoder-storefront

The ‘Engine’ Architecture

To keep your AI mastering logic isolated and scalable, enforce a domain-driven folder structure. Don’t scatter files into generic components or utils folders. Instead, group everything related to the “Art Director” agent into a single feature directory.

Create the following structure inside your src folder:

src/
├── features/
│   └── upload/
│       ├── components/    # The "Control Room" (Client-Side UI)
│       │   ├── AIControlPanel.tsx
│       │   ├── AIPreview.tsx
│       │   └── UploadZone.tsx
│       └── server/        # The "Engine Room" (Server Functions)
│           └── upload.fn.ts
└── lib/
    └── cloudinary.ts      # SDK Configuration

• Components. These are your visual controls. They never touch the database or API keys directly.
• Server. Files (like upload.fn.ts) run strictly on the server, keeping your API secrets safe from the browser.

Environment Variable Configuration

The connection between your TanStack server and the Cloudinary media cloud requires a secure bridge.

Create a .env file in your root directory. Note the distinction between the Public key (safe for the browser) and the Secret key (server-only).

# Client-Side (Vite)
VITE_CLOUDINARY_CLOUD_NAME="your_cloud_name"

# Server-Side (TanStack Functions)
CLOUDINARY_API_KEY="your_api_key"
CLOUDINARY_API_SECRET="your_api_secret"

Pro Tip: Never prefix your API_SECRET with VITE_. It must remain invisible to the client to prevent unauthorized access to your media library.

The SDK Singleton

Finally, you’ll create a centralized instance of the Cloudinary SDK to avoid re-initializing it in every file.

File: src/lib/cloudinary.ts

import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
  cloud_name: process.env.VITE_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
  secure: true,
});

export { cloudinary };

With the engine initialized, you’re ready to configure the security protocols that will protect your pipeline.

The Security Gateway: Configuring Cloudinary Presets

The AI Agent needs a sterile environment to operate. You don’t want it auditing every random upload in your cloud; you want a dedicated pipeline for the Storefront.

To achieve this, configure a signed upload [=preset. This acts as a strict “doorman” that enforces your governance rules at the edge.

The ‘Signed’ Protocol

In a production environment, “unsigned” presets are risky because they expose your cloud to unauthenticated uploads. For the Vibecoder Storefront, you’ll use signed mode.

• The logic. The frontend can’t upload a file unless it first requests a cryptographic signature from our TanStack server.
• The benefit. This allows us to rate-limit users, validate file types on the server, and enforce strict metadata rules before the upload even starts.

Configuring the ‘Doorman’ Preset

Follow these steps to configure the preset that guards your vibecoder_raw folder.

1. Log in to your Cloudinary Console..
2. Navigate to Settings (Gear Icon) > Upload.
3. Scroll down to Upload presets and click Add Upload Preset.

The Engine Configuration

Configure the preset with these exact settings to match your codebase:

• Preset Name: vibecoder_signed
  • Note: This key is hardcoded in our upload.fn.ts server function.
• Signing Mode: Select Signed.
• Folder: Type vibecoder_raw.
  • The Quarantine: By hardcoding this folder, you’ll ensure that all raw user uploads land in one isolated location, keeping your main media library clean.
• Unique filename: On.
  • Why? It prevents overwrites if two users upload shoe.jpg at the same time.
• Delivery type: Upload.

Save and Deploy

Click Save. You should now see vibecoder_signed in your list with the mode set to “Signed.”

The Architecture: Quarantine Zone

By configuring this preset, you’ve created a quarantine zone.

• In: vibecoder_raw (raw, messy user uploads).
• Out: The gallery (curated, AI-mastered assets).

The AI Agent will only listen to assets that land in this folder, ensuring it never accidentally modifies your other marketing assets.

The Ingestion Engine: Server-Side Signing

Professional applications do not expose API secrets to the browser. Instead, you’ll implement a cryptographic handshake.

1. Request: The client asks: “May I upload?”
2. Sign: The server verifies the request and uses the CLOUDINARY_API_SECRET to generate a time-limited signature.
3. Upload: The client attaches this signature to the file and sends it directly to Cloudinary.

The Server Function: getUploadSignature

In TanStack Start, you’ll create a Server Function that runs strictly in the backend. This function uses the Cloudinary SDK to generate a signature without ever revealing the secret key to the client.

// src/features/upload/server/upload.fn.ts

export const getUploadSignature = createServerFn({ method: 'POST' })
  .handler(async () => {
    const timestamp = Math.round(new Date().getTime() / 1000);
    
    // The "Engine": Generates the cryptographic token
    const signature = cloudinary.utils.api_sign_request(
      {
        timestamp,
        upload_preset: 'vibecoder_signed', // Matches our Cloudinary setting
      },
      process.env.CLOUDINARY_API_SECRET!
    );

    return { signature, timestamp, apiKey: process.env.CLOUDINARY_API_KEY! };
  });

View full source: src/features/upload/server/upload.fn.ts

The UI Component: UploadZone

Now, you’ll build the “control room” component. This React component handles the drag-and-drop interaction and initiates the handshake.

// src/features/upload/components/UploadZone.tsx

export function UploadZone({ onUploadComplete }: UploadZoneProps) {
  return (
    <CldUploadWidget
      // The Handshake: We fetch the signature from our server function
      signatureEndpoint={async () => {
        const { signature, timestamp, apiKey } = await getUploadSignature();
        return { signature, timestamp, apiKey };
      }}
      onSuccess={(result) => {
        // The Handoff: Pass the publicId to the Art Director
        if (result.info && typeof result.info === "object") {
          onUploadComplete(result.info.public_id);
        }
      }}
    >
      {({ open }) => (
        <button onClick={() => open()} className="...">
          Upload Raw Asset
        </button>
      )}
    </CldUploadWidget>
  );
}

View full source: src/features/upload/components/UploadZone.tsx

The Result

When the user drops a file:

1. The UploadZone calls getUploadSignature.
2. The Server returns a valid token.
3. The Widget uploads the file to the vibecoder_raw folder.
4. The public_id is passed to the next stage: The Art Director.

Constructing the Logic: Repair and Expand

The first job of an Art Director isn’t to be creative; it’s to be corrective. User uploads are often blurry, compressed, or tightly cropped. You can fix these issues programmatically using a deterministic chain to repair and expand.

• The restoration layer. Use generativeRestore() as a “Digital Polish.” This two-pass restoration filter removes JPEG artifacts and sharpens blurry details, ensuring the base asset is high quality before we modify it.
• The expansion layer. Product photos often suffer from tight cropping, where the item touches the edges of the frame. You can use generativeFill() combined with pad() to intelligently expand the canvas to a 1:1 square ratio. The AI invents realistic surroundings (e.g., extending a table surface) where none existed before.
• The repair chain. Combine these two powerful operations into a single, type-safe transformation chain within your AIPreview component.

// src/features/upload/components/AIPreview.tsx

import { pad } from '@cloudinary/url-gen/actions/resize';
import { generativeFill } from '@cloudinary/url-gen/qualifiers/background';
import { generativeRestore } from '@cloudinary/url-gen/actions/effect';

// ... inside your component
if (config.fill) {
  // 1. Expansion: Force 1:1 ratio and invent missing pixels
  aiImage.resize(
    pad()
      .width(1000)
      .aspectRatio("1:1")
      .background(generativeFill())
  );
}

if (config.restore) {
  // 2. Restoration: Fix blur and compression
  aiImage.effect(generativeRestore()); 
}

View full source: src/features/upload/components/AIPreview.tsx

The Result

By chaining these methods, you’ll turn a low-res, rectangular phone photo into a sharp, square, studio-ready asset. This provides the perfect blank canvas for the next step of creative contextualization.

The Creative Engine: Context and Variants

The second phase transforms the product from a snapshot into a studio shoot. You’ll use natural language prompts to generate photorealistic environments and create inventory variants without a reshoot.

The Context Layer

Use generativeBackgroundReplace() to strip away the original messy environment (kitchen tables, cluttered desks) and generate a new one based on a text prompt.

• The logic: The AI automatically segments the foreground object, generates a new background, and blends the lighting and shadows to match.
• The prompt: “Studio lighting, minimalist concrete podium, soft shadows.”

The Variant Layer

To scale your catalog, you need to show different color options. Instead of photographing every SKU, we use generativeRecolor(). This allows us to target specific objects (e.g., “Sneakers”) and swap their color values instantly (e.g., to #FF0000).

The “Aha!” Moment: The Creative Chain

We implement these creative directives as conditional layers in our transformation pipeline.

// src/features/upload/components/AIPreview.tsx

import {
  generativeBackgroundReplace,
  generativeRecolor,
} from "@cloudinary/url-gen/actions/effect";

// ... inside the transformation logic
if (config.bgReplace) {
  // 1. Context: "Put it on a marble table"
  aiImage.effect(generativeBackgroundReplace().prompt(config.bgReplace));
}

if (config.recolor?.item && config.recolor?.color) {
  // 2. Variant: "Make the shoes red"
  aiImage.effect(generativeRecolor(config.recolor.item, config.recolor.color));
}

The Result

With just a few lines of code, a single uploaded image now serves as the source for unlimited marketing variations, different backgrounds for different campaigns, and different colors for different inventory SKUs.

The Persistence Engine: Virtual Mastering

Traditional editors create a mess of image_v1.jpg, image_v2.jpg. This kills storage and breaks the link to the original asset. We solve this by storing the AI transformation string in the asset’s metadata (context).

The ‘Single Asset’ Philosophy

1. The asset is immutable. We never overwrite the raw upload.
2. The recipe is dynamic. We save the Cloudinary transformation string (e.g., e_gen_restore/e_bg_replace:studio) to a custom context key called mastered_chain.
3. The result. Zero storage cost for variations.

The Server Function: saveMasteredImage

You’ll use the Cloudinary Admin API to patch the metadata without re-uploading the image.

// src/features/upload/server/upload.fn.ts

export const saveMasteredImage = createServerFn({ method: "POST" })
  .inputValidator(
    z.object({ publicId: z.string(), transformation: z.string() })
  )
  .handler(async ({ data }) => {
    // The "Engine": Updates metadata, not the file
    await cloudinary.uploader.explicit(data.publicId, {
      type: "upload",
      context: { mastered_chain: data.transformation },
    });
    return { success: true };
  });

View full source: src/features/upload/server/upload.fn.ts

The ‘Hydration’ Logic

When the gallery loads, it doesn’t look for a new file. It fetches the raw image and the mastered_chain string and reconstructs the “Mastered” view on the fly. This ensures the Art Director can always undo or remix the edit later.

The Zero-Distortion Interface

A masterful asset looks amateur if the UI stretches it. A horizontal camera shot looks terrible when forced into a vertical card. To fix this, build a context-aware visualizer.

The Container Strategy

Start by enforcing a strict aspect-square grid for the container, but allow the asset to float freely inside it using object-contain.

1. The grid sets a predictable 1:1 rhythm for the gallery.
2. The asset uses max-w-full and max-h-full to fit perfectly without touching the edges.
3. The result is a product that centers itself as if it were shot professionally, whether it’s tall (bottle) or wide (shoes).

The Context-Aware Slider

Next, implement a CompareSlider component that handles the before and after reveal without layout shifts.

// src/features/upload/components/CompareSlider.tsx

export function CompareSlider({ before, after }: CompareSliderProps) {
  return (
    <div className="relative w-full aspect-square rounded-3xl overflow-hidden bg-gray-50 border border-gray-100">
      {/* The After Image (Base) */}
      <AdvancedImage 
        cldImg={after} 
        className="absolute inset-0 w-full h-full object-contain p-8" 
      />
      
      {/* The Before Image (Overlay) */}
      <div 
        className="absolute inset-0 w-1/2 overflow-hidden border-r-2 border-white/50"
        style={{ width: `${sliderPosition}%` }}
      >
        <AdvancedImage 
          cldImg={before} 
          className="absolute inset-0 w-full h-full object-contain p-8" 
          // Crucial: Counter-translate to keep image static while container clips
          style={{ width: '200%' }} 
        />
      </div>
    </div>
  );
}

View full source: src/features/upload/components/CompareSlider.tsx

The Layout Logic

By adding p-8 (padding) and object-contain, you can create a “virtual matte” around the product. This ensures that even if the AI expands the background, the core product remains the visual anchor of the card.

The Retrieval Engine: Instant Sync

When a user clicks Save, they expect the gallery to update immediately. However, standard Search APIs often have a two- to five-second indexing delay. This creates a phantom state during which the user wonders if their edit actually worked.

Solve this by switching to the Admin API to read directly from the folder source.

The Bottleneck: Search vs. Admin

The Search API is fast for filtering millions of assets, but suffers from index lag. The Admin API, on the other hand, is slower for massive datasets, but offers real-time consistency for specific folders.

Since your vibecoder_raw folder is a curated workspace, you should prioritize consistency over raw query speed.

The Server Function: getGalleryImages

Implement a direct fetch using cloudinary.api.resources. This bypasses the search index and reads the file list straight from the disk.

// src/features/upload/server/upload.fn.ts

export const getGalleryImages = createServerFn({ method: "GET" }).handler(
  async ({ data }) => {
    // 1. Direct Fetch: Bypasses the Search Index
    const result = await cloudinary.api.resources({
      type: "upload",
      prefix: "vibecoder_raw",
      max_results: 50,
      context: true, // Crucial: Fetches the 'mastered_chain' metadata
      direction: "desc",
    });

    // 2. Client-Side Sort: Ensures "Recently Saved" pops to the top
    const sorted = result.resources.sort((a, b) => {
      const dateA = new Date(a.updated_at || a.created_at).getTime();
      const dateB = new Date(b.updated_at || b.created_at).getTime();
      return dateB - dateA;
    });

    return sorted.map((res) => ({
      publicId: res.public_id,
      masteredChain: res.context?.custom?.mastered_chain || null,
    }));
  }
);

View full source: src/features/upload/server/upload.fn.ts

The Result

By manually sorting based on updated_at, the gallery becomes self-healing. As soon as the metadata patch is confirmed, the asset jumps to the top of the list with its new AI transformation applied, creating a seamless feedback loop for the Art Director.

The Future of Media Operations

You’ve successfully moved from an approach in which every new image requirement meant a new code deployment, to an AI Agent architecture. By decoupling the asset (the raw file) from the intent (the metadata recipe), you created a system that’s:

1. Efficient for massive volumes of storage. One thousand product variants now cost 0 bytes of extra storage due to keeping 1,000 text strings in the metadata.
2. Self-healing. If the AI model improves next month, you don’t need to reupload files. Just rerun the saveMasteredImage function to update the metadata, and the frontend will instantly reflect the better quality.
3. Governance-ready. Because the mastered state is just data, you can easily add a step for human oversight (e.g., adding an approved: true flag to the metadata) before publishing to the live storefront.

Declarative Media

The true breakthrough is the shift from imperative editing (e.g., crop to 500px, increase brightness by 10%) to declarative intent (e.g., make this look like a studio shoot). The old method is brittle, pixel-perfect fragility, while the vibecoder method is semantic, resilient, and adaptive.

Next Steps: Extending the Agent

This architecture is the foundation. To scale it into a full enterprise digital asset management (DAM) system, your next engineering steps would be:

• Multi-channel variants. Add a new metadata key for social_story_chain to automatically generate 9:16 vertical video assets from the same static product shot.
• Webhooks. Use Cloudinary notification URLs to trigger a Slack alert whenever the AI Agent finishes a batch of 100 restorations.
• Role-based access. Lock the saveMasteredImage function behind an admin role so only approved Art Directors can commit changes to the public gallery.

You now have the blueprint! Sign up for a free Cloudinary account today and build the future of automated media.

Resources:

• Live Demo: https://vibecoder.vercel.app
• Source Code: https://github.com/musebe/vibecoder-storefront
• Cloudinary Docs: Generative AI Transformations

The post The Vibecoder Storefront: Automating Premium UGC With TanStack Start and Cloudinary AI appeared first on Cloudinary Blog.

In the multi-device era, responsive design often just means cropping an image until it fits.

We’ve all been there. You upload a stunning landscape hero image and it looks great on desktop. But when the layout shifts to a vertical mobile view (9:16) or a square card (1:1), standard CSS takes over.

The fragmentation of modern screens makes fixed-ratio assets a liability.

The industry standard, object-fit: cover, is aggressive. It blindly chops off the edges to fill the container. If your subject isn’t dead center, they get decapitated. This isn’t just a layout bug; it’s a conversion killer.

• E-commerce. You crop out the heel of the shoe.
• Portrait. You crop the forehead of the CEO.
• Travel. You crop the landmark out of the skyline.

To fix this manually, developers write complex media queries or force content teams to upload three different versions of the same asset. That is unscalable technical debt.

You need a “zero-cut” architecture. With a single upload of a high-quality source image, your application will automatically:

• Detect the subject.
• Decide if it needs to crop (zoom) or expand (pad).
• Generate the perfect pixels to fill the gap.

The result is one source asset intelligently expanded and focused across Story, Post, and Banner layouts.

The Architecture: Context-Aware Rendering

To prevent the subjects in our images from awkward cropping, you’ll need more than just CSS. You’ll need a component that makes a content-aware decision before the image even loads.

This logic will be built into a smart component that evaluates the target aspect ratio against the source. It’ll choose between two distinct AI strategies:

1. Strategy A: The Smart Crop (g_auto)

• When to use it: When the aspect ratio change is minor (e.g., Landscape 4:3 to Square 1:1).
• What it does: It zooms in slightly but keeps the most interesting part of the image (faces, products) centered using gravity="auto".
• Result: A tight, focused composition.

2. Strategy B: The Generative Pad (gen_fill)

• When to use it: When the change is extreme (e.g., Panoramic 16:9 to Vertical Story 9:16).
• The problem: Cropping here would destroy the image. You’d lose the scenery or the subject’s context.
• The solution: Don’t crop. Scale the image to fit inside the container and ask the AI to “paint” the missing pixels (sky, floor, walls) to fill the empty space.
• The result: The original subject is preserved 100%, and the layout is filled seamlessly.

Instead of relying on heavy client-side effects, you’ll calculate the aspect ratio delta directly in the render pass.

If the target is significantly taller than it is wide (like a mobile story), you’ll trigger Strategy B. For everything else, Strategy A usually suffices.

The Tech Stack (Next.js 16 + Cloudinary)

To build a “zero-cut” engine that’s fast, type-safe, and scalable, let’s go with a stack that enforces modern industry best practices.

The core components are:

1. Next.js 16 (App Router) as the backbone. You’ll use server components for initial data fetching and client components only where interaction (like this responsive grid) is required.
2. Cloudinary AI as the brain. Instead of resizing images in CSS, Cloudinary will generate new pixels on the fly.
3. @cloudinary/url-gen as the builder. Instead of prone-to-error string concatenation (e.g., image/upload/w_500...), you’ll use a type-safe SDK to construct transformations.

Building the Core: The SmartImage Component

At the heart of this solution is SmartImage.tsx. This component wraps the Cloudinary image component (CldImage) and injects our layout logic.

The ‘No-Effect’ Paradigm

A common mistake in React is to use useEffect to calculate derived state, like deciding whether to crop or pad based on props. This causes a “flash of wrong content” and unnecessary re-renders.

Instead, calculate your strategy directly in the render pass. This is faster, cleaner, and ensures the correct layout is sent to the server (or hydration) immediately.

The Logic: Aspect Ratio Delta

Let’s determine strategy by comparing the requested width and height. If the image is requested in an “extreme” vertical format (like a Story), it’s time to switch strategies.

Here’s the logic inside your component:

// src/components/features/media/SmartImage.tsx

export default function SmartImage({ width, height, ...props }) {
  // 1. Calculate the Aspect Ratio
  const aspectRatio = width / height;

  // 2. Define "Extreme" (e.g., Stories are usually 0.56)
  const isExtremeVertical = aspectRatio < 0.6;

  return (
    <CldImage
      {...props}
      width={width}
      height={height}
      // 3. Conditional Strategy Switch
      {...(isExtremeVertical
        ? {
            // Strategy: Generative Fill (Zero-Cut)
            crop: "pad",
            fillBackground: true,
          }
        : {
            // Strategy: Smart Crop (Focus)
            crop: "fill",
            gravity: "auto",
          })}
    />
  );
}

By simply passing fillBackground: true when crop="pad" is active, you’ll trigger Cloudinary’s generative AI, which will analyze the image content and extend it naturally to fill the 9:16 container.

Generative Fill in Action

Most developers rely on crop="fill" (CSS cover), which zooms in until the container is full. This is dangerous because it deletes pixels.

With a “zero-cut” strategy, instead of zooming in, you’ll effectively zoom out until the entire image fits inside the container. Then, you’ll ask Cloudinary’s generative AI to paint the empty space.

Here’s how this single strategy solves the three hardest layout challenges:

Case Study 1: The Vertical Story (9:16)

• The problem: You have a landscape photo of a sneaker on a table. If you crop it to 9:16, you lose the toes and the heel. You only see the laces.
• The solution: The image is scaled down to fit the width. The AI analyzes the texture of the table and the lighting of the room, then generates more “table” at the bottom and more “room” at the top.
• The result: A perfect mobile-first asset where the product is fully visible, surrounded by context that didn’t exist in the original photo.

Case Study 2: The Square Post (1:1)

• The problem: A wide group shot of five people. A center crop cuts off the two people on the edges.
• The solution: The system fits the width of the group into the square. This leaves empty space above and below (letterboxing).
• The result: The AI fills that “letterbox” space with convincing background extensions. You keep all five people in the frame, and the image looks like it was shot natively for Instagram.

Case Study 3: The Cinematic Banner (16:9)

• The problem: A tall portrait of a model. Cropping to 16:9 zooms in on just the eyes, losing the outfit.
• The solution: The model is centered. The AI extends the background horizontally, turning a portrait studio shot into a cinematic wide shot.

By flipping the logic from “Remove Pixels” to “Generate Pixels,” we guarantee that the subject is never lost.

Live Demo and Source Code

You can see the “zero-cut” engine in action and explore the implementation details through the links below.

• Live demo: Witness how a single source asset adapts to Story, Post, and Banner formats in real time. subject-aware-layouts.vercel.app

• Explore the codebase: The project is built with a focus on high performance and long-term maintainability, utilizing several modern architectural patterns.

• GitHub source code: github.com/musebe/subject-aware-layouts

This concludes our guide on scaling subject-aware layouts. By moving away from aggressive cropping and toward generative AI strategies, you can ensure your UI remains professional and your subjects remain the star of the show, regardless of the device.

Sign up for a free Cloudinary account today and start building your next project.

The post Scaling Subject-Aware Layouts: Solving Multi-Device Quality With React and AI appeared first on Cloudinary Blog.

But at Cloudinary, we haven’t forgotten our main reader: you.

You still come to our docs to learn, experiment, build, and engage…and ideally enjoy the process.

That’s why we’ve added something new to the Cloudinary docs: an interactive mystery game that teaches you how things work while you play.

Clara Denari Does It Again

If you enjoyed learning about Cloudinary through Clara Denari and the Mysterious Transformations, you’ll love what comes next.

This time, the mystery isn’t on a standalone site. It’s woven directly into the docs.

A Case That Starts With a Blurry Photo

The new mystery begins with a small neighborhood dispute. Clara discovers a pair of sapphire earrings in her backyard. Her neighbor insists they’re a treasured family heirloom and produces an old photograph as proof.

There’s just one issue: the image is too blurry to confirm anything.

And that’s where Cloudinary comes in.

To advance the story, you don’t just read about uploads. You actually execute one. A multi-parameter upload that applies AI-powered restoration to recover details from the faded photograph. You inspect the response. You check the result. You decide whether the evidence holds up.

The narrative moves forward only when you do.

Following the Evidence

But restoring the photo isn’t enough.

To determine whether the earrings truly match, you’ll need to dig deeper, isolating the relevant details, transforming the image to focus on what matters, and applying analysis to extract meaningful visual information.

Cropping becomes part of the investigation. Color analysis becomes part of the proof. Transformations become your forensic tools.

By the time you reach the end of the case, you’ve worked through a realistic, multi-step media workflow — complex uploads, restoration, targeted transformations, and image analysis — diving deeper into features as the mystery leads you across the docs.

And ideally, without even realizing how much you’ve learned along the way.

What You’ll Walk Away With

By the time you solve Clara Denari’s latest case, you won’t just know whether the earrings match.

You’ll know how to:

• Apply AI-powered restoration during upload and understand how uploads can be customized by combining multiple parameters in a single request.
• Use AI object detection (e_extract:prompt_object) to isolate specific elements and see how advanced transformations can refine and focus your assets with precision.
• Extract dominant colors (colors: true) for analysis and recognize how upload-time analysis can be layered into more complex media workflows.

In other words, you won’t just read about powerful features… You’ll use them.

And because the mystery spans multiple sections of the docs, you’ll naturally move from upload customization to deeper transformation and analysis capabilities, seeing how they connect in a real workflow.

Ready to Investigate?

If you’ve ever skimmed documentation and thought, “I’ll try that later,” this is your chance to try it now.

Start in the Upload guide.

Follow the clues.

See where they lead.

Crack the mystery. Master Cloudinary.

The post Crack the Mystery. Master Cloudinary. appeared first on Cloudinary Blog.

At Cloudinary, we know that the leap from finishing a coding tutorial to landing your dream role can feel like a massive chasm. That’s why we created the CCC. We aren’t just building a community; we’re building a bridge to help you cross that gap and step into your future as a leader in the tech industry.

The Vision: ‘From Cloud to Crowd’

Our mission is captured in four simple words: from Cloud to Crowd, a phrase coined by one of our community members, Jerome Hardaway.

This program is specifically designed for the dreamers and the doers, the early-career developers, the brave career-changers, and the media-savvy creators who are ready to shape the future of the visual web. Whether you’re just starting to understand how images and videos power the internet or you’re already building complex apps, we’re here to empower you with the tools, mentorship, and global network you need to grow from a learner into a recognized Cloudinary Creator.

At the heart of everything we do are our three core values:

• Learn. Master the fundamentals of modern media management and high-performance web development through structured, accessible education.
• Build. Turn that knowledge into action! We provide the platform for you to ship real-world projects that make your portfolio shine.
• Connect. Join a vibrant, global ecosystem of peers and industry experts who are all rooting for your success.

We believe that when you combine the right tools with a supportive community, there’s no limit to what you can create. Ready to see how we’re making it happen?

Phase 1: Education

Joining the Community: Two Pathways

We want to make sure the CCC is accessible while maintaining the high-quality mentorship that makes this program special. There are two exciting ways to join us:

The Partner Pathway

We’re incredibly proud to launch in collaboration with global nonprofits that are changing the face of tech. If you’re a member of GirlScript, Developers in Vogue, Vets Who Code, Hack Your Future, or Tampa Devs, you have a direct seat at the table! We work closely with these organizations to provide dedicated spots for their communities.

The Individual Pathway

Are you an independent builder ready to level up? You can join, too! Simply dive into our “Cloud to Crowd” course at the Cloudinary Academy. Once you’ve mastered the material and passed the exam, you can submit an application to join our priority waitlist for the next available cohort.

Because we keep our cohorts selective to ensure everyone gets the support they need, these spots are highly coveted, so bring your A-game!

Phase 2: Activation

Discord: Our Digital Headquarters

Discord is where Phase 2 happens. Once inside, you get access to private channels, technical support, and our Developer Relations staff. To keep the community vibrant, we have a 30-day rule: New members must introduce themselves within their first month to keep their seat. You have 14 days to accept your invitation. We also monitor activity. After 60 days of silence, your status becomes inactive, and after 90 days, your spot is released to a new learner on the waitlist. This ensures our headquarters is full of creators ready to ship.

Selectivity and Waitlist Management

To guarantee quality mentorship, we limit active seats. This keeps our environment high-performing and focused. We operate on a bi-annual model with two intake cycles. If seats are full, you’ll join our priority waitlist. We monitor activity closely and invite waitlisted learners as spots open, ensuring every creator gets the support they deserve. Even if you’re not yet onboarded as an official Cloudinary Creator, however, please join us on Discord to engage with the community and participate in our fun activities such as hackathons and challenges.

Membership Benefits and Rewards

Your growth is rewarded at every stage. As a recognized creator, you gain access to a toolkit designed to power your professional portfolio.

The journey includes a one-year renewable Ambassador Plan to ensure your personal projects perform at their best. We also celebrate your milestones with exclusive digital badges via Holopin, giving you a way to showcase your education and project achievements to your network.

Beyond the tech, you’ll join an ecosystem built on mentorship. This includes dedicated office hours for technical Q&A, tailored career advice, and networking opportunities within the broader Cloudinary partner network. And to welcome you properly, once you’ve made your first meaningful engagement on Discord, we’ll ship the official CCC Swag Pack directly to your door.

The Engagement Path (12 Points/Year)

We value builders over observers. To keep your creator status active, we use a simple point system with a goal of 12 points per year.

You earn 5 points for shipping a project and 3 for joining a mini-community hackathon. Attending events earns you 2 points, while smaller acts like helping a peer solve a bug or joining a weekly standup earn 1 point. This path ensures our creators stay sharp, connected, and consistently moving forward.

Community Life and Activities

The activation phase is where the energy truly shifts. We keep the momentum high with hackathons and mini challenges designed to test your skills and reward your creativity with exciting prizes.

Our regular Demo Days give you a global stage to showcase your projects to the community and beyond. To track your progress, we use gamification through leaderboards and badges to celebrate our most active contributors. When you need help or career advice, our live office hours provide direct access to the experts who can help you solve technical challenges and plan your next big move.

Professionalism and Governance

A community this vibrant thrives on respect. Our Code of Conduct ensures that every member feels included and supported as they grow. We prioritize kindness and helpfulness, creating a professional network where everyone can advance their career safely.

This is a long-term partnership. To renew your spot each year, we look for continued growth through new project submissions and engagement with your peers. Staying connected means dropping into Discord at least once every 60 days to share your progress.

We’re ready to build the future of the visual web with you. Visit our Community page to find your path and start your journey from learner to creator today. Let’s go!

The post From Cloud to Crowd: Introducing the Cloudinary Creators Community appeared first on Cloudinary Blog.

When putting together job applications, there’s always that question: How should I describe myself? Will potential employers care more about past experience or a list of skills? A digital portfolio answers that question in a way a résumé alone can’t. It shows what you’re actually capable of.

That’s why I put together this digital portfolio demo project.

Instead of talking about performance, polish, and visual quality in theory, I wanted to demonstrate what that looks like in practice. This portfolio is built the way I’d recommend anyone build one today: fast, visually sharp, and optimized from the start.

In this guide, I’ll walk you through how I build a frontend portfolio project using Cloudinary to handle all the image and video magic. No endless hours in Photoshop. No massive file sizes. And, no manual resizing for every device.

Live Demo (Optional, but Highly Recommended)

Before diving into the code, you can check out the live portfolio demo here:

View the live demo on StackBlitz.

Feel free to explore it, then come back and see how everything works under the hood.

Keys to Making Your Digital Portfolio Stand Out

Building a great-looking digital portfolio is a no-brainer. However, the real question is: How do you make yours stand out? One of the biggest differentiators is focusing on performance and visual polish. When your portfolio feels fast, smooth, and thoughtfully built, it immediately comes across as more professional. 

And when you build it efficiently, you’re also signaling to future employers that you know how to work efficiently:

• Deliver images that load fast but look crisp.
• Make videos that play smoothly without eating bandwidth.
• Create responsive layouts that look perfect on every device.
• Apply visual effects that make content pop.
• Optimize everything without sacrificing quality.

So really, building a great portfolio is just practice for the real thing. And that’s pretty cool.

The Tech Stack I Chose

For my portfolio, I went with tools that are popular in the industry and honestly just fun to work with:

• React 19 with TypeScript for type safety and component architecture.
• Vite for lightning-fast development and optimized builds.
• CSS for beautiful, responsive styling.
• Cloudinary for all image and video transformations.

Feel free to clone my code and adapt it to whatever you’re used to working with.

Getting Started

I’m sharing my portfolio with you as a starting point. Once you get a feel for how it works, you can customize the design to match your style and add sections that show off what matters to you.

# Clone the starter portfolio repo
git clone https://github.com/your-username/digital-portfolio.git

# Install dependencies
cd digital-portfolio
npm install

# Start the development server
npm run dev

I’m excited to see how you make it your own.

How Cloudinary Helps Meet Stand-Out Goals

A portfolio that stands out needs to be fast, visually sharp, and responsive across devices.

Without automation, that usually means resizing images manually, generating multiple breakpoints, compressing files carefully, and managing large video assets.

Cloudinary handles image and video delivery, optimization, and transformations through simple URL parameters. In this project, cropping, resizing, blur effects, format conversion, and quality optimization are all applied directly in the media URLs.

Transformations run on the fly, and the right size and format are delivered automatically for each device and browser.

Instead of maintaining multiple asset versions or editing files manually, I define the transformation once and move on, without sacrificing quality or performance.

Swap the Demo Media for Your Own

This project uses Cloudinary’s demo account (res.cloudinary.com/demo) with sample images and videos, so it works out of the box. When you’re ready, switch to your own Cloudinary account to display your own images and videos.

Step 1: Create a Cloudinary Account

Sign up for a free Cloudinary account (the free tier is more than enough for a portfolio).

Step 2: Find Your Cloud Name

After logging in, copy your cloud name from the dashboard. You’ll use it in URLs like this:

https://res.cloudinary.com/<your_cloud_name>/image/upload/<public_id>

Step 3: Update One Line in the Code

In your project, change this:

// Set this to your cloud name when you're ready to use your own media
const CLOUDINARY_CLOUD_NAME = 'demo'

…to your cloud name:

const CLOUDINARY_CLOUD_NAME = '<your_cloud_name>'

That’s it. Since CLOUDINARY_BASE is built from CLOUDINARY_CLOUD_NAME, all image/video URLs that use CLOUDINARY_BASE will automatically point to your account.

Step 4: Upload Your Own Media and Swap the Public IDs

In your code, you reference assets using public IDs — for example:

image: 'docs/profile-pic'

That means Cloudinary is looking for an asset with the public ID docs/catwalk in your cloud.

After you upload your own images/videos to Cloudinary, replace those image values with your own public IDs, for example:

image: 'portfolio/catwalk'

The Cool Cloudinary Features I Used

1. Smart Cropping With Face Detection

For the testimonials section, I needed consistent circular profile images that focused tightly on each person’s face.

Here’s the original image:

And here’s the transformed version:

What the Transformation Does

1. c_thumb,g_face automatically detects the face and crops around it.
2. h_300,w_300 enforces a fixed square size.
3. r_max makes the image circular.
4. e_sharpen:80 restores clarity after resizing.
5. f_auto,q_auto handle format and compression.

The result isn’t just a circle. It’s a consistent 300×300 headshot, centered correctly every time — regardless of how the original photo was framed.

That means no manual cropping, guessing focal points, or layout inconsistencies.

2. Hero Background Blur

For the hero section, I wanted a full-width background image that wouldn’t compete with the foreground content.

Original image:

Transformed version:

What the Transformation Does

• c_fill,g_auto crops intelligently to 1920×1080.
• e_blur:800 applies a strong blur effect.
• f_auto,q_auto optimize delivery.

The original image is detailed and high contrast — great for photography, not ideal for text overlays.

By blurring it at delivery time, I keep the color and atmosphere while removing visual noise. The background supports the content instead of competing with it. No separate “blurred copy” of the file is needed.

3. AI-Enhanced Portrait

For the hero portrait, I wanted a clean, high-quality look — even if the source image wasn’t studio-perfect.

Original:

Transformed:

What the Transformation Does

• g_face centers the subject.
• r_max applies a circular crop.
• e_improve enhances lighting and contrast using AI.
• bo_8px_solid_rgb:0f172a adds a clean border.
• q_auto:best balances compression with quality.

The enhancement isn’t dramatic — it’s subtle. Skin tones are more balanced, contrast is cleaner, and the framing is consistent.

It looks like a designed component, not just an uploaded image.

4. Responsive Project Images

In my project grid, the source images came from different industries — fashion, e-commerce, outdoor photography — all with different aspect ratios.

Here’s one of the original images:

And here’s the version used in the grid:

What the Transformation Does

• c_fill,h_400,w_600 forces a consistent 600×400 frame.
• g_auto intelligently selects the focal area.
• r_20 adds rounded corners.
• e_saturation:20 slightly boosts color.
• f_auto,q_auto optimize delivery.

The original image has its own natural proportions.

The transformed version guarantees:

• Every card in the grid is exactly the same size.
• No distortion.
• No manual cropping.
• No awkward whitespace.

Even though the source images vary wildly, the layout stays predictable and clean. That’s what makes the grid feel cohesive.

5. Video Transformations That Actually Work

Video is usually where portfolios fall apart. Files are large, aspect ratios are inconsistent, and playback isn’t optimized.

Here’s the original full video:

https://res.cloudinary.com/demo/video/upload/v1731855790/guy_woman_mobile.mp4

And here’s the version used in the portfolio:

https://res.cloudinary.com/demo/video/upload/so_133,eo_147/c_pad,h_400,w_600/b_rgb:d4a520/f_auto/q_auto/v1731855790/guy_woman_mobile.mp4

What the Transformation Does

• so_133,eo_147 trims the clip to a specific 14-second segment.
• c_pad,h_400,w_600 fits it into a 600×400 frame without cutting off content.
• b_rgb:d4a520 fills extra space with a consistent background color.
• f_auto,q_auto optimize format and compression.

Instead of uploading a separately edited clip, I trim and resize at delivery time.

That means:

• The video is shorter and lighter.
• The layout dimensions are guaranteed.
• There are no black bars.
• The browser gets the best possible format automatically.

It behaves like a designed component — not a raw media file dropped onto a page.

6. Small Details That Make a Difference

Once layout and performance were handled, I added subtle refinements.

Here’s the original image:

And here’s the polished version:

What the Transformation Does

• c_fill,g_auto enforces consistent framing.
• e_vignette:30 darkens the edges slightly.
• e_sharpen:100 restores clarity.
• r_20 rounds the corners.
• bo_1px_solid_rgb:e0e0e0 adds a subtle border.
• f_auto,q_auto optimize delivery.

None of these effects are dramatic, but together they:

• Improve edge definition.
• Add separation from the background.
• Standardize presentation across sections.

These are small adjustments, but they’re the difference between “image placed on a page” and “designed component.”

What This Means for Performance

You might be thinking, “All these effects must slow things down, right?” Actually, the opposite! 

With Cloudinary:

• 70-80% smaller file sizes compared to unoptimized images.
• 3-5x faster loading thanks to automatic optimization.
• Zero manual editing time.
• Automatic device optimization — phone users get mobile-sized images, desktop users get high-res.

When someone views your portfolio on their phone, they automatically get perfectly-sized images. On a 4K monitor, they get crisp, detailed versions. It just works.

Notice how much this image was optimized and what that means for your website stats and loading time! Reduced from a 21.30 MB JPG to a 18.26 KB AVIF.

Bringing It Full Circle

Here’s what I love about this whole process: The skills you use to build an impressive portfolio are the same skills you’ll use every day in your job.

When you build this portfolio, you’re learning how to:

• Build modern React applications with TypeScript.
• Create responsive, mobile-first designs.
• Optimize images and videos for real-world performance.
• Use cloud services to solve practical problems.
• Write clean, maintainable code.
• Think about user experience.

Your portfolio becomes a preview of what you can do. So, you’ve shown you can build websites that look great, load fast, and feel professional. That’s exactly what teams are looking for.

Wrapping Up

Making a portfolio that stands out doesn’t have to be complicated or stressful. It’s really about:

• Polish that shows you care about details.
• Performance that respects people’s time.
• Smart visual choices that guide the eye.
• Responsive design that works everywhere.
• Using the right tools (like Cloudinary) to make your life easier.

If you’re job searching right now, I hope this helps. You’ve got this.

Resources:

• Live demo: https://stackblitz.com/github/cloudinary-devs/digital_portfolio?file=README.md
• Source code: GitHub repository
• Cloudinary docs: https://cloudinary.com/documentation

The post How to Create a Digital Portfolio That Visually Pops appeared first on Cloudinary Blog.

Video moderation creates operational bottlenecks, especially as your platform scales. In this guide, you’ll build an agentic video governance pipeline using Next.js 16 and Cloudinary. Instead of manually reviewing every upload, you’ll delegate moderation to AI agents that automatically:

1. Watch every video upon upload.
2. Flag and block inappropriate content.
3. Tag content with descriptive metadata for searchability.

Architecture Overview

You’ll leverage the Next.js App Router for the frontend and Cloudinary’s Admin API as the backend intelligence. The system uses an architecture where the UI optimistically uploads content but pessimistically hides it until AI verification passes.

The Agentic Workflow

The pipeline operates autonomously:

• Trigger: User uploads a video via the client component.

• Agent 1 (Rekognition): Scans for moderation labels (safe vs. unsafe).

• Agent 2 (Azure Video Indexer): Generates taxonomy and content tags.

• Decision Engine: The UI re-fetches the status and decides whether to render the player (approved) or a warning shield (rejected).

• Live Demo: video-governance-guide.vercel.app

• Source Code: github.com/musebe/video-governance-guide

Project Configuration

Spinning Up and Installing Dependencies

Start by initializing a Next.js 16 app with TypeScript and Tailwind CSS. Then, install the Cloudinary SDK and the Shadcn UI engine, which includes lucide-react for your icons.

Run these commands in your terminal:

# 1. Create the Next.js 16 App
npx create-next-app@latest video-governance --typescript --tailwind --eslint

# 2. Initialize Shadcn UI (Select 'New York', 'Slate', 'Yes' to CSS variables)
npx shadcn@latest init

# 3. Install Core Engines
npm install next-cloudinary lucide-react

Environment Variables (.env.local)

Create a .env.local file in your root. This is the security bridge between your app and Cloudinary’s AI.

# Public: For the Client-Side Upload Widget
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<YOUR_CLOUD_NAME>"
NEXT_PUBLIC_CLOUDINARY_API_KEY="<YOUR_API_KEY>"

# Private: For Server Actions & Admin API (NEVER expose this)
CLOUDINARY_API_SECRET="<YOUR_API_SECRET>"

# Config: The Upload Preset we created
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET="video-governance-preset"

The Singleton Engine (lib/cloudinary.ts)

This is the Core Engine #1. Instead of importing v2 everywhere, you’ll configure it once here. This prevents the common “Must supply api_key” error by ensuring the SDK is always initialized with your environment variables before any API call is made.

View the file on GitHub.

import { v2 as cloudinary } from "cloudinary";

// Global Configuration
cloudinary.config({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
  secure: true, // Force HTTPS
});

export default cloudinary;

Cloudinary Dashboard Setup

For the “Agentic” pipeline to work, you must enable two Add-ons in your Cloudinary Dashboard:

1. AWS Rekognition Video Moderation for safety checks.
2. Microsoft Azure Video Indexer for auto-tagging.

Building the Secure Upload Pipeline

The Secure Signature Flow

Security is paramount. You don’t expose your CLOUDINARY_API_SECRET to the client. Instead, you’ll use a Signed Upload pattern:

1. Client requests a signature.
2. Server validates and signs the request using the secret.
3. Client uploads the video to Cloudinary with that signature.

The Signature Engine (api/sign-cloudinary/route.ts)

This API route acts as the gatekeeper. It receives parameters from the client, signs them using the SDK’s utility function, and returns the signature.

View the file on GitHub.

import { v2 as cloudinary } from "cloudinary";

export async function POST(request: Request) {
  const body = await request.json();
  const { paramsToSign } = body;

  // CORE ENGINE: Generate signature using the Secret
  const signature = cloudinary.utils.api_sign_request(
    paramsToSign,
    process.env.CLOUDINARY_API_SECRET as string
  );

  return Response.json({ signature });
}

The Client Uploader (InteractivePipeline.tsx)

You’ll use the CldUploadWidget to handle chunking and retries. The key configuration is pointing signatureEndpoint to our route above.

View the file on GitHub.

<CldUploadWidget
  signatureEndpoint="/api/sign-cloudinary" // Points to our secure route
  uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET}
  onSuccess={(result) => {
    // Trigger Server Action to refresh the gallery immediately
    startTransition(() => refreshGallery());
  }}
>
  {({ open }) => (
    <Button onClick={() => open()}>
       Upload Video
    </Button>
  )}
</CldUploadWidget>

The Revalidation Action (actions.ts)

Using Next.js 16 Server Actions, you’ll instantly refresh the UI after an upload without a full page reload.

View the file on GitHub](https://github.com/musebe/video-governance-guide/blob/main/app/video-pipeline/actions.ts).

"use server";
import { revalidatePath } from "next/cache";

export async function refreshGallery() {
  revalidatePath("/"); // Purges the cache for the home page
}

The Data Layer: Fetching and Caching

Accessing the Cloudinary Admin API

To build your governance dashboard, you’ll use the Cloudinary Admin API (cloudinary.api.resources) and fetch the list of uploaded videos along with their moderation status and AI tags.

View the file on GitHub.

Bypassing Cache for Real-Time Updates

By default, Next.js caches data aggressively. However, moderation happens seconds after upload. If you cache the “Pending” state, the user will never see the “Approved” state.

Use unstable_noStore() to opt out of caching for this specific request, ensuring you’ll always get a fresh status from Cloudinary.

import cloudinary from "@/lib/cloudinary";
import { unstable_noStore as noStore } from "next/cache";

export async function getGovernedVideos() {
  noStore(); // CORE ENGINE: Forces fresh data on every request

  try {
    const results = await cloudinary.api.resources({
      type: "upload",
      prefix: "governance/uploads", // Target specific folder
      resource_type: "video",
      moderation: true, // Fetch AI safety status
      tags: true, // Fetch AI content tags
      max_results: 50,
      direction: "desc",
    });
    return results.resources;
  } catch (error) {
    console.error("Fetch Error:", error);
    return [];
  }
}

Type Safety (VideoAsset)

To avoid any types and ensure our UI handles the data correctly, define a strict interface that matches the Admin API response structure.

export interface VideoAsset {
  public_id: string;
  created_at: string;
  format: string;
  bytes: number;
  moderation_status?: "approved" | "rejected" | "pending";
  tags?: string[];
}

The Governance Dashboard (Server Component)

UI Strategy: ‘Trust, but Verify’

This is the Core Engine #2. You’ll implement a pessimistic security model where content is hidden by default until explicitly approved by the AI. This protects users from ever seeing harmful uploads while they’re being processed.

View the file on GitHub.

The Decision Engine

Inside your server component, map over the video list and switch entirely based on the moderation_status. Note that the <VideoPlayer> is only rendered if the status is strictly 'approved'.

{
  videos.map((video) => {
    const status = video.moderation_status || "pending";
    const isSafe = status === "approved";
    const isRejected = status === "rejected";

    return (
      <Card key={video.public_id}>
        <div className="aspect-video relative">
          {/* CASE 1: SAFE -> Render the Player */}
          {isSafe && <VideoPlayer publicId={video.public_id} />}

          {/* CASE 2: REJECTED -> Render the Shield */}
          {isRejected && (
            <div className="flex flex-col items-center justify-center bg-red-50 text-red-600 h-full">
              <ShieldAlert className="h-10 w-10" />
              <span className="font-bold">Content Blocked</span>
            </div>
          )}

          {/* CASE 3: PENDING -> Render the Loader */}
          {!isSafe && !isRejected && (
            <div className="flex flex-col items-center justify-center h-full">
              <Loader2 className="animate-spin text-blue-500" />
              <span>AI Moderation in Progress...</span>
            </div>
          )}
        </div>
      </Card>
    );
  });
}

Visualizing AI Tags

You’ll also conditionally render the tags. If a video is rejected, make sure to hide the tags as well, since they might contain sensitive descriptions of the blocked content.

{
  !isRejected && video.tags && (
    <div className="flex gap-2">
      {video.tags.map((tag) => (
        <Badge key={tag} variant="secondary">
          {tag}
        </Badge>
      ))}
    </div>
  );
}

The Interactive Player (Client Component)

Solving Server/Client Conflicts

The standard Cloudinary video player needs browser APIs (window, document) to attach event listeners and handle media streams. However, your Governance Dashboard is a Server Component (to keep API keys secure).

If you try to render the player directly, Next.js will throw a useState only works in Client Components error. Solve this with the Client Wrapper Pattern.

The Wrapper Pattern (VideoPlayer.tsx)

Create a dedicated component marked with "use client". This isolates the interactive logic from the server-side fetching logic.

View the file on GitHub.

"use client";

import { CldVideoPlayer } from "next-cloudinary";
import "next-cloudinary/dist/cld-video-player.css";
import { useState } from "react";

export default function VideoPlayer({ publicId }: { publicId: string }) {
  const [error, setError] = useState(false);

  // CORE ENGINE: Error Handling for HLS Delays
  // If the HLS stream isn't ready, we catch the error and show a loader
  if (error) {
    return <div className="text-zinc-500">Processing Media...</div>;
  }

  return (
    <CldVideoPlayer
      width="1920"
      height="1080"
      src={publicId}
      onError={() => setError(true)} // Catch transcoding errors
      controls
    />
  );
}

Handling Transcoding Delays

When a video is first uploaded, Cloudinary generates the adaptive streaming formats (HLS/DASH) in the background. This can take a few seconds.

• The problem. The player might try to load .m3u8 before it exists, causing a “Media Not Supported” error.
• The fix. Your onError handler catches this specific failure and swaps the player for a “Processing” state, preventing a broken UI experience.

Final Results: A Self-Governing Video Library

You’ve built an Agentic Video Governance Pipeline. By combining Next.js 16 Server Actions with Cloudinary’s AI, you eliminated the need for manual moderation. Users get instant feedback, admins get peace of mind that harmful content is blocked automatically, and developers get a clean, type-safe codebase without having to manage complex media servers.

Future Enhancements

While this guide covers the loop of uploads and checks, a production-grade system could go further:

• Webhooks. Instead of polling or refreshing, use Cloudinary Webhooks to push updates to your database the moment AI processing finishes.
• Notifications. Connect the “Rejected” state to a Slack bot or Email service to alert a human admin for a final review.

You can find the complete source code for this project here: github.com/musebe/video-governance-guide

Ready to start building your own AI video moderator? Sign up for a free Cloudinary account today.

The post Automating Video Governance: AI Moderation and Tagging in Next.js appeared first on Cloudinary Blog.