How to Automate PNG to GIF Asset Generation in Clay Workflows

Animated GIFs in email campaigns can drive substantial lifts in recipient engagement, with a Dell case study reporting a 42% increase in email click rates simply by replacing static product images with dynamic animations [MarketingSherpa Dell Case Study]. This performance lift is where the need for automated asset pipelines begins. While go-to-market teams understand that personalized animated gifs outreach catches attention far better than static text or generic templates, executing this strategy at scale has historically been blocked by manual overhead. Standard tutorials for image creation focus on drag-and-drop online tools such as Ezgif, requiring designers to manually upload and compile files one by one. This manual approach fails when you need to generate thousands of personalized gifs for sales outreach across a spreadsheet database of prospects.

Go-to-market teams need a solution that runs in the background. Clay is a database and enrichment engine that lets sales operations managers build lead lists and trigger programmatic steps for every row. By automating the transition from static screenshots to looping animated files, you can build personalized campaigns that display a prospect's actual dashboard, logo, or website interface. When a lead enters your database, a web capture tool gathers screenshot frames, an image conversion API converts png to gif formats, and the resulting file is saved in a secure folder. This automation workflow eliminates manual design work, ensuring that your sales team always has fresh, personalized assets ready to send.

To build an automated asset pipeline, you must establish a structured flow that moves from lead identification to asset storage. The pipeline relies on three main components: a web capture tool to generate screenshot frames, a conversion API to assemble the frames, and a centralized workspace to store the output.

The sequence begins when a new prospect is added to a Clay workbook table. The workflow consists of the following technical stages:

1. Web Capture Trigger: Clay runs an HTTP request column that calls a screenshot tool, such as Urlbox, passing the prospect's company URL and specific capture settings.
2. Frame Generation: The screenshot tool captures three separate images representing the landing page, a product section, and a pricing table, returning three PNG URLs.
3. Payload Construction: Clay aggregates the frame URLs and passes them in a POST request body to the CloudConvert API.
4. Image Conversion: CloudConvert imports the PNG files, compiles them into a looping GIF at one frame per second, and outputs a single animated file.
5. Persistent Storage: The compiled GIF binary is downloaded from the export task and uploaded directly to a Fast.io persistent workspace.
6. Webhook Enrichment: The upload task returns a persistent Fast.io URL, which a middleware function posts back to the Clay workbook to enrich the row.

This architecture separates the heavy image processing work from the database, preventing lead tracking sheets from slowing down or crashing during bulk operations.

To set up the automated conversion in Clay, you must configure a custom HTTP API enrichment column. This column will make a POST request to a file processing service like CloudConvert. CloudConvert provides v2 API endpoints that support importing and exporting files via HTTP POST requests [CloudConvert API Guide].

First, add a new column to your Clay table and choose the HTTP API enrichment tool. Set the configuration parameters as follows:

• Method: POST
• URL: https://api.cloudconvert.com/v2/jobs
• Headers: Content-Type: application/json
• Authentication: Authorization: Bearer YOUR_CLOUDCONVERT_API_KEY

In the request body, write the JSON payload to define the conversion tasks. You must pass the URLs of the PNG frames captured in the previous step, mapping them directly from your Clay table columns:

{
  "tasks": {
    "import-frame-1": {
      "operation": "import/url",
      "url": "/column/Frame 1 URL/"
    },
    "import-frame-2": {
      "operation": "import/url",
      "url": "/column/Frame 2 URL/"
    },
    "import-frame-3": {
      "operation": "import/url",
      "url": "/column/Frame 3 URL/"
    },
    "compile-gif": {
      "operation": "convert",
      "input": [
        "import-frame-1",
        "import-frame-2",
        "import-frame-3"
      ],
      "output_format": "gif",
      "engine": "imagemagick",
      "fps": 1,
      "loop": 0
    },
    "export-gif": {
      "operation": "export/url",
      "input": "compile-gif"
    }
  }
}

When this enrichment runs, CloudConvert processes the job, compiles the PNG frames at one frame per second, and exposes a temporary download URL. You can map this export URL back to a column in your Clay table using the JSON path tasks['export-gif'].result.files[0].url.

