{"id":37668,"date":"2025-05-28T07:00:00","date_gmt":"2025-05-28T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=37668"},"modified":"2025-12-03T15:39:53","modified_gmt":"2025-12-03T23:39:53","slug":"product-images-cloudinary-ai-next-js-store","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store","title":{"rendered":"Enhancing Product Images With Cloudinary AI in Your Next.js Store"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><ul>\n<li>\n<p><a href=\"https:\/\/cloudinary-ai-recolor.vercel.app\">Live Demo<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\">GitHub Repository<\/a><\/p>\n<\/li>\n<\/ul>\n<p>You\u2019ve got a clean product image. Let\u2019s say a black t-shirt. You want to sell it in eight different colors. Easy, right? Until you realize you need eight recolored versions that each have to be watermarked, optimized, and ready for your store.<\/p>\n<p>What if you could skip all that?<\/p>\n<p>With <strong>Cloudinary\u2019s Generative AI Recolor<\/strong>, you can upload <strong>one image<\/strong> and automatically:<\/p>\n<ul>\n<li>Recolor it into multiple variants using AI-powered prompts.<\/li>\n<li>Add your brand watermark with a reusable overlay.<\/li>\n<li>Serve optimized images instantly, no extra work.<\/li>\n<\/ul>\n<p>This guide walks you through building that workflow into a modern <strong>Next.js 15<\/strong> store using <strong>Cloudinary<\/strong>, <strong>shadcn\/ui<\/strong>, and <strong>Motion.dev<\/strong>. No manual editing or extra storage.<\/p>\n<h2>Project Setup<\/h2>\n<p>To get started, we\u2019ll create a new <strong>Next.js 15<\/strong> application, install the Cloudinary SDKs, configure our environment, upload a watermark, and enable Next.js to serve Cloudinary\u2011hosted images. You can follow along with the complete code in the <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\">GitHub repo<\/a>.<\/p>\n<h3>Create the Next.js App<\/h3>\n<p>Use the official installer to scaffold a fresh project:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span>  <span class=\"hljs-selector-tag\">create-next-app<\/span><span class=\"hljs-keyword\">@latest<\/span>  cloudinary-ai-recolor\n\ncd  cloudinary-ai-recolor\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>During setup, enable:<\/p>\n<ul>\n<li>\n<strong>App Router<\/strong> (the new <code>app\/<\/code> directory).<\/li>\n<li>\n<strong>Tailwind CSS<\/strong> (for styling).<\/li>\n<li>\n<strong>TypeScript<\/strong> (optional but recommended).<\/li>\n<\/ul>\n<h2>Install Cloudinary SDKs<\/h2>\n<p>Add both client\u2011side and server\u2011side Cloudinary libraries:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span>  <span class=\"hljs-selector-tag\">install<\/span>  <span class=\"hljs-keyword\">@cloudinary<\/span>\/url-gen  cloudinary\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<p><strong>@cloudinary\/url\u2011gen<\/strong> builds URLs with your generative\u2011recolor and overlay transformations (see <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/lib\/buildVariant.ts\"><code>lib\/buildVariant.ts<\/code><\/a>).<\/p>\n<\/li>\n<li>\n<p><strong>cloudinary<\/strong> handles uploads, eager transforms, and webhooks (see <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/app\/api\/upload\/route.ts\"><code>api\/upload\/route.ts<\/code><\/a>).<\/p>\n<\/li>\n<\/ul>\n<h2>Obtain Your Cloudinary Credentials<\/h2>\n<ol>\n<li>Sign up or log in at <a href=\"https:\/\/cloudinary.com\/users\/login\">cloudinary.com<\/a>.<\/li>\n<li>In your Dashboard, copy your <strong>Cloud Name<\/strong>, <strong>API Key<\/strong>, and <strong>API Secret<\/strong>.<\/li>\n<li>Create a folder named (for example) <code>demo-store<\/code> in your Media Library\u2014this keeps all product assets organized.<\/li>\n<\/ol>\n<h2>Configure Your Environment Variables<\/h2>\n<p>Create a <code>.env.local<\/code> in your project root with:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloud-name\n\nNEXT_PUBLIC_CLOUDINARY_FOLDER=demo-store\n\nCLOUDINARY_API_KEY=your-api-key\n\nCLOUDINARY_API_SECRET=your-api-secret\n\nREDIS_URL=your-redis-url  \n<\/code><\/span><\/pre>\n<p>Cloudinary uses these to generate and process images.<\/p>\n<p>We\u2019ll use Redis for quick JSON-based product storage (not required, but nice for demos).<\/p>\n<h2>Upload Your Watermark<\/h2>\n<p>Place a <code>watermark.png<\/code> in your project root (this is your branded logo or badge). Then run:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\nnode  -e  <span class=\"hljs-string\">\"require('cloudinary').v2.config({cloud_name:process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,api_key:process.env.CLOUDINARY_API_KEY,api_secret:process.env.CLOUDINARY_API_SECRET}); require('cloudinary').v2.uploader.upload('watermark.png',{folder:process.env.NEXT_PUBLIC_CLOUDINARY_FOLDER,public_id:'watermark'}).then(r=&gt;console.log(r.secure_url));\"<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This creates <code>demo-store\/watermark<\/code> in Cloudinary, referenced later in your overlay logic.<\/p>\n<h2>Configure Next.js to Allow Cloudinary Images<\/h2>\n<p>In <code>next.config.ts<\/code> , permit images from your Cloudinary domain:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> type { NextConfig } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\"<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> nextConfig: NextConfig = {\n  <span class=\"hljs-attr\">images<\/span>: {\n    <span class=\"hljs-attr\">remotePatterns<\/span>: &#91;\n      {\n        <span class=\"hljs-attr\">protocol<\/span>: <span class=\"hljs-string\">\"https\"<\/span>,\n        <span class=\"hljs-attr\">hostname<\/span>: <span class=\"hljs-string\">\"res.cloudinary.com\"<\/span>,\n        <span class=\"hljs-attr\">pathname<\/span>: <span class=\"hljs-string\">`\/<span class=\"hljs-subst\">${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}<\/span>\/**`<\/span>,\n      },\n    ],\n  },\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> nextConfig;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Cloudinary Workflow Overview<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764805061\/blog-Enhancing_Product_Images_With_Cloudinary_AI_in_Your_Next.js_Store-1.png\" alt=\"workflow overview\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1427\" height=\"657\"\/><\/p>\n<p>The process starts with uploading one base product image. Cloudinary then uses <strong>Generative AI Recolor<\/strong> to create multiple color variants and applies your <strong>brand watermark<\/strong> using overlays. The transformed images are automatically optimized and sent back, ready to be displayed in your UI.<\/p>\n<h2>Upload and Transform Your Images<\/h2>\n<h3>It Starts in the UI<\/h3>\n<p>Inside the <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/components\/image-uploader.tsx\"><code>ImageUploader<\/code><\/a> component, the user interacts with a simple form and:<\/p>\n<ul>\n<li>Selects a product image (e.g. a black t-shirt).<\/li>\n<li>Types in the product name and price.<\/li>\n<li>Chooses from the available colors (like red, blue, beige\u2026).<\/li>\n<\/ul>\n<p>Once they hit <strong>Upload &amp; Generate<\/strong>, we\u2019ll bundle everything up using <code>FormData<\/code> and send it to the server:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> body = <span class=\"hljs-keyword\">new<\/span> FormData();\nbody.append(<span class=\"hljs-string\">'file'<\/span>, file);\nbody.append(<span class=\"hljs-string\">'name'<\/span>, name);\nbody.append(<span class=\"hljs-string\">'price'<\/span>, price);\nbody.append(<span class=\"hljs-string\">'colors'<\/span>, <span class=\"hljs-built_in\">JSON<\/span>.stringify(picked));\n\n<span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">'\/api\/upload'<\/span>, { <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>, body });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This is the moment we hand the work off to our backend.<\/p>\n<h3>The Server Will Receive the Image<\/h3>\n<p>The API route at <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/app\/api\/upload\/route.ts\"><code>\/api\/upload<\/code><\/a> picks up the request.<\/p>\n<p>We\u2019ll extract the file and other fields from the request:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> form = <span class=\"hljs-keyword\">await<\/span> req.formData();\n<span class=\"hljs-keyword\">const<\/span> file = form.get(<span class=\"hljs-string\">\"file\"<\/span>) <span class=\"hljs-keyword\">as<\/span> File;\n<span class=\"hljs-keyword\">const<\/span> colors = <span class=\"hljs-built_in\">JSON<\/span>.parse(form.get(<span class=\"hljs-string\">\"colors\"<\/span>) <span class=\"hljs-keyword\">as<\/span> string);\n<span class=\"hljs-keyword\">const<\/span> name = form.get(<span class=\"hljs-string\">\"name\"<\/span>);\n<span class=\"hljs-keyword\">const<\/span> price = <span class=\"hljs-built_in\">Number<\/span>(form.get(<span class=\"hljs-string\">\"price\"<\/span>) || <span class=\"hljs-number\">0<\/span>);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now we know what image to transform, and what colors the user wants it in.<\/p>\n<h3>Build the Transformation Instructions<\/h3>\n<p>This is where Cloudinary gets involved.<\/p>\n<p>We\u2019ll prepare an <code>eager<\/code> array, a list of transformation strings that tells Cloudinary what to do <strong>for each color<\/strong>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> eager = colors.map(<span class=\"hljs-function\"><span class=\"hljs-params\">c<\/span> =&gt;<\/span>\n  &#91;\n    <span class=\"hljs-string\">`e_gen_recolor:prompt_tshirt;to-color_<span class=\"hljs-subst\">${c}<\/span>`<\/span>,\n    <span class=\"hljs-string\">`l_<span class=\"hljs-subst\">${FOLDER}<\/span>:watermark,g_south_east,x_20,y_20`<\/span>,\n    <span class=\"hljs-string\">\"f_auto\"<\/span>,\n    <span class=\"hljs-string\">\"q_auto\"<\/span>\n  ].join(<span class=\"hljs-string\">\"\/\"<\/span>)\n);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Let\u2019s break that down:<\/p>\n<ul>\n<li>\n<strong><code>e_gen_recolor<\/code><\/strong> uses <strong>Generative AI<\/strong> to recolor just the shirt, based on the word \u201ctshirt\u201d.<\/li>\n<li>\n<strong><code>l_:watermark...<\/code><\/strong> overlays your uploaded watermark image in the bottom right.<\/li>\n<li>\n<strong><code>f_auto<\/code> + <code>q_auto<\/code><\/strong> tells Cloudinary to deliver optimized image formats and compression.<\/li>\n<\/ul>\n<p>Each color in the list gets its own transformation pipeline. These are all generated in the <strong>background<\/strong>, so we don\u2019t block the upload.<\/p>\n<h3>Upload to Cloudinary<\/h3>\n<p>We\u2019ll now upload the image stream to Cloudinary using its Node SDK:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">cloudinary.v2.uploader.upload_stream(\n  {\n    folder: FOLDER,\n    eager,\n    eager_async: <span class=\"hljs-keyword\">true<\/span>,\n    notification_url: WEBHOOK,\n  },\n  (err, result) =&gt; { ... }\n).end(buffer);\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>The original image is saved right away.<\/li>\n<li>The color variants and watermarking start generating in the background.<\/li>\n<li>When those are done, Cloudinary pings our webhook (we\u2019ll get to that soon).<\/li>\n<\/ul>\n<h3>Save the Product<\/h3>\n<p>Before the variants are ready, we\u2019ll save a new product in our local database (in this case, just Redis):<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> product = {\n  <span class=\"hljs-attr\">id<\/span>: uuid(),\n  name,\n  price,\n  <span class=\"hljs-attr\">publicId<\/span>: uploadResult.public_id,\n  <span class=\"hljs-attr\">thumb<\/span>: cld.image(uploadResult.public_id)\n             .format(<span class=\"hljs-string\">\"auto\"<\/span>)\n             .quality(<span class=\"hljs-string\">\"auto\"<\/span>)\n             .toURL(),\n  <span class=\"hljs-attr\">variants<\/span>: &#91;] \n};\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This means the user sees the product right away, and we can update it once the variants are ready.<\/p>\n<blockquote>\n<p>Full implementation: <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/app\/api\/upload\/route.ts\">upload\/route.ts<\/a><\/p>\n<\/blockquote>\n<p>At this point, Cloudinary is doing its thing in the background. All we did was upload a single image and, behind the scenes, we\u2019ve launched a fully automated process to generate a full set of branded, recolored images.<\/p>\n<p>Up next, we\u2019ll show how Cloudinary gets back to us when those are ready.<\/p>\n<h2>AI Recolor With Cloudinary<\/h2>\n<p>Once we upload the image and pass in our transformation instructions, Cloudinary uses its <strong>Generative AI Recolor<\/strong> engine to do something pretty remarkable: It looks at the image, understands what the \u201ct-shirt\u201d is, and recolors just the relevant parts. Pixel-perfect, context-aware, and fully automatic.<\/p>\n<p>Let\u2019s take a closer look at how it works under the hood.<\/p>\n<h2>How It Works<\/h2>\n<p>Inside the upload API route, we created this transformation string for every color the user picked:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> eager = colors.map(<span class=\"hljs-function\"><span class=\"hljs-params\">c<\/span> =&gt;<\/span>\n  &#91;\n    <span class=\"hljs-string\">`e_gen_recolor:prompt_tshirt;to-color_<span class=\"hljs-subst\">${c}<\/span>`<\/span>,\n    <span class=\"hljs-string\">`l_<span class=\"hljs-subst\">${FOLDER}<\/span>:watermark,g_south_east,x_20,y_20`<\/span>,\n    <span class=\"hljs-string\">\"f_auto\"<\/span>,\n    <span class=\"hljs-string\">\"q_auto\"<\/span>\n  ].join(<span class=\"hljs-string\">\"\/\"<\/span>)\n);\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Let\u2019s focus on the first part:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-string\">`e_gen_recolor:prompt_tshirt;to-color_red`<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This tells Cloudinary:<\/p>\n<blockquote>\n<p>\u201cUse generative AI to find the area that looks like a t-shirt, and recolor it to red.\u201d<\/p>\n<\/blockquote>\n<p>You don\u2019t need to manually mask or define that area. Cloudinary understands common objects (like shirts, shoes, pants) using trained AI models, and recolors only the parts that match the prompt.<\/p>\n<p>You could replace <code>tshirt<\/code> with <code>shoe<\/code>, <code>hat<\/code>, <code>bag<\/code>, etc. depending on what your product is.<\/p>\n<h3>Why This is Cool<\/h3>\n<p>Normally, recoloring a product in multiple shades means:<\/p>\n<ul>\n<li>Masking the product in Photoshop.<\/li>\n<li>Tweaking hue\/saturation.<\/li>\n<li>Exporting five to 10 new image files.<\/li>\n<li>Uploading them all.<\/li>\n<\/ul>\n<p>Cloudinary\u2019s <code>e_gen_recolor<\/code> turns all of that into one short line of code.<\/p>\n<p>You send the image once. Cloudinary figures out what to recolor, how to do it cleanly, and delivers a set of variants \u2014 ready for your site.<\/p>\n<blockquote>\n<p>Want to explore more prompts or object types? Check the official docs: <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_gen_recolor\">Cloudinary Generative Recolor<\/a><\/p>\n<\/blockquote>\n<h2>Brand With Watermark Overlays<\/h2>\n<p>Right after recoloring, we apply your <strong>brand watermark<\/strong> automatically, on every variant.<\/p>\n<p>This happens inside the same <code>eager<\/code> transformation string:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-string\">`l_<span class=\"hljs-subst\">${FOLDER}<\/span>:watermark,g_south_east,x_20,y_20`<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here\u2019s what it does:<\/p>\n<ul>\n<li>\n<strong><code>l_<\/code><\/strong> loads the <strong>layer<\/strong> (in this case, your watermark image).<\/li>\n<li>\n<strong><code>g_south_east<\/code><\/strong> p    ositions it in the bottom-right corner.<\/li>\n<\/ul>\n<p>This overlay works with <strong>any<\/strong> image you upload, as long as you\u2019ve placed a <code>watermark.png<\/code> in your Cloudinary folder.<\/p>\n<blockquote>\n<p>It\u2019s reusable, automatic, and stays consistent across every product image.<\/p>\n<\/blockquote>\n<p>Want to customize position or transparency? Check Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_overlays_tutorial\">overlay docs<\/a>.<\/p>\n<h2>Async Webhook for Variant Sync<\/h2>\n<p>Once Cloudinary finishes generating all the recolored, watermarked variants, it sends a <strong>webhook<\/strong> back to your app. This step connects the dots \u2014 adding the final image URLs to each product.<\/p>\n<h3>How It Works<\/h3>\n<p>In your upload step, we passed this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"HTTP\" data-shcb-language-slug=\"http\"><span><code class=\"hljs language-http shcb-wrap-lines\"><span class=\"hljs-attribute\">notification_url<\/span>:  WEBHOOK\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTTP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">http<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>That\u2019s a URL pointing to:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">\/api\/cloudinary\/webhook\n<\/code><\/span><\/pre>\n<p>Cloudinary calls this route when the background processing is done.<\/p>\n<h2>The Webhook Handler<\/h2>\n<p>Inside <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/app\/api\/cloudinary\/webhook\/route.ts\"><code>api\/cloudinary\/webhook\/route.ts<\/code><\/a>, we:<\/p>\n<ol>\n<li>Receive the <code>public_id<\/code> (so we know which product this is for).<\/li>\n<li>Grab the final <code>eager[].secure_url<\/code> values (the new images).<\/li>\n<li>Update the product in storage with those URLs.<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">products&#91;idx].variants = eager.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">e: any<\/span>) =&gt;<\/span> e.secure_url);\n<span class=\"hljs-keyword\">await<\/span> writeProducts(products);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The product now has a full set of AI-generated, branded image variants!<\/p>\n<h2>Displaying Variants in Your Store<\/h2>\n<p>Once Cloudinary returns the recolored images, your UI will display them automatically using the <code>variants[]<\/code> array.<\/p>\n<h3>Where the Variants Are Used<\/h3>\n<ul>\n<li>\n<a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/components\/product-card.tsx\"><code>ProductCard<\/code><\/a> \u2192 Shows the first variant or thumbnail in product listings.<\/li>\n<li>\n<a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/components\/product-detail.tsx\"><code>ProductDetail<\/code><\/a>\u2192 Renders a scrollable gallery of all color variants.<\/li>\n<li>\n<a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\/blob\/main\/src\/components\/product-grid.tsx\"><code>ProductGrid<\/code><\/a>\u2192 Maps through products and loads <code>ProductCard<\/code> components.<\/li>\n<\/ul>\n<p>Each component pulls directly from the <code>variants<\/code> array, which was updated via the Cloudinary webhook.<\/p>\n<p>The result: A single uploaded image has turned into multiple branded, optimized variants shown across your store. No extra dev work required.<\/p>\n<h2>Conclusion<\/h2>\n<p>With <strong>Cloudinary\u2019s Generative AI Recolor<\/strong>, you automatically turned a single image into multiple branded, optimized variants. It\u2019s a fast, scalable way to handle product visuals in modern e-commerce.<\/p>\n<p>Want to do more? Explore other Cloudinary generative AI tools like Background Removal, object-aware cropping, Generative Fill, and Generative Replace. Check them out in the <a href=\"https:\/\/ai.cloudinary.com\">Cloudinary docs<\/a>, and make sure to <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for a Cloudinary account<\/a> to start building your own projects.<\/p>\n<blockquote>\n<p>Full code: <a href=\"https:\/\/github.com\/musebe\/cloudinary-ai-recolor\">github.com\/musebe\/cloudinary-ai-recolor<\/a><\/p>\n<\/blockquote>\n<blockquote>\n<p>Live demo: <a href=\"https:\/\/cloudinary-ai-recolor.vercel.app\/\">cloudinary-ai-recolor.vercel.app<\/a><\/p>\n<\/blockquote>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":37672,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[336,98,409,212],"class_list":["post-37668","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ai","tag-e-commerce","tag-generative-ai","tag-next-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Enhancing Product Images With Cloudinary AI in Your Next.js Store<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhancing Product Images With Cloudinary AI in Your Next.js Store\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-28T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T23:39:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Enhancing Product Images With Cloudinary AI in Your Next.js Store\",\"datePublished\":\"2025-05-28T14:00:00+00:00\",\"dateModified\":\"2025-12-03T23:39:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA\",\"keywords\":[\"AI\",\"E-commerce\",\"Generative AI\",\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store\",\"url\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store\",\"name\":\"Enhancing Product Images With Cloudinary AI in Your Next.js Store\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA\",\"datePublished\":\"2025-05-28T14:00:00+00:00\",\"dateModified\":\"2025-12-03T23:39:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enhancing Product Images With Cloudinary AI in Your Next.js Store\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Enhancing Product Images With Cloudinary AI in Your Next.js Store","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store","og_locale":"en_US","og_type":"article","og_title":"Enhancing Product Images With Cloudinary AI in Your Next.js Store","og_url":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store","og_site_name":"Cloudinary Blog","article_published_time":"2025-05-28T14:00:00+00:00","article_modified_time":"2025-12-03T23:39:53+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Enhancing Product Images With Cloudinary AI in Your Next.js Store","datePublished":"2025-05-28T14:00:00+00:00","dateModified":"2025-12-03T23:39:53+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA","keywords":["AI","E-commerce","Generative AI","Next.js"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store","url":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store","name":"Enhancing Product Images With Cloudinary AI in Your Next.js Store","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA","datePublished":"2025-05-28T14:00:00+00:00","dateModified":"2025-12-03T23:39:53+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/product-images-cloudinary-ai-next-js-store#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Enhancing Product Images With Cloudinary AI in Your Next.js Store"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1746056550\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store\/Blog_Enhancing_Product_Images_with_AI_Recolor_and_Branding_Watermarking_in_Your_Next.js_E-commerce_Store.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=37668"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37668\/revisions"}],"predecessor-version":[{"id":39568,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37668\/revisions\/39568"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/37672"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=37668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=37668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=37668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}