Cloudinary Image Optimization & Transformations in Next.js
Optimize and transform images in Next.js with Cloudinary — the CldImage component, auto-format/quality delivery, and secure signed uploads.
Serving images well means picking the right format per browser, the right size per viewport, and the right compression per use case — and doing all three without maintaining a pipeline of pre-generated variants. Cloudinary handles this at the URL level: one uploaded image, endless on-demand transformations, served through a global CDN.
Step 1: Install the Next.js Cloudinary SDK
Step 2: Render Optimized Images with CldImage
CldImage wraps next/image, so you keep Next.js's built-in lazy loading and layout behavior, while format="auto" and quality="auto" map to Cloudinary's f_auto/q_auto — letting Cloudinary choose AVIF, WebP, or JPEG per requesting browser, and the optimal compression level per image, instead of you hardcoding one format for everyone.
Step 3: Apply Transformations via URL Parameters
Every Cloudinary transformation is expressible directly in the delivery URL, so one uploaded asset serves every size and crop your app needs without pre-generating variants.
Both call the same underlying image — Cloudinary generates and caches each requested variant on first request, then serves it from the CDN on subsequent requests.
Step 4: Chain Advanced Transformations
For more control than the component props expose, use raw transformation strings:
This overlays a semi-transparent watermark logo in the bottom-right corner and applies automatic image enhancement — both computed on Cloudinary's side at request time, not baked into the source file.
Step 5: Upload Images Securely with Signed Uploads
Never call Cloudinary's upload API directly from the browser with your API secret — generate a signature server-side instead.
The API secret only ever exists server-side, inside the signing endpoint. The signature it returns is scoped to exactly the parameters (folder, timestamp) it was generated with — the client can't tamper with those values without invalidating the signature.
Step 6: Serve Through the CDN by Default
No additional CDN configuration is needed — every Cloudinary delivery URL is already served from their global edge network. The only thing to watch is not accidentally bypassing it by re-hosting downloaded copies of transformed images yourself instead of always requesting through Cloudinary's URL structure.
Key Takeaways
CldImage combines next/image's layout handling with Cloudinary's transformation pipeline, f_auto/q_auto remove the need to manually pick formats or compression levels per image, transformations applied via URL parameters mean one upload serves every size/crop your app needs, and signed uploads keep your API secret server-side while still allowing direct browser-to-Cloudinary uploads.