While synchronous HTTP requests work for small files, processing multiple screenshots can cause Clay columns to time out. Because screenshot capture and GIF compilation can take up to ten seconds, you should implement an asynchronous workflow using incoming webhooks. In Clay, you can configure an inbound webhook as a table source to receive data in real time from background scripts.

A serverless middleware function, written in Node.js, can handle the asynchronous loop. The function receives the target URL and Clay webhook destination from your table, handles the conversion sequence, and posts the final link back to Clay:

import axios from 'axios';
export async function handleGifPipeline(req, res) {
  const { targetUrl, rowId, clayWebhookUrl, workspaceId } = req.body;
  try {
    // 1. Trigger Urlbox to capture three screenshot frames
    const captureResponse = await axios.post('https://api.urlbox.io/v1/render', {
      url: targetUrl,
      format: 'png',
      wait_until: 'networkidle0',
      multi_page: true
    }, {
      headers: { 'Authorization': 'Bearer ' + process.env.URLBOX_API_KEY }
    });
    const pngFrames = captureResponse.data.frames;
    // 2. Send PNG frames to CloudConvert for assembly
    const conversionResponse = await axios.post('https://api.cloudconvert.com/v2/jobs', {
      tasks: {
        'import-1': { 'operation': 'import/url', 'url': pngFrames[0] },
        'import-2': { 'operation': 'import/url', 'url': pngFrames[1] },
        'import-3': { 'operation': 'import/url', 'url': pngFrames[2] },
        'merge': {
          'operation': 'convert',
          'input': ['import-1', 'import-2', 'import-3'],
          'output_format': 'gif',
          'engine': 'imagemagick',
          'fps': 1
        },
        'export': { 'operation': 'export/url', 'input': 'merge' }
      }
    }, {
      headers: { 'Authorization': 'Bearer ' + process.env.CLOUDCONVERT_API_KEY }
    });
    // 3. Poll for the exported GIF URL
    const jobId = conversionResponse.data.data.id;
    let gifUrl = null;
    while (!gifUrl) {
      const jobStatus = await axios.get('https://api.cloudconvert.com/v2/jobs/' + jobId, {
        headers: { 'Authorization': 'Bearer ' + process.env.CLOUDCONVERT_API_KEY }
      });
      if (jobStatus.data.data.status === 'finished') {
        const exportTask = jobStatus.data.data.tasks.find(t => t.name === 'export');
        gifUrl = exportTask.result.files[0].url;
      } else if (jobStatus.data.data.status === 'failed') {
        throw new Error('CloudConvert job failed');
      }
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
    // 4. Download GIF buffer
    const gifBuffer = await axios.get(gifUrl, { responseType: 'arraybuffer' });
    // 5. Upload the compiled asset to Fast.io Workspace
    const fastioMcp = 'https://mcp.fast.io/mcp/key';
    const fastioAuth = { Authorization: 'Bearer ' + process.env.FASTIO_API_KEY };
    const uploadResult = axios.post(fastioMcp, {
      jsonrpc: '2.0', id: 1, method: 'tools/call',
      params: { name: 'upload', arguments: {
        action: 'stream-upload',
        profile_type: 'workspace',
        profile_id: workspaceId,
        filename: 'outreach/' + rowId + '.gif',
        content_base64: Buffer.from(gifBuffer.data).toString('base64'),
        content_type: 'image/gif'
      } }
    }, { headers: fastioAuth });
    // 6. Callback to Clay Webhook to write back the persistent GIF URL
    await axios.post(clayWebhookUrl, {
      rowId,
      gifUrl: uploadResult.url
    });
    return res.status(200).json({ success: true, url: uploadResult.url });
  } catch (error) {
    console.error('Asynchronous asset pipeline failed:', error);
    return res.status(500).json({ error: error.message });
  }
}

Using this asynchronous script prevents cell timeouts. The middleware handles the processing in the background, writes the output to storage, and enriches your lead tables.

When managing outbound outreach files, choosing the right storage system is critical. Local storage isolates assets from team members, making collaboration difficult. Amazon S3 offers powerful object storage but lacks human-friendly management tools, requiring developers to write custom frontends. Traditional cloud storage, such as Google Drive and Dropbox, lacks automated file indexing, version control for programmatic API writes, and direct integration with AI tooling.

Fast.io provides shared org-owned workspaces that bridge the gap between file storage and AI workflows. Fast.io organizations operate on a paid model. Starter plans cost $29/mo, Business plans are $99/mo, and Growth plans are $299/mo, as detailed on our pricing page [Fastio Pricing Details]. Every organization starts with a 14-day free trial that requires a credit card, giving your team time to configure and test API integrations [Fastio Pricing Details]. Fast.io does not offer a free plan or free agent tier, ensuring high availability and speed.

When a GIF is uploaded to a Fast.io workspace, the file is processed by Intelligence Mode. This auto-indexes the asset, making it queryable. Sales representatives can use hybrid search to locate assets by name or search the text contained within them. If a script error overwrites a valid file, Fast.io's version history logs every modification, allowing you to restore any previous version. Additionally, you can share these assets with prospects using purpose-built shares. Fast.io supports Send, Receive, and Exchange shares. Recipient access can be managed on an individual basis, and the shares automatically serve the latest file version from your workspace folder.

For developer teams, Fast.io includes a Model Context Protocol server that supports Streamable HTTP at /mcp and legacy SSE at /sse. Developers can consult the storage for agents page to build automations. When onboarding autonomous agents to manage your folders, they can read the Storage for Agents page and the agent onboarding guidelines to learn the tools available.

Manage Converted PNG to GIF Assets in Fast.io

Keep your optimized dynamic assets, personalization screenshots, and png to gif conversion files organized in a secure shared workspace. Search files using semantic intelligence, parse metadata using Metadata Views, and collaborate with your team. Start your 14-day free trial on a paid organization plan.

Start 14-Day Trial

Programmatic asset generation can sometimes output files that are corrupt, too large, or poorly formatted. Sending a pixelated or oversized GIF to a lead can harm your brand reputation and trigger email spam filters. To manage quality control, you can turn your Fast.io upload folder into a structured database using Metadata Views. You can implement this by visiting the Metadata Views page.

Metadata Views allow you to describe the structured columns you want to extract from your files using natural language. The system automatically creates a typed database schema using one of seven field types: Text, Integer, Decimal, Boolean, URL, JSON, and Date & Time. For an automated GIF pipeline, you can define columns to extract:

• File Size (Decimal)
• Frame Count (Integer)
• Aspect Ratio (Text)
• Background Color (Text)

Because this metadata extraction is incremental, you can add new columns at any time without reprocessing existing files. This structured data grid allows you to enforce quality standards. Using the Fast.io workflow engine, developers can design a directed acyclic graph (DAG) of steps with dependencies, triggers, and approvals. If a generated GIF exceeds the maximum file size limit, the workflow engine can flag the file and route a review task to a human designer's inbox. The designer can optimize the compression, verify the file, and use the ownership transfer feature to hand the workspace back to the marketing lead.

Automating image conversions requires managing transparency and API rate limits. PNG files often support transparent backgrounds, which can render as black blocks when converted to GIFs. This can ruin the visual quality of your outreach images, particularly for prospects using dark mode email settings.

To prevent this, you can customize the JSON request sent to ConvertAPI. ConvertAPI provides endpoints to convert files programmatically with dynamic file value parameters [ConvertAPI Docs]. You can configure the request to replace transparency with a solid white background and set the compression quality to optimize file size [ConvertAPI Docs]:

{
  "Parameters": [
    {
      "Name": "File",
      "FileValue": {
        "Url": "/column/Source PNG URL/"
      }
    },
    {
      "Name": "Background",
      "Value": "#ffffff"
    },
    {
      "Name": "Quality",
      "Value": 85
    },
    {
      "Name": "StoreFile",
      "Value": true
    }
  ]
}

Setting the background to a white hex code and the quality to 85 produces clean outreach assets that load quickly.

Rate limiting is another common challenge. When running batch enrichments in Clay, you may make hundreds of requests per minute, prompting the conversion API to return rate limit status codes. To handle rate limiting, configure your serverless middleware function with exponential backoff retry logic. The script should read the retry headers, pause execution, and attempt the request again. This ensures that your automated go-to-market workflows run continuously and no prospect data is lost.