Cloudinary

How to integrate Cloudinary with Webflow

Optimizing images manually for different devices, formats, and quality levels creates unnecessary development overhead. Cloudinary handles automatic image transformation, format selection, and responsive delivery through URL parameters.

Integrate Cloudinary with Webflow by embedding Cloudinary URLs directly in CMS fields, using automation platforms, or building custom API workflows.

Embed Cloudinary URLs in Webflow CMS

Store Cloudinary URLs directly in Webflow CMS fields to control image transformations through URL parameters. This method requires manual URL construction and doesn't support server-side upload workflows, but gives precise control over image delivery without automation platforms. Developers can apply responsive adjustments, art direction cropping, and format conversion by modifying URL query strings.

Store base Cloudinary URLs in Webflow CMS text fields, then add transformation parameters for automatic format selection, quality adjustment, and device pixel ratio handling.

Common transformation patterns include:

• Responsive images: Append width and height parameters based on viewport breakpoints
• Format selection: Use f_auto for automatic format selection
• Quality control: Apply q_auto for automatic quality adjustment
• Device targeting: Include dpr_auto for device pixel ratio handling (uses browser Client Hints rather than a static URL parameter)

Cloudinary transformation URLs follow this structure: https://res.cloudinary.com/[cloud-name]/image/upload/f_auto,q_auto,w_800/[asset-path]

Use automation tools like Zapier and Make

Automation platforms like Zapier, viaSocket, and n8n sync Cloudinary uploads with Webflow CMS items without manual data entry. Meaning when your team adds images to Cloudinary with specific tags, these automation tools create corresponding items in Webflow collections automatically.

This method works best for content teams managing dozens or hundreds of assets daily. Marketing teams can organize campaign assets in Cloudinary, then publish them to Webflow sites through tag-based triggers.

Zapier includes pre-built templates that connect Cloudinary uploads with Webflow CMS. Here are some included workflows:

• Create Webflow items from new tagged Cloudinary resources
• Create new Webflow items from newly uploaded Cloudinary resources
• Create or update Webflow items when Cloudinary processes new uploads
• Sync media metadata between platforms
• Filter by Cloudinary tags to route assets to specific collections

Free Zapier plans check for new uploads every 15 minutes. Instant sync requires premium plans with webhook triggers.

viaSocket and n8n also provide pre-built integrations and templates to automate workflows between Webflow and Cloudinary.

Build with Webflow and Cloudinary APIs

Custom API integration requires backend infrastructure to handle upload workflows, authentication, and webhook-based synchronization. These capabilities aren't available through Webflow's native features.

Store Cloudinary URLs with transformation parameters in Webflow CMS fields. Apply parameters like f_auto, q_auto, and dpr_auto through URL strings to control format, quality, and device optimization. For advanced upload workflows or real-time synchronization, consult Cloudinary's API documentation for available capabilities.

What you can build

Based on these integration methods, you can build:

• Product catalog with automatic image processing: E-commerce sites can store product photos in Cloudinary, then serve device-appropriate versions through Webflow CMS collections using transformation parameters like f_auto, q_auto, and dpr_auto. Mobile browsers receive compressed images sized for smaller viewports while desktop users get higher-resolution versions automatically.
• Dynamic portfolio with URL-based transformations: Design agencies and photographers can build portfolio sites where thumbnail, detail, and lightbox views all reference the same source file with different Cloudinary parameters. Upload images once, serve multiple sizes and crops through URL modifications.
• Content-heavy blog with automated media sync: Publications uploading dozens of images daily can tag files in Cloudinary to trigger automatic Webflow CMS item creation through Zapier. Writers find their images already populated in the CMS, properly sized and processed for web delivery.
• Event site with user-generated content: Festival and conference sites can accept attendee photo uploads to Cloudinary, then display them in Webflow galleries with consistent branding overlays and aspect ratio adjustments applied through URL-based transformations using parameters like f_auto and q_auto.